Docker安裝Jenkins，Nginx，實現前端專案自動化構建

語言: CN / TW / HK
時間 2023-01-15 20:15:04
主題:

slug: / sidebar_position: 1 title: Docker安裝Jenkins，Nginx，實現前端專案自動化構建 data: 2023年1月04日 theme: channing-cyan

Docker安裝Jenkins，Nginx，實現前端專案自動化構建

安裝 Docker

shell // 安裝 curl -fsSL get.docker.com -o get-docker.sh sh get-docker.sh // 啟動Docker服務 systemctl start docker // 開機預設啟動 systemctl enable docker 執行一下docker -v，可以用來檢視 Docker 安裝的版本資訊。也可以幫助我們檢視 docker 的安裝狀態；如果正常展示版本資訊，代表 Docker 已經安裝成功。

通過docker ps檢視容器狀態。

安裝 Jenkins

拉取 jenkins 映象

使用 docker pull 命令拉取映象 shell docker pull jenkins/jenkins

執行容器

shell docker run -d --name jenkins -p 8080:8080 -p 50000:50000 jenkins/jenkins

引數說明 - --name 定義一個容器的名字，如果沒有指定，那麼會自動生成一個隨機數字符串當做UUID - -d 標識是讓 docker 容器在後臺執行 - -p 9000:8080 埠對映，將宿主機9000埠對映到容器8080埠 - -p 50000:50000 50000埠是基於JNLP的Jenkins代理（slave）通過TCP與 Jenkins master 進行通訊的埠。

啟動後可以通過 docker ps 來檢視服務情況。 docker 容器狀態

注意： * 在雲伺服器的防火牆裡開啟8080端口才能訪問。 * 然後通過伺服器ip：8080埠就可以訪問我們的 jenkins 服務

例如在阿里雲中進行安全組配置 安全組配置

配置Jenkins

通過 http://<ipaddress>:8080 訪問 Jenkins 介面

jenkins初始化密碼

由於我們是用 docker 安裝的，所以密碼會被儲存到容器中。 管理員初始密碼被放到了 /var/jenkins_home/secrets/initialAdminPassword 檔案中。

shell docker exec -it jenkins bash 進入容器檢視密碼，然後再 jenkins 頁面中輸入密碼 shell cat /var/jenkins_home/secrets/initialAdminPassword

問題：

再完成上一步之後，大部分情況下會出現 您的 Jenkins 已離線 jenkins離線

原因是jenkins在下載外掛之前會先檢查網路連線，其會讀取這個檔案中的網址。預設是： 訪問谷歌，肯定訪問不了，所以將圖下的google改為www.baidu.com即可，更改完重啟服務。 jenkins_default_json

首先我們找的 default.json 的位置，先進入容器docker exec -it jenkins bash，這個檔案存放在了 /var/jenkins_home/updates/ 目錄下

docker 中的檔案無法直接修改 1. 方式一：可以使用 yum -y install vim 或者 apt-get install vim 命令安裝。 然後再通過vim進行修改，但這種方法不推薦 shell vim default.json 2. 方式二：把容器裡面的檔案拷貝到本機進行修改，然後再拷貝回去 命令如下 ```shell docker cp [容器名字]:[具體檔案地址] [想要拷貝到本地的目標地址]

例子

docker cp redis:/test/cptest.txt ./ 如果使用這種方式，命令如下：shell docker cp jenkins:/var/jenkins_home/updates/default.json /root/var/tmp 然後，我們把修改後的 `default.json` 拷貝回去。shell docker cp /root/var/tmp/default.json jenkins:/var/jenkins_home/updates ```

最後一步，開啟 http://<ip>:8080/pluginManager/advanced 頁面滾動到最底部 Update Site 的 URL 為： * https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json

該地址為 清華大學開源軟體映象站

jenkins修改update_site 如果一切正常的話，就可以正常安裝外掛了 jenkins外掛安裝

如果上述步驟出問題，也可以跳過外掛安裝，在裡面手動下載，然後在 Jenkins 的外掛管理裡面手動安裝。

