docker+vue+jenkins

前提：

1.jenkins中git已经安装完成

2.jenkins其它配置可查看其它链接

一、目录形式

 

 二、dockerfile

 

FROM node:12.13.0 as build-stage

ARG PROFILE

RUN mkdir -p /app

WORKDIR /app

COPY package*.json ./

#RUN npm install -g cnpm --registry=https://registry.npm.taobao.org

RUN npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

RUN npm install

COPY . .

RUN npm run build

# production stage

FROM nginx:stable-alpine as production-stage

ARG PROFILE

COPY nginx/nginx-${PROFILE}.conf /etc/nginx/nginx.conf

COPY --from=build-stage /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

 

三、nginx-prod.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       1899;

        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; #代理的读取资源超时时间（单位：毫秒）

        }

        location /api{

            proxy_set_header Host $host;

            proxy_set_header X-Real-IP $remote_addr;

            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_buffering off;

            rewrite ^/api/(.*)$ /$1 break;

            proxy_pass 你的后端地址;

        }

        # =========================================================

        # ================== ↑↑↑↑↑↑ 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;

        }

    }

}

四、jenkins流水线配置

 

 

 

#!/bin/bash -l
RE=prod; #开发环境(如dev,prod,test,stage)
PN=web;
docker rm -f $PN; #首次构建注释
docker rmi -f $PN:$RE; #首次构建注释
docker build --build-arg PROFILE=$RE -t $PN:$RE .;
docker run -d -e PROFILE=prod -p 1899:1899 --restart=always --name $PN $PN:$RE;