使用阿里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

java 复制代码
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

java 复制代码
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部署,将阿里镜像私仓中的镜像部署到服务器中

相关推荐
jz_ddk15 小时前
[LVGL] 从0开始,学LVGL:基础构建篇 - 掌握UI的核心构建块
linux·网络协议·ui·rpc·嵌入式·gui·lvgl
小六路15 小时前
可以横跨时间轴,分类显示的事件
前端·javascript·vue.js
Nayana15 小时前
Element-Plus源码分析-select组件
vue.js
ding_zhikai16 小时前
SD:在一个 Ubuntu 系统安装 stable diffusion ComfyUI
linux·ubuntu·stable diffusion
似水এ᭄往昔16 小时前
【Linux】——基础指令(下)
linux·服务器
大锦终16 小时前
【Linux】udp网络程序
linux·运维·服务器·网络
洛小豆16 小时前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
罗政16 小时前
【免费】轻量级服务器centos监控程序+内存+cpu+nginx+适合小型站长使用
服务器·nginx·centos
麦麦大数据16 小时前
F024 CNN+vue+flask电影推荐系统vue+python+mysql+CNN实现
vue.js·python·cnn·flask·推荐算法
CryptoRzz17 小时前
欧美(美股、加拿大股票、墨西哥股票)股票数据接口文档
java·服务器·开发语言·数据库·区块链