网络规划设计师知识点,广州王牌seo,做博客网站用什么模板,wordpress添加网页背景图片大小前言
本篇主要介绍如何自动化部署前端vue项目
其中#xff0c;有两种方案#xff1a;
第一种是利用nginx进行静态资源转发#xff1b;第二种方案是利用nodejs进行启动访问#xff1b;
各个组件版本如下#xff1a;
Docker 最新版本#xff1b;Jenkins 2.387.3nginx …前言
本篇主要介绍如何自动化部署前端vue项目
其中有两种方案
第一种是利用nginx进行静态资源转发第二种方案是利用nodejs进行启动访问
各个组件版本如下
Docker 最新版本Jenkins 2.387.3nginx 最新版本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 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 buildFROM nginx:latest AS prod-stage
COPY --frombuild-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD [nginx, -g, daemon off;] JENKINSFILE
pipeline {agent anyenvironment {NAME bst-webPROFILE devAPP xxxx/bst-web:devAPP_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 ACTOVEdev -t $APP .}}stage(运行容器) {steps {echo ****************************** run start... ******************************sh docker run -d -p $APP_PORT:80 --restartalways --name $NAME $APP}}}
}nodeJs部署
Dockerfile
FROM node:12.13.0
WORKDIR /app
COPY . .
RUN npm install
RUN npm run buildEXPOSE 8080
CMD [ npm, run, serve ]Jenkinsfile
pipeline {agent anyenvironment {NAME bst-webPROFILE devAPP xxxx/bst-web:devAPP_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 ACTOVEdev -t $APP .}}stage(运行容器) {steps {echo ****************************** run start... ******************************sh docker run -d -p $APP_PORT:80 --restartalways --name $NAME $APP}}}
}vue.config.js
module.exports {devServer: {// 跳过host检查historyApiFallback: true,}
}具体版本不一样或者添加
module.exports {// 跳过检查hostdevServer: { disableHostCheck: true }
}如果不添加此处内容的话访问会报错 Invalid Host header
