在現代前端開發中，自動化部署變得越來越重要。透過使用 Docker、Jenkins 和 Nginx，我們可以實現高效的前端自動化部署。本文將詳細介紹如何使用這三種工具完成一個前端應用的自動化部署過程。
前提條件
已安裝 Docker 和 Docker Compose
已安裝 Jenkins
擁有一個前端專案的程式碼庫（例如 GitHub）
準備工作
伺服器一臺（本系統CentOS 7.3 64位）
安裝docker
1.解除安裝docker的舊版本
[root@VM-4-16-centos ~]# sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-engine
2. yum安裝gcc相關
[root@VM-4-16-centos ~]# yum -y install gcc [root@VM-4-16-centos ~]# yum -y install gcc c++
3. 安裝軟體包和國內的映象倉庫
分別執行下面的兩條命令
[root@VM-4-16-centos ~]# sudo yum install -y yum-utils [root@VM-4-16-centos ~]# sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
4. 下載阿里雲倉庫
執行這個步驟是爲了處理後續安裝docker-ce時有些包下不了的問題
[root@VM-4-16-centos ~]# wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
5. 安裝docker引擎
[root@VM-4-16-centos ~]# sudo yum install docker-ce docker-ce-cli containerd.io
6. 啟動docker
[root@VM-4-16-centos ~]# sudo systemctl start docker
7. 檢視docker版本
[root@VM-4-16-centos ~]# docker version
得到的版本資訊如下：
[root@VM-20-11-centos ~]# docker version Client: Docker Engine - Community Version: 26.1.4 API version: 1.45 Go version: go1.21.11 Git commit: 5650f9b Built: Wed Jun 5 11:32:04 2024 OS/Arch: linux/amd64 Context: default Server: Docker Engine - Community Engine: Version: 26.1.4 API version: 1.45 (minimum version 1.24) Go version: go1.21.11 Git commit: de5c9cf Built: Wed Jun 5 11:31:02 2024 OS/Arch: linux/amd64 Experimental: false containerd: Version: 1.6.33 GitCommit: d2d58213f83a351ca8f528a95fbd145f5654e957 runc: Version: 1.1.12 GitCommit: v1.1.12-0-g51d5e94 docker-init: Version: 0.19.0 GitCommit: de40ad0
8. 騰訊雲配置映象加速源
配置映象加速源分三步
8.1 編輯daemon.json檔案
[root@VM-4-16-centos ~]# vim /etc/docker/daemon.json
8.2 往daemon.json中新增配置
{
"registry-mirrors": [
"https://mirror.ccs.tencentyun.com"
]
}
8.3 重啟docker
[root@VM-4-16-centos ~]# sudo systemctl restart docker
執行hello-world檢查docker是否啟動成功
[root@VM-4-16-centos ~]# sudo docker run hello-world
執行資訊如下：
Hello from Docker! # 打出這句話就說明docker已經安裝成功 This message shows that your installation appears to be working correctly. To generate this message, Docker took the following steps: 1. The Docker client contacted the Docker daemon. 2. The Docker daemon pulled the "hello-world" image from the Docker Hub. (amd64) 3. The Docker daemon created a new container from that image which runs the executable that produces the output you are currently reading. 4. The Docker daemon streamed that output to the Docker client, which sent it to your terminal. To try something more ambitious, you can run an Ubuntu container with: $ docker run -it ubuntu bash Share images, automate workflows, and more with a free Docker ID: https://hub.docker.com/ For more examples and ideas, visit: https://docs.docker.com/get-started/
安裝Git
sudo apt-get update //更新包索引 sudo apt-get install git //安裝git git --version //驗證
安裝jdk
一、檢查系統是否自帶jdk
java --version
如果有的話，找到對應的檔案刪除 第一步：先檢視Linux自帶的JDK有幾個，用命令：
第二步:刪除JDK，執行命令
rpm -qa | grep -i java | xargs -n1 rpm -e --nodeps #rpm -qa:查詢所安裝的所有rpm包 #grep -i:忽略大小寫 #xargs -n1:表示每次只傳遞一個引數 #rpm -e --nodeps:強制解除安裝軟體
第三步：檢查是否刪除成功
#檢視是否還在即可 rpm -qa | grep -i java #或者檢視java版本 java -version
二、透過wget下載jdk1.8並解壓
1、進入home資料夾並建立jdk資料夾
cd /home //進入home資料夾 mkdir jdk //建立jdk資料夾 cd jdk //進入jdk資料夾
2、進入jdk檔案透過wget下載jdk1.8
wget \ --no-check-certificate \ --no-cookies \ --header \ "Cookie: oraclelicense=accept-securebackup-cookie" \ http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk-8u131-linux-x64.tar.gz
3、解壓安裝包
tar xvf jdk-8u131-linux-x64.tar.gz
三、配置環境變數
vim /etc/profile
鍵盤輸入i在檔案最後插入以下內容：
export JAVA_HOME=/home/jdk/jdk1.8.0_131 export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/ export PATH=$PATH:$JAVA_HOME/bin //語法解釋 //export JAVA_HOME=你自己解壓的jdk資料夾路徑
最後輸入source /etc/profile使其生效
三、檢查是否安裝成功
java -version
安裝Jenkins
1.下載Jenkins
使用下面命令，讓docker拉取映象，
docker pull jenkins/jenkins:2.426.2-lts
注：需要指定版本號，不然拉取的映象版本是比較老的版本
2、建立掛載目錄
建立一個掛載目錄，用於存放jenkins的資料
//建立目錄 mkdir -p /usr/docker/jenkins_data //授權許可權 chmod 777 jenkins_home
3、啟動Jenkins容器
啟動命令如下：
docker run -d -p 8082:8080 -p 50000:50000 -v /usr/docker/jenkins_data:/var/jenkins_home -v /etc/localtime:/etc/localtime -v /usr/bin/docker:/usr/bin/docker -v /var/run/docker.sock:/var/run/docker.sock --restart=on-failure -u 0 --name myjenkins jenkins/jenkins:2.426.2-lts
指令解析：
-d ：後臺執行容器
-p：埠對映， 左邊是本地埠，右邊是docker容器埠 ，8080是Jenkins Web 介面的工作埠,50000是JNLP（Java Network Launch Protocol）工作埠。這個埠用於 Jenkins 節點和主控節點之間的通訊。
-v ：目錄掛載，將主機上的 /usr/docker/jenkins_data 目錄掛載到容器內的 /var/jenkins_home 目錄，用於持久化 Jenkins 的資料。/etc/localtime:/etc/localtime：將本地主機上的時區資訊檔案掛載到容器內的 /etc/localtime 檔案中，確保容器內的時間與主機上的時間一致
-v /usr/bin/docker:/usr/bin/docker: 將主機上的 /usr/bin/docker 檔案掛載到容器中的 /usr/bin/docker，這樣容器內的 Jenkins 可以直接使用宿主機上的 Docker 命令。在使用 GitLab/Jenkins 等 CI 軟體的時候需要使用 Docker 命令來構建映象，需要在容器中使用 Docker 命令；透過將宿主機的 Docker 共享給容器
-v /var/run/docker.sock:/var/run/docker.sock: 將主機上的 Docker socket 檔案掛載到容器中的相同位置，這樣容器內的 Jenkins 可以與宿主機上的 Docker 引擎進行通訊。
–restart=on-failure：設定容器的重啟策略為在容器以非零狀態退出（異常退出）時重啟。
-u 0：將容器內程序的使用者身份設定為 root 使用者，等同於-u root。
–name myjenkins：給容器指定一個名稱為 myjenkins。
4、驗證Jenkins容器是否啟動成功
使用下面命令，檢視jenkins是否已經在執行
docker ps
如果已經執行，會輸出jenkins容器的相關資訊
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 2949e82cbfe8 jenkins/jenkins:2.426.2-lts "/usr/bin/tini -- /u…" 6 days ago Up 24 hours 0.0.0.0:50000->50000/tcp, :::50000->50000/tcp, 0.0.0.0:8082->8080/tcp, :::8082->8080/tcp myjenkins
5、獲取管理員密碼
我們在進入Jenkins的管理頁面的時候，是需要管理員密碼，所以我們需要獲取管理員密碼
獲取管理員密碼有兩種方式
1、檢視日誌
使用下面命令檢視jenkins的輸出日誌，myjenkins是我們在啟動jenkins時給jenkins指定的容器名
docker logs myjenkins
找到下面這行程式碼，Please use the following password to proceed to installation下面的就是密碼
Please use the following password to proceed to installation: a90c1533c8824b17bb49ff932229d22d
2、檢視檔案
不看日誌，我們也可以直接檢視/var/jenkins_home/secrets/initialAdminPassword檔案，這個目錄在我們進入jenkins 管理頁面時會看到
6、修改外掛源
Jenkins在安裝外掛時，下載相關外掛包特別慢，我們可以將Jenkins預設的外掛資料來源變更為國內資料來源，然後重啟Jenkins
#進入更新配置目錄
cd {你的Jenkins工作目錄}/updates
使用下面命令替換default.json檔案中指定的源
sed -i 's/http://updates.jenkins-ci.org/download/https://mirrors.tuna.tsinghua.edu.cn/jenkins/g' default.json && sed -i 's/http://www.google.com/https://www.baidu.com/g' default.json
修改下載地址
cd {你的Jenkins工作目錄}/ 找到下面這個檔案 hudson.model.UpdateCenter.xml檔案
<?xml version='1.1’encoding='UTF-8'?> <sites> <site> <id>default</id> <url>https://updates.jenkins.io/update-center.json</url> </site> </sites>
將url替換為mirror.esuni.jp/jenkins/upd…
<?xml version='1.1encoding='UTF-8'?> <sites> <site> <id>default</id> <urI>http://mirror.esuni.jp/jenkins/updates/update-center.json</url》 </site> </sites>
7、登入web頁面
使用ip:8082，8082就是我們主機對映到容器8080的埠，如果你使用的是其他埠，那麼需要換成其他埠
輸入密碼之後，就可以安裝外掛，直接選擇安裝推薦的外掛即可
下載完成，就可以進入jenkins進行操作了
8、外掛推薦
除了推薦外掛之外，下面是一些常用外掛，大家按需安裝
Locale（中文外掛）
Gitlab Plugin （拉取 gitlab 中的原始碼）
Maven Integration（maven構建工具）
Publish Over SSH（遠端推送工具）
Role-based Authorization Strategy（許可權管理）
Deploy to container（自動化部署工程所需要外掛，部署到容器外掛）
git parameter（使用者引數化構建過程裡新增git型別引數）
下載外掛在系統管理—外掛管理的Available plugins
安裝NodeJS
因為我們的Vue專案是基於 NodeJS 來打包構建的，所以需要在 Jenkins 中安裝外掛：
我這裏已經安裝你們在Available plugins裡面安裝一下
配置nodejs
我們進入Dashboard > 系統管理 > 全域性工具配置
配置github
我們進入系統配置裡面配置github
點選新增
我們去github獲取秘鑰填寫進secret裡面
點選連線測試出現這個表示配置成功
點選高階
將這個url複製到github倉庫裡面進行配置
點選設定
點選Webhooks，在這裏貼上我們剛剛複製的url地址
專案Docker 環境配置
首先，為前端專案建立一個 Dockerfile，用於打包前端專案：
FROM nginx COPY dist/ /usr/share/nginx/html/ COPY nginx/default.conf /etc/nginx/conf.d/default.conf
建立一個 nginx/default.conf 檔案，用於 Nginx 配置：
server {
listen 80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
建立任務
輸入自己的github地址
原始碼管理，輸入git地址，並新增github賬號密碼
這裏的分支要跟你git專案的分支一樣
觸發器選擇GitHub hook trigger for GITScm polling
構建環境選擇node
新增構建步驟
輸入命令
npm install npm run build rm -rf /home/nginx/html/* docker stop vueApp docker rm vueApp docker build -t vuenginxcontainer . docker image ls | grep vuenginxcontainer docker run \ -p 3000:80 \ -d --name vueApp \ vuenginxcontainer
選擇報錯我們就配置好了，當我們在git push 就會自動構建
這裏就開始構建
訪問我們配置的容器地址，就可以看到已經好了
部署流程
提交程式碼：開發者將程式碼提交到 GitHub。
觸發 Jenkins 構建：Jenkins 透過 Webhook 或定時觸發構建。
拉取程式碼並構建映象：Jenkins 拉取最新的程式碼，使用 Dockerfile 構建 Docker 映象。
推送映象：將構建的 Docker 映象推送到 Docker Hub。
部署映象：在伺服器上執行最新的 Docker 映象，透過 Nginx 反向代理訪問前端應用。
總結
透過以上步驟，我們實現了一個完整的前端自動化部署流程。從程式碼提交到最終部署，全部由 Jenkins 自動完成，大大提高了部署效率和程式碼釋出的可靠性。希望這篇文章能幫助你搭建自己的前端自動化部署流程。
