前言
本篇主要介绍如何自动化部署前端vue项目
其中，有两种方案：
- 第一种是利用nginx进行静态资源转发；
- 第二种方案是利用nodejs进行启动访问；
各个组件版本如下：
- Docker 最新版本；
- Jenkins 2.387.3
- nginx 最新版本
- 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.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
如果不想在jenkinsfile中运行npm相关命令，而在dockerfile中运行，Dockerfile如下：
FROM node:12.13.0 as build-stage
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
FROM nginx:latest AS prod-stage
COPY --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.0
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 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
