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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值