1. 阿里聚石塔控制臺(tái)

登錄聚石塔賬號(hào)，進(jìn)入 控制臺(tái)>開發(fā)運(yùn)維>服務(wù)列表，在服務(wù)列表可以查看已創(chuàng)建部署的服務(wù)；聚石塔提供一整套完整的運(yùn)維部署解決方案，列表服務(wù)支持停止開啟服務(wù)，上傳部署，編譯部署，支持歷史版本部署，監(jiān)控，SSH等。

這里是前后端分離項(xiàng)目，Vue.js 前端項(xiàng)目 + SpringBoot 后端項(xiàng)目，后端項(xiàng)目Maven 管理打 WAR 包，前端項(xiàng)目 Yarn 管理。

2. 后端項(xiàng)目打包部署

2.1 mvn package 打 war 包

2.2 創(chuàng)建服務(wù) Tomcat

選擇鏡像-服務(wù)配置-環(huán)境變量-確認(rèn)創(chuàng)建

選擇鏡像

此處 SpringBoot 項(xiàng)目打 WAR 包部署在 Tomcat，根據(jù)實(shí)際項(xiàng)目選擇版本，此處選擇 Tomcat8.5.38

服務(wù)配置

自定義服務(wù)標(biāo)題名稱；

綁定已創(chuàng)建應(yīng)用及 appKey；

選擇容器規(guī)格，支持自定義規(guī)格；

選擇要部署在的云服務(wù)器，服務(wù)器實(shí)際部署容器數(shù)量設(shè)置為 1 個(gè)；

環(huán)境配置

網(wǎng)絡(luò)配置設(shè)置服務(wù)訪問(wèn)域名；這里僅配置了域名，后端項(xiàng)目提供域名，前端項(xiàng)目配置訪問(wèn)后端項(xiàng)目接口的域名為該域名后打包

確認(rèn)創(chuàng)建

勾選立即啟動(dòng)，創(chuàng)建服務(wù)完成

2.3 上傳部署

創(chuàng)建服務(wù)后，在服務(wù)列表可以找到該服務(wù)；當(dāng)服務(wù)較多時(shí)可以創(chuàng)建分組標(biāo)簽，對(duì)服務(wù)進(jìn)行編輯分組。

找到服務(wù)，選擇上傳部署；

選擇本地上傳部署，逐個(gè)容器部署，可以添加備注，點(diǎn)擊上傳程序包，增加文件，選擇打好的 war 包，等待上傳進(jìn)度為 100% 即可，容器會(huì)自動(dòng)重啟。

有時(shí)候點(diǎn)擊增加文件后，進(jìn)度條很長(zhǎng)時(shí)間不會(huì)變動(dòng)，文件添加到上傳隊(duì)列，隊(duì)列也沒(méi)權(quán)限查看，也不確定是不是阻塞，我也是看不懂，難頂。

一般的，項(xiàng)目 war 包沒(méi)問(wèn)題的話到此，后端項(xiàng)目部署完成。容器啟動(dòng)后運(yùn)行中服務(wù)有異常，應(yīng)該是war 包有問(wèn)題或者容器環(huán)境和 war 包要求環(huán)境不匹配。你可以在服務(wù)列表點(diǎn)擊容器管理，在操作項(xiàng)選擇 WebSSH 進(jìn)入 SSH 查看 /acs/log 下的日志排查問(wèn)題。

服務(wù)啟動(dòng)后，通過(guò)配置的服務(wù)域名可以訪問(wèn)后端項(xiàng)目的接口，接口訪問(wèn)能有響應(yīng)部署就完成了。

3. 前端項(xiàng)目打包部署

3.1 yarn build 打包

前端項(xiàng)目配置好正式環(huán)境后端項(xiàng)目的域名，通過(guò)build 命令打資源包

3.2 創(chuàng)建服務(wù) Nginx

選擇鏡像-服務(wù)配置-環(huán)境變量-確認(rèn)創(chuàng)建

選擇鏡像

選擇其他>Nginx 1.14.2

服務(wù)版本根據(jù)實(shí)際項(xiàng)目自主選擇。

服務(wù)配置

自定義服務(wù)標(biāo)題名稱；

綁定已創(chuàng)建應(yīng)用及 appKey；

選擇容器規(guī)格，支持自定義規(guī)格；

選擇要部署在的云服務(wù)器，服務(wù)器實(shí)際部署容器數(shù)量設(shè)置為 1 個(gè)；

環(huán)境變量

網(wǎng)絡(luò)配置支持選擇通信協(xié)議，自定義域名等

環(huán)境配置支持配置默認(rèn) nginx.conf 文件，因此處前端打包文件為dist文件夾，此處我配置資源根路徑地址為 /acs/dist

location / {

root /acs/code;

index index.html index.htm;

}

為

location / {

root /acs/dist;

index index.html index.htm;

}

其他無(wú)改動(dòng)。

確認(rèn)創(chuàng)建

確認(rèn)基礎(chǔ)信息后，可以勾選立即啟動(dòng)服務(wù)，點(diǎn)擊創(chuàng)建完成服務(wù)創(chuàng)建。

3.3 上傳資源包

前端項(xiàng)目為靜態(tài)文件資源，打包資源放到 nginx 服務(wù)映射對(duì)應(yīng)路徑下即可。

進(jìn)入 WebSSH ，將 /acs/upload 下的 dist.zip 移動(dòng)到/acs 解壓后，根據(jù) Nginx 服務(wù)配置地址 /acs/dist 無(wú)誤，重啟服務(wù)即可。

服務(wù)啟動(dòng)后訪問(wèn)配置的域名，能訪問(wèn)到 /acs/dist/index.html 資源，部署就完成了。

4. 訪問(wèn)項(xiàng)目

服務(wù)啟動(dòng)后訪問(wèn)前端項(xiàng)目(前端項(xiàng)目外網(wǎng)域名)即可。

Power By niaonao, The End, Thanks

總結(jié)

以上是生活随笔為你收集整理的前后端分离的项目部署到tomcat_阿里聚石塔部署前后端分离项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。