前言

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

其中，有两种方案：

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

各个组件版本如下：

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

nginx转发部署

目录结构如下：

nginx.conf

usernginx;worker_processes1;error_log/var/log/nginx/error.log warn;pid/var/run/nginx.pid;events {worker_connections1024;}http {include /etc/nginx/mime.types;default_typeapplication/octet-stream;log_formatmain'$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.logmain;sendfileon;#tcp_nopush on;keepalive_timeout65;#gzipon;# include /etc/nginx/conf.d/*.conf;server {listen 80;server_namelocalhost; # 服务器地址或绑定域名#charset koi8-r;#access_log/var/log/nginx/host.access.logmain;# =========================================================# ================== ↓↓↓↓↓↓ start ↓↓↓↓↓↓ ==================# =========================================================location / {root /usr/share/nginx/html;#try_files $uri $uri/ @router;indexindex.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_page404/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/htmlEXPOSE 80CMD ["nginx", "-g", "daemon off;"]

JENKINSFILE

pipeline {agent anyenvironment {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 8080CMD [ "npm", "run", "serve" ]

Jenkinsfile

pipeline {agent anyenvironment {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 = {// 跳过检查hostdevServer: { disableHostCheck: true }}

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