安裝外掛

需要安裝兩個外掛，在

首頁 > 系統管理 > 外掛管理 > 可選外掛 > 搜尋選中 NodeJS > 安裝完成後重啟服務

  • NodeJs: 程式碼打包時需要的環境

  • Publish Over SSH: 打包完成後通過這個外掛ssh連線傳送到遠端伺服器

  • 配置 NodeJs 這一步是因為有時候用最新的版本安裝包會失敗，推薦使用最新的穩定版本，我這裡是使用的16.13.1這個版本。在

首頁 > 系統管理 > 全域性工具工具配置 > NodeJS > 新增 jenkins_node配置

  1. 新建專案任務實現構建及部署

(1) 首頁 > 新建任務 > 構建一個自由風格的軟體專案 jenkins新建任務

(2) git原始碼管理 配置這一步是讓jenkins去哪個git倉庫拉取程式碼。 jenkins_git配置

  • Repository URL: git倉庫的地址
  • Credentials: 連線git倉庫的認證方式，一般使用Username with password或者Secret Text的方式，前者就是使用者名稱和密碼的方式，後者是需要生成token金鑰，用金鑰連線。
  • Branches to build: 指定拉取的分支

(3) 指定構建環境 jenkins構建環境

(4) 構建指令碼 jenkins構建配置指令碼

這裡的命令根據實際情況來 shell npm install npm run build cd dist tar zcvf dist.tar.gz *

安裝 Nginx

獲取nginx官方映象 shell docker pull nginx

將nginx關鍵目錄對映到本機，目的是為了方便我們修改 nginx 的配置

shell mkdir -p /root/nginx/www /root/nginx/logs /root/nginx/conf * www: nginx儲存網站網頁的目錄

  • logs: nginx日誌目錄

  • conf: nginx配置檔案目錄

481e121fb29f 為容器id,根據實際情況修改 shell docker cp 481e121fb29f:/etc/nginx/nginx.conf /root/nginx/conf

建立新nginx容器nginx-web,並將 www,logs,conf目錄對映到本地 shell docker run -d -p 80:80 --name nginx-web -v /root/nginx/www:/usr/share/nginx/html -v /root/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /root/nginx/logs:/var/log/nginx nginx docker 容器狀態

配置 nginx config 進入到/root/conf/nginx.conf 新增如下配置

```shell server { listen 80; charset utf-8; server_name 192.168.112.135;

location / { proxy_pass http://192.168.112.135:8080; proxy_redirect default; } } ```

啟動nginx shell docker start nginx-web

nginx 重啟命令 shell docker exec -it nginx service nginx reload

把打包後進行部署

  1. 首先在 jenkins 首頁配置下publish over ssh的ssh連線配置。

在 首頁 > 系統管理 > 系統配置 > Publish over SSH > 新增 jenkins_ssh

填入這幾個配置項，主要是Hostname和Username，勾選上 Use password authentication, or use a different key，然後輸入Password。

完成之後選擇構建後的操作 jenkins構建後操作

jenkins構建後配置

  • Source files: 原始檔，也就是剛才我們壓縮好的檔案，dist.tar.gz
  • Remove prefix: 移除的字首，就是移除壓縮檔案前面的dist資料夾，不然移到遠端伺服器後也有dist資料夾
  • Exec command: 完成把檔案移動到遠端伺服器後執行的shell命令，這裡大概就是清空之前的專案資料夾下所有檔案，然後解壓dist.tar.gz到專案資料夾下，最後刪除dist.tar.gz壓縮包

shell cd ~ mv ./dist.tar.gz /root/nginx/www cd /root/nginx/www tar zxvf dist.tar.gz rm -rf dist.tar.gz

最後一步就是在 Github 的專案中新增 Webhooks

配置的 Payload URL 為 http://<jenkins地址>/github-webhook/

github_webhook配置

最後推送程式碼，就可以在 jenkins 中看到任務會自動構建，然後進行釋出了。

「」