前言

本篇主要介绍如何自动化部署前端vue项目

其中，有两种方案：

1. 第一种是利用nginx进行静态资源转发；
2. 第二种方案是利用nodejs进行启动访问；

各个组件版本如下：

1. Docker 最新版本；
2. Jenkins 2.387.3
3. nginx 最新版本
4. nodejs 12.13.0

nginx转发部署

目录结构如下：

nginx.conf

user nginx;worker_processes 1;error_log /var/log/nginx/error.log warn;pid /var/run/nginx.pid;events { worker_connections 1024;}http { include /etc/nginx/mime.types; default_type application/octet-stream; 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; keepalive_timeout 65; #gzip on; # include /etc/nginx/conf.d/*.conf; server { listen 80; server_name localhost; # 服务器地址或绑定域名 #charset koi8-r; #access_log /var/log/nginx/host.access.log main; # ========================================================= # ================== ↓↓↓↓↓↓ start ↓↓↓↓↓↓ ================== # ========================================================= location / { root /usr/share/nginx/html; #try_files $uri $uri/ @router; index index.html index.htm; try_files $uri $uri/ /index.html; # 解决页面刷新 404 问题 #proxy_pass http://zhengqingya.gitee.io; # 代理的ip地址和端口号 #proxy_connect_timeout 600; #代理的连接超时时间（单位：毫秒） #proxy_read_timeout 600; #代理的读取资源超时时间（单位：毫秒） } # ========================================================= # ================== ↑↑↑↑↑↑ end ↑↑↑↑↑↑ ================== # ========================================================= #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; } }}

Dockerfile

FROM nginx:latest# docker 传参数据ARG ACTIVE# 将dist文件中的内容复制到 `/usr/share/nginx/html/` 这个目录下面ADD /dist /usr/share/nginx/html# 用本地配置文件来替换nginx镜像里的默认配置ADD nginx/nginx-${ACTIVE}.conf /etc/nginx/nginx.confEXPOSE 80CMD ["nginx", "-g", "daemon off;"] 

如果不想在jenkinsfile中运行npm相关命令，而在dockerfile中运行，Dockerfile如下：

FROM node:12.13.0 as build-stageWORKDIR /appCOPY . .RUN npm installRUN npm run buildFROM nginx:latest AS prod-stageCOPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] 

JENKINSFILE

pipeline { agent any environment { NAME = 'bst-web' PROFILE = 'dev' APP = 'xxxx/bst-web:dev' APP_PORT = 80 } stages { stage('下载代码') { steps { echo '****************************** download code start... ******************************' git branch: 'dev', credentialsId: 'xxxxxxxxxxxxxxxxx', url: 'xxxxxx.git' } } stage('vue环境准备') { steps { echo '****************************** vue start... ******************************' sh "npm install && npm run build" } } stage('构建Docker镜像') { steps { echo '****************************** delete container and image... ******************************' sh 'docker ps -a|grep $NAME|awk \'{print $1}\'|xargs -i docker stop {}|xargs -i docker rm {}' sh 'docker images|grep $NAME|grep dev|awk \'{print $3}\'|xargs -i docker rmi {}' echo '****************************** build image... ******************************' sh 'docker build --build-arg ACTOVE=dev -t $APP .' } } stage('运行容器') { steps { echo '****************************** run start... ******************************' sh 'docker run -d -p $APP_PORT:80 --restart=always --name $NAME $APP' } } }}

nodeJs部署

Dockerfile

FROM node:12.13.0WORKDIR /appCOPY . .RUN npm installRUN npm run buildEXPOSE 8080 CMD [ "npm", "run", "serve" ]

Jenkinsfile

pipeline { agent any environment { NAME = 'bst-web' PROFILE = 'dev' APP = 'xxxx/bst-web:dev' APP_PORT = 80 } stages { stage('下载代码') { steps { echo '****************************** download code start... ******************************' git branch: 'dev', credentialsId: 'xxxxxxxxxxxxxxxxx', url: 'xxxxxx.git' } } stage('构建Docker镜像') { steps { echo '****************************** delete container and image... ******************************' sh 'docker ps -a|grep $NAME|awk \'{print $1}\'|xargs -i docker stop {}|xargs -i docker rm {}' sh 'docker images|grep $NAME|grep dev|awk \'{print $3}\'|xargs -i docker rmi {}' echo '****************************** build image... ******************************' sh 'docker build --build-arg ACTOVE=dev -t $APP .' } } stage('运行容器') { steps { echo '****************************** run start... ******************************' sh 'docker run -d -p $APP_PORT:80 --restart=always --name $NAME $APP' } } }}

vue.config.js

module.exports = {	devServer: {		// 跳过host检查 	 	historyApiFallback: true,	}}

具体版本不一样，或者添加

module.exports = { // 跳过检查host devServer: { disableHostCheck: true }}

如果不添加此处内容的话，访问会报错 Invalid Host header