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

文章目录

• 使用阿里CICD流水线打包Vue项目到阿里的docker镜像私仓，并自动部署到服务器启动服务
• 1、功能实现原理大家可以看我之前的两篇文章
• 2、打包vue项目和打包咱们的Java项目过程差不多相同，大家可以看着上面的Java打包过程进行实验，下面是vue打包过程中几个特别的地方
• 2.1、流水线模板使用Node.js
• • 2.2、编辑Node.js构建
  • 2.3、在添加的镜像构建并推送至阿里云镜像仓库个人版中进行编辑
  • 2.4、在vue项目下和src同级创建Dockerfile文件和default.conf文件
• 3、然后就保存运行即可
• 4、部署过程可以看下面这篇文章

使用阿里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部署，将阿里镜像私仓中的镜像部署到服务器中