前言
?? 需提前安裝環(huán)境及知識(shí)點(diǎn)：
1、Docker搭建及基礎(chǔ)操作
2、DockerFile文件描述
3、Jenkins搭建及基礎(chǔ)點(diǎn)?? 目的：
將我們的前端項(xiàng)目打包成一個(gè)鏡像容器并自動(dòng)發(fā)布部署，可供隨時(shí)pull訪問
一、手動(dòng)部署鏡像及容器
1、在當(dāng)前項(xiàng)目的根目錄創(chuàng)建Dockerfile文件并寫入如下代碼：
# 第一階段：構(gòu)建前端產(chǎn)出物
FROM node:14.19.0 AS builder
WORKDIR /visualization
COPY . .
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN cnpm install && npm run build
# 第二階段：生成最終容器映像
FROM nginx
COPY docker/certbook.key /etc/nginx/cert/certbook.key
COPY docker/certbook_bundle.pem /etc/nginx/cert/certbook_bundle.pem
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY docker/docker-entrypoint.sh /docker-entrypoint.sh
WORKDIR /home/visualization
COPY --from=builder /visualization/dist .
RUN chmod +x /docker-entrypoint.sh
代碼片段詳細(xì)描述：
注意：如果項(xiàng)目不需要https訪問，則可忽略certbook.key、certbook_bundle.pem的操作
/visualization為工作區(qū)名稱，可更換
| 片段 | 描述 |
|---|---|
| FROM node:14.19.0 AS builder | 選擇使用 Node.js 14.19.0 作為基礎(chǔ)鏡像，并命名該步驟為 “builder” |
| WORKDIR /visualization. COPY . . | 將工作目錄設(shè)置為 “/visualization”，并將當(dāng)前目錄（代碼倉(cāng)庫(kù)根目錄）中的所有文件和目錄復(fù)制到 “/visualization” 目錄中 |
| 1、RUN npm install -g cnpm --registry=https://registry.npm.taobao.org. 2、RUN cnpm install && npm run build | 安裝 cnpm 包管理器并使用其安裝項(xiàng)目依賴項(xiàng)，接著在執(zhí)行 npm run build 命令進(jìn)行構(gòu)建操作，構(gòu)建后的前端產(chǎn)出物保存至 “/visualization/dist” 目錄中 |
| FROM nginx | 選擇使用 Nginx 作為基礎(chǔ)鏡像，并命名該步驟為默認(rèn)名稱 “builder” |
| 1、COPY docker/certbook.key /etc/nginx/cert/certbook.key。 2、COPY docker/certbook_bundle.pem /etc/nginx/cert/certbook_bundle.pem 3、COPY docker/nginx.conf /etc/nginx/conf.d/default.conf 4、COPY docker/docker-entrypoint.sh /docker-entrypoint.sh | 將docker文件夾下的 Nginx 配置文件和證書密鑰文件都復(fù)制到對(duì)應(yīng)的位置中 |
| 1、WORKDIR /home/visualization 2、COPY --from=builder /visualization/dist . | 將工作目錄設(shè)置為 “/home/visualization”，并將來自 “builder” 階段的前端產(chǎn)出物復(fù)制到當(dāng)前目錄中。 |
| RUN chmod +x /docker-entrypoint.sh | 對(duì) “/docker-entrypoint.sh” 執(zhí)行 chmod +x 命令，添加可執(zhí)行權(quán)限。 |
2、項(xiàng)目根目錄新建.dockerignore文件，忽略文件
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.DS_Store
dist
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
.dockerignore
Dockerfile
*docker-compose*
# Logs
logs
*.log
# Runtime data
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
pids
*.pid
*.seed
.git
.hg
.svn
3、當(dāng)前項(xiàng)目根目錄下創(chuàng)建docker文件夾
1、新建nginx.conf文件，用于配置前端項(xiàng)目訪問nginx配置文件
2、新建docker-entrypoint.sh文件，執(zhí)行腳本動(dòng)態(tài)修改nginx.conf中的代理請(qǐng)求地址
3、如果項(xiàng)目需要https，則把證書xxx.key、xxx.pem放入docker文件夾中，需要與上面DockerFile中COPY的證書名稱保持一致
nginx.conf內(nèi)容
~根據(jù)項(xiàng)目情況做出修改，gzip配置前端無則可刪除
~ /dev是前端代理跨域的基準(zhǔn)地址，要保持統(tǒng)一，代理到后端的地址，做代理的目的是后面可以根據(jù)容器run動(dòng)態(tài)改變proxy_pass地址
~如果項(xiàng)目無https則可刪除443監(jiān)聽
server {
listen 80;
listen [::]:80;
server_name localhost;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
#
location / {
root /home/visualization;
index index.html index.htm;
}
location /dev {
# 前端/dev請(qǐng)求代理到后端https://xxx.xxx/
proxy_pass https://xxx.xxx/;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_connect_timeout 1;
proxy_buffering off;
chunked_transfer_encoding off;
proxy_cache off;
proxy_send_timeout 30m;
proxy_read_timeout 30m;
client_max_body_size 500m;
access_log /var/log/nginx/dev_access.log;
error_log /var/log/nginx/dev_error.log;
}
}
server {
listen 443 ssl;
listen [::]:443;
# 配置域名訪問項(xiàng)目
server_name xx.xx.xx.com;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
#
# ssl證書配置開始
ssl_certificate /etc/nginx/cert/certbook_bundle.pem;
ssl_certificate_key /etc/nginx/cert/certbook.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
# ssl證書配置結(jié)束
location / {
root /home/visualization;
index index.html index.htm;
}
location /dev {
# 前端/dev請(qǐng)求代理到后端https://xxx.xxx/
proxy_pass https://xxx.xxx/;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_connect_timeout 1;
proxy_buffering off;
chunked_transfer_encoding off;
proxy_cache off;
proxy_send_timeout 30m;
proxy_read_timeout 30m;
client_max_body_size 500m;
access_log /var/log/nginx/dev_access.log;
error_log /var/log/nginx/dev_error.log;
}
}
docker-entrypoint.sh內(nèi)容
文件目的：動(dòng)態(tài)改變nginx配置文件的代理地址，具體到改某一行
1、https://xxx.xxx/為后端接口地址，默認(rèn)地址
2、sed -i ‘21c ‘“$apiUrl”’’ /etc/nginx/conf.d/default.conf
例如：將nginx.conf配置文件中的21行替換成某個(gè)值
#!/usr/bin/env bash
API_BASE_PATH=$API_BASE_PATH;
if [ -z "$API_BASE_PATH" ]; then
API_BASE_PATH="https://xxx.xxx/";
fi
apiUrl="proxy_pass $API_BASE_PATH;"
sed -i '21c '"$apiUrl"'' /etc/nginx/conf.d/default.conf
sed -i '73c '"$apiUrl"'' /etc/nginx/conf.d/default.conf
nginx -g "daemon off;"
整體文件目錄如下：
4、打包鏡像、運(yùn)行容器
如果本地沒有Docker環(huán)境，以下操作則在服務(wù)器執(zhí)行：
1、將項(xiàng)目上傳至云服務(wù)器，并建立項(xiàng)目文件夾（項(xiàng)目的dist以及node_modules文件夾不需要上傳）
2、在遠(yuǎn)程服務(wù)器端cd到項(xiàng)目根目錄中
3、構(gòu)建 Docker 鏡像
// hello是指的鏡像名稱
// 1.0.0是鏡像的版本
docker build . -t hello:1.0.0
4、運(yùn)行容器
//方式一：
// contanier_hello為容器名稱
// -p 9090:80 將容器里面的80端口映射到宿主機(jī)的8080端口，80端口就是nginx里面配置，多個(gè)端口多個(gè)配置，必須確保服務(wù)器已經(jīng)開了此端口
docker run -d --name contanier_hello -p 8080:80 hello:1.0.0
//方式二：
// 運(yùn)行容器的時(shí)候改變nginx代理地址
// -e API_BASE_PATH就是上面sh文件中定義的變量 把nginx的后端接口地址改為http://www.baidu.com，這個(gè)地址一定不要亂寫格式
docker run -d --name contanier_hello -p 8080:80 -e "API_BASE_PATH=http://www.baidu.com" hello:1.0.0
5、這樣我們就已經(jīng)可以運(yùn)行訪問啦
6、[擴(kuò)展] 發(fā)布本地鏡像到私服鏡像庫(kù)
*** 前提需要去搭建阿里云或者騰訊云的registry
1、輸入網(wǎng)址https://cr.console.aliyun.com/cn-hangzhou/repositories
2、注冊(cè)賬號(hào)
3、創(chuàng)建命名空間
4、創(chuàng)建鏡像倉(cāng)庫(kù)
5、選擇剛創(chuàng)建的命名空間，輸入倉(cāng)庫(kù)信息
docker login --username=xxxxx registry.cn-hangzhou.aliyuncs.com
docker push 鏡像名稱:版本
二、通過Jenkins自動(dòng)構(gòu)建
此步驟是基于第一步中的(1、2、3)，再進(jìn)行如下操作
前提：服務(wù)器已經(jīng)搭建好了Jenkins
特別注意：在運(yùn)行Jenkins容器的時(shí)候一定要把宿主機(jī)的Docker進(jìn)行映射，因?yàn)闀?huì)在Jenkins容器里面使用dokcer命令，不然會(huì)找不到，怎么查看自己有沒有進(jìn)行映射？進(jìn)入jenkins容器里面輸入docker -v看是否有版本信息，如果沒有則需要?jiǎng)h除容器重新run，例如：
docker run -d -uroot -p 10000:8080 -p 50000:50000 --name jenkins \
-v /home/jenkins_home:/var/jenkins_home \
-v /home:/home \
-v /etc/localtime:/etc/localtime \
-v /var/run/docker.sock:/var/run/docker.sock \
-v /usr/bin/docker:/usr/bin/docker \
jenkins/jenkins:lts
-v /var/run/docker.sock:/var/run/docker.sock
-v /usr/bin/docker:/usr/bin/docker
以上2句就是把Dcoker映射進(jìn)容器里面
1、創(chuàng)建Jenkins任務(wù)
2、配置General
3、配置Shell變量
4、配置git源碼（項(xiàng)目地址的git）
5、配置構(gòu)建環(huán)境
6、配置Shell執(zhí)行腳本
#!/bin/bash
docker -v
CONTAINER=${container_name}
PORT=${port}
# 檢查同名容器是否存在并刪除
if docker ps -a --filter "name=$CONTAINER" --format '{{.ID}}' | xargs docker inspect --format='{{json .State.Running}}' | grep -qEe true; then
docker stop $CONTAINER && docker rm -f $CONTAINER
fi
# 刪除之前構(gòu)建的鏡像
docker images | grep "${image_name}" | awk '{print $3}' | xargs docker rmi -f
# 構(gòu)建鏡像并添加標(biāo)簽
docker build --no-cache -t ${image_name}:${tag} .
# 移除「依賴 none 鏡像」
if docker images --filter 'dangling=true' -q --no-trunc; then
docker rmi $(docker images --filter 'dangling=true' -q --no-trunc)
fi
# run docker image
docker run -d --name $CONTAINER -p $PORT:80 -p 9091:443 --restart always ${image_name}:${tag}
echo '================開始推送鏡像================'
# 具體登錄到哪個(gè)私服，看你們創(chuàng)建是哪個(gè)平臺(tái)阿里云、騰訊云等
docker login --username=賬號(hào) --password=密碼 registry.cn-hangzhou.aliyuncs.com
docker push ${image_name}:${tag}
echo '================結(jié)束推送鏡像================'
7、注意：在運(yùn)行容器時(shí)，端口一定不要與其他容器映射出來的端口一樣，會(huì)被占用
如上面的-p 9091:443是將容器的443端口映射到宿主機(jī)的9091，那么宿主機(jī)中的容器一定不能有9091端口，唯一的，再映射端口時(shí)也要注意服務(wù)器要開通此端口
8、以上都配置完成之后便可以點(diǎn)擊構(gòu)建啦，會(huì)自動(dòng)執(zhí)行拉取代碼、項(xiàng)目打包、構(gòu)建鏡像、運(yùn)行容器、發(fā)布鏡像
9、別人若想使用你的鏡像，則可以拉取運(yùn)行：文章來源：http://www.zghlxwxcb.cn/news/detail-453257.html
docker pull 遠(yuǎn)程鏡像名稱:[鏡像版本號(hào)]
運(yùn)行容器：
//方式一：
// contanier_hello為容器名稱
// -p 9090:80 將容器里面的80端口映射到宿主機(jī)的8080端口，80端口就是nginx里面配置，多個(gè)端口多個(gè)配置，必須確保服務(wù)器已經(jīng)開了此端口
docker run -d --name contanier_hello -p 8080:80 hello:1.0.0
//方式二：
// 運(yùn)行容器的時(shí)候改變nginx代理地址，后端想使用前端代碼本地運(yùn)行請(qǐng)求自己的本地ip時(shí)可以采用這種方式
// -e API_BASE_PATH就是上面sh文件中定義的變量 把nginx的后端接口地址改為http://www.baidu.com，這個(gè)地址一定不要亂寫格式，否則nginx會(huì)解析不出來，導(dǎo)致報(bào)錯(cuò)
docker run -d --name contanier_hello -p 8080:80 -e "API_BASE_PATH=http://www.baidu.com" hello:1.0.0
【博文：版本二，無需本地存儲(chǔ)證書，進(jìn)行容器映射】文章來源地址http://www.zghlxwxcb.cn/news/detail-453257.html
?? ?? ?? ?? ----- 大功告成----- ?? ?? ?? ??
到了這里，關(guān)于Jenkins+GitLab+Docker搭建前端自動(dòng)化構(gòu)建鏡像容器部署的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
