阿里聚石塔部署前后端分离项目

1. 阿里聚石塔控制台

    登录聚石塔账号,进入 控制台>开发运维>服务列表,在服务列表可以查看已创建部署的服务;聚石塔提供一整套完整的运维部署解决方案,列表服务支持停止开启服务,上传部署,编译部署,支持历史版本部署,监控,SSH等。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
    这里是前后端分离项目,Vue.js 前端项目 + SpringBoot 后端项目,后端项目Maven 管理打 WAR 包,前端项目 Yarn 管理。

2. 后端项目打包部署

2.1 mvn package 打 war 包

在这里插入图片描述

2.2 创建服务 Tomcat

选择镜像-服务配置-环境变量-确认创建

  • 选择镜像

    此处 SpringBoot 项目打 WAR 包部署在 Tomcat,根据实际项目选择版本,此处选择 Tomcat8.5.38
在这里插入图片描述

  • 服务配置

    自定义服务标题名称;
    绑定已创建应用及 appKey;
    选择容器规格,支持自定义规格;
    选择要部署在的云服务器,服务器实际部署容器数量设置为 1 个;
在这里插入图片描述
在这里插入图片描述

  • 环境配置

    网络配置设置服务访问域名;这里仅配置了域名,后端项目提供域名,前端项目配置访问后端项目接口的域名为该域名后打包

  • 确认创建

    勾选立即启动,创建服务完成
在这里插入图片描述

2.3 上传部署

    创建服务后,在服务列表可以找到该服务;当服务较多时可以创建分组标签,对服务进行编辑分组。
    找到服务,选择上传部署;
    选择本地上传部署,逐个容器部署,可以添加备注,点击上传程序包,增加文件,选择打好的 war 包,等待上传进度为 100% 即可,容器会自动重启。
    有时候点击增加文件后,进度条很长时间不会变动,文件添加到上传队列,队列也没权限查看,也不确定是不是阻塞,我也是看不懂,难顶。
在这里插入图片描述
在这里插入图片描述
    一般的,项目 war 包没问题的话到此,后端项目部署完成。容器启动后运行中服务有异常,应该是war 包有问题或者容器环境和 war 包要求环境不匹配。你可以在服务列表点击容器管理,在操作项选择 WebSSH 进入 SSH 查看 /acs/log 下的日志排查问题。
在这里插入图片描述
在这里插入图片描述
    服务启动后,通过配置的服务域名可以访问后端项目的接口,接口访问能有响应部署就完成了。

3. 前端项目打包部署

3.1 yarn build 打包

    前端项目配置好正式环境后端项目的域名,通过build 命令打资源包
在这里插入图片描述

3.2 创建服务 Nginx

选择镜像-服务配置-环境变量-确认创建

  • 选择镜像

    选择其他>Nginx 1.14.2
    服务版本根据实际项目自主选择。
在这里插入图片描述

  • 服务配置

    自定义服务标题名称;
    绑定已创建应用及 appKey;
    选择容器规格,支持自定义规格;
    选择要部署在的云服务器,服务器实际部署容器数量设置为 1 个;

  • 环境变量

    网络配置支持选择通信协议,自定义域名等
    环境配置支持配置默认 nginx.conf 文件,因此处前端打包文件为dist文件夹,此处我配置资源根路径地址为 /acs/dist

        location / {
            root   /acs/code;
            index  index.html index.htm;
        }

        location / {
            root   /acs/dist;
            index  index.html index.htm;
        }

    其他无改动。
在这里插入图片描述

  • 确认创建

    确认基础信息后,可以勾选立即启动服务,点击创建完成服务创建。

3.3 上传资源包

    前端项目为静态文件资源,打包资源放到 nginx 服务映射对应路径下即可。
    进入 WebSSH ,将 /acs/upload 下的 dist.zip 移动到/acs 解压后,根据 Nginx 服务配置地址 /acs/dist 无误,重启服务即可。
在这里插入图片描述
在这里插入图片描述
    服务启动后访问配置的域名,能访问到 /acs/dist/index.html 资源,部署就完成了。

4. 访问项目

    服务启动后访问前端项目(前端项目外网域名)即可。

Power By niaonao, The End, Thanks

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页