使用阿里CICD流水线打包Vue项目到阿里的docker镜像私仓，并自动部署到服务器启动服务

使用阿里CICD流水线打包Vue项目到阿里的docker镜像私仓，并自动部署到服务器启动服务

1、功能实现原理大家可以看我之前的两篇文章

SpringBoot+Vue前后端分离项目在Linux系统中基于Docker打包发布，并上传镜像到阿里镜像私仓
使用阿里CICD流水线打包Java项目到阿里的docker镜像私仓，并自动部署到服务器启动服务

2、打包vue项目和打包咱们的Java项目过程差不多相同，大家可以看着上面的Java打包过程进行实验，下面是vue打包过程中几个特别的地方

2.1、流水线模板使用Node.js

2.2、编辑Node.js构建

2.3、在添加的镜像构建并推送至阿里云镜像仓库个人版中进行编辑

2.4、在vue项目下和src同级创建Dockerfile文件和default.conf文件

Dockerfile

FROM nginx
COPY dist /usr/share/nginx/html
RUN rm -f /etc/nginx/conf.d/default.conf
#ADD default.conf /etc/nginx/conf.d/default.conf
COPY  default.conf /etc/nginx/conf.d/default.conf

default.conf

upstream wms-app {server 192.168.11.87:3999 ;
}
server {listen       80;server_name  localhost;#access_log  /var/log/nginx/host.access.log  main;location / {root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html; #解决单页面找不到路径问题 404}location /api {proxy_pass http://wms-app;  #可以配置多个下游服务，具有负载功能}#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;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {#    proxy_pass   http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#    root           html;#    fastcgi_pass   127.0.0.1:9000;#    fastcgi_index  index.php;#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;#    include        fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#    deny  all;#}
}

3、然后就保存运行即可

4、部署过程可以看下面这篇文章

阿里CICD流水线Docker部署，将阿里镜像私仓中的镜像部署到服务器中