Jenkins 新增前端項目Job

指定運行的節點

選擇部署運行的節點標簽，dev標簽對應開發環境


節點的遠程命令執行配置
jenkins完整流程

配置源碼 拉取

Credentials添加

觸發遠程構建

配置后可以支持遠程觸發jenkins構建（比如自建的CICD自動化發布平臺），不需要遠程構建的可以不配置

token生成配置

Build Steps

采用shell腳本模式

# jenkins服務Job運行的工作空間項目存放地址
codeRootDir="/data/jenkins/workspace/Dev.xx.Web"
# 項目部署遠程服務器地址
remoteHost="10.30.222.11"
# 遠程部署服務器存放鏡像地址
remoteRootDir="/data/websites/images"
# 生成的項目鏡像名稱
dockerImageName="img.xx.web.dev"
# 運行的容器名稱
containerName="xx.web.dev"# 確保工作空間擁有該目錄
mkdir -p ${codeRootDir}
# 切換到工作目錄
cd ${codeRootDir}echo build start
#指定鏡像地址
npm config set registry https://registry.npmmirror.com/
#安裝Vue項目依賴
npm install @vue/cli-plugin-eslint@latest --legacy-peer-deps
# 打包（根據Vue項目中的配置來）
npm run build
echo build endecho "Building Docker image..."
# 開始構建鏡像（注意dockerfile 要在codeRootDir目錄下）
docker build -t "${dockerImageName}:latest" "${codeRootDir}"
echo "Docker image built successfully."#壓縮保存鏡像到codeRootDir目錄下
echo "Saving Docker image to file..."
docker save "${dockerImageName}:latest" | gzip > "${codeRootDir}/${dockerImageName}.tar.gz"
echo "Docker image saved successfully."# 遠程傳輸到目標服務器
echo "Uploading Docker image to server..."
# 確保遠程服務有此目錄
ssh root@"${remoteHost}" "mkdir -p ${remoteRootDir}"
# 傳輸鏡像到遠程目錄
scp -C "${codeRootDir}/${dockerImageName}.tar.gz" root@"${remoteHost}":"${remoteRootDir}/"
echo "Upload completed."# 遠程執行命令
echo "Deploying on remote server..."
ssh root@"${remoteHost}" "
cd ${remoteRootDir} &&
# 解壓鏡像，并加載鏡像到本地
gunzip -c ${dockerImageName}.tar.gz | docker load &&
# 查詢當前是否有該鏡像服務運行，有則刪除該鏡像后從新運行鏡像
docker ps -q --filter 'name=${containerName}' | grep -q . && docker rm -f ${containerName} || true &&
docker run -d --name ${containerName} --privileged=true --restart=always -p 8090:80 ${dockerImageName}:latest
"
echo "Deployment completed."

Vue項目代碼對應改造

在項目package.json同級目錄下創建 Dockerfile、nginx.conf、nginx.default.config 文件

package.json

定義的install 、 bulid 、run命令

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","build:report": "vue-cli-service build --report","globle": "npm install -g cnpm --registry=https://registry.npm.taobao.org&&cnpm i rimraf npm-check-updates nrm -g&&rimraf node_modules&&cnpm i","lint": "eslint --fix --ext .js,.vue src","lint:style": "stylelint-config-prettier-check","inspect": "vue-cli-service inspect","template": "plop","clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org","use:npm": "nrm use npm","use:taobao": "nrm use taobao","update": "ncu -u --reject sass-loader,sass,screenfull,eslint&&cnpm i","update:globle": "ncu -g --concurrency 10 --timeout 80000","push": "start ./push.sh","deploy": "start ./deploy.sh"},

Dockerfile

FROM nginxMAINTAINER vue-admin-beautiful
LABEL description=本項目基于vue-admin-beautiful開源版構建
LABEL qq=783963206# 環境變量
ENV TZ=Asia/Shanghai \RUN_USER=nginx \RUN_GROUP=nginx \DATA_DIR=/data/web \LOG_DIR=/data/log/nginx# 工作目錄
WORKDIR ${DATA_DIR}# 日志輸出
RUN ["echo","vue-admin-beautiful - UI building..."]# 切換為上海時區
RUN ln -sf /usr/share/zoneinfo/$TZ /etc/localtime \&& echo $TZ > /etc/timezone# 創建日志文件夾
RUN mkdir ${LOG_DIR} -p
RUN chown nginx.nginx -R ${LOG_DIR}# 拷貝dist包文件
COPY ./dist ./# 拷貝nginx配置文件
ADD nginx.conf /etc/nginx/nginx.conf
ADD nginx.default.conf /etc/nginx/conf.d/default.confEXPOSE 80
ENTRYPOINT nginx -g "daemon off;"

nginx.conf

user  nginx;
worker_processes  auto;
pid        /var/run/nginx.pid;events {use epoll;worker_connections 51200;multi_accept on;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;server_names_hash_bucket_size 512;client_header_buffer_size 32k;large_client_header_buffers 4 32k;client_max_body_size 50m;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;tcp_nopush     on;tcp_nodelay on;keepalive_timeout  65;# gzip 壓縮gzip on;gzip_min_length  1k;gzip_buffers     4 16k;gzip_http_version 1.1;gzip_comp_level 2;gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;gzip_vary on;gzip_proxied   expired no-cache no-store private auth;gzip_disable   "MSIE [1-6]\.";limit_conn_zone $binary_remote_addr zone=perip:10m;limit_conn_zone $server_name zone=perserver:10m;include /etc/nginx/conf.d/*.conf;
}

nginx.default.conf

server {listen       80;server_name  localhost;access_log  /data/log/nginx/access.log  main;error_log   /data/log/nginx/error.log;# 靜態資源location / {root   /data/web;index  index.html index.htm;try_files $uri $uri/ /index.html;}# 前端代理(注意這里需要填寫 真實后端ip)location /api/ {//注意 http:ip:8090/ 和http:ip:8090的區別// http:ip:8090/會去掉/api這一層 // http:ip:8090 不會去掉/api這一層proxy_pass http://~~真實后端ip:8090~~ ;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Credentials: true;add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;proxy_http_version 1.1;# 連接延時proxy_connect_timeout 3600s;proxy_read_timeout 3600s;proxy_send_timeout 3600s;# IP 穿透proxy_set_header        Host $proxy_host;proxy_set_header        X-Real-IP $remote_addr;proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;# WebSocket 穿透proxy_set_header Origin "";proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}

網絡請求路徑

部署前端項目地址
remoteHost=“10.30.222.11”

// 服務的地址+8090 根據nginx配置對應轉發到真實的ip中

vue項目默認請求前綴
http://10.30.222.11:8090/api

構建部署

部署成功日志

訪問路徑

10.30.222.11:8090