docker+jenkins+nginx+vue 部署

新建一个项目

cd /var/lib/jenkins/workspace/TutorWeb


npm install --unsafe-perm=true
# 下载 vue-cli
npm install -g @vue/cli --unsafe-perm=true
# 构建项目，生成dist目录
#npm run build --unsafe-perm=true

#npm run dev --unsafe-perm=true
npm run build:dev --unsafe-perm=true
#npm run build --unsafe-perm=true
# 清除缓存并构建镜像
docker build -f Docker/Dockerfile -t tutorweb:${BUILD_VERSION} --no-cache . 

#删除旧容器
docker rm -f `docker ps -aq --filter name=tutorweb`
# 启动容器
docker run -p 2002:80 -d --name tutorweb tutorweb:${BUILD_VERSION} 

vue 项目 dockerfile

# production stage
FROM nginx:stable-alpine as production-stage
COPY dist /usr/share/nginx/html
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

vue 项目 default.conf

    #配置HTTP服务器监听的端口号，这里默认写为80
    listen    80;

    server_name localhost;

	location / {
		root   /usr/share/nginx/html;
		try_files $uri $uri/ @router;   
		index  index.html index.htm;

	}
	location @router {       
			rewrite ^.*$ /index.html last;    
	}
    location /api {
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
		add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        add_header 'X-Powered-By' 'ASP.NET';
		if ($request_method = 'OPTIONS') {
			add_header 'Access-Control-Max-Age' 1728000;
			add_header 'Content-Type' 'text/plain; charset=utf-8';
			add_header 'Content-Length' 0;
			return 204;
		}
		root   html;
		index  index.html index.htm;
		proxy_pass http://192.168.74.92:7108/api;
	}
}

注意事项：
**vue项目中的调用的地址应该是nginx 服务器地址，nginx 会转发至api 地址**阿里云安全组&防火墙开放端口