云開(kāi)發(fā) 部署 Angular 項(xiàng)目

云開(kāi)發(fā)靜態(tài)托管是云開(kāi)發(fā)提供的靜態(tài)網(wǎng)站托管的能力，靜態(tài)資源（HTML、CSS、JavaScript、字體等）的分發(fā)由騰訊云對(duì)象存儲(chǔ) COS 和擁有多個(gè)邊緣網(wǎng)點(diǎn)的騰訊云 CDN 提供支持

在云開(kāi)發(fā)靜態(tài)托管中，你同樣可以托管一個(gè) Angular 項(xiàng)目，接下來(lái)，我就介紹一下應(yīng)該如何將一個(gè) Angular 項(xiàng)目部署到云開(kāi)發(fā)靜態(tài)網(wǎng)站托管服務(wù)中。

初始化一個(gè) Angular 項(xiàng)目

首先，我們使用 Angular cli 創(chuàng)建一個(gè)項(xiàng)目，來(lái)作為演示。

ng new cloudbase
cd cloudbase

執(zhí)行完成后，可以執(zhí)行 npm run start 啟動(dòng)預(yù)覽，查看一下效果

看完效果以后，可以執(zhí)行 npm run build 來(lái)構(gòu)建出最終的產(chǎn)出物

在構(gòu)建完成后,我們可以在 dist/cloudbase 中看到我們的項(xiàng)目構(gòu)建產(chǎn)物。

創(chuàng)建云開(kāi)發(fā)環(huán)境

完成了 Angular 項(xiàng)目的創(chuàng)建后，接下來(lái)創(chuàng)建云開(kāi)發(fā)的環(huán)境,訪問(wèn)云開(kāi)發(fā)控制臺(tái),點(diǎn)擊上方的新建環(huán)境，創(chuàng)建一個(gè)新的環(huán)境。在彈出的界面中輸入你的環(huán)境名稱，并選擇按量計(jì)費(fèi)，點(diǎn)擊下方的立即開(kāi)通，就可以開(kāi)通一個(gè)云開(kāi)發(fā)環(huán)境了。

等待環(huán)境初始化完成后，點(diǎn)擊剛剛創(chuàng)建好的環(huán)境，進(jìn)入到詳情頁(yè)，點(diǎn)擊左側(cè)的環(huán)境設(shè)置，可以看到環(huán)境的 ID， 記住這里的環(huán)境 ID，后續(xù)上傳文件的時(shí)候會(huì)用到。

再次選擇左側(cè)列表的「靜態(tài)網(wǎng)站托管」

在靜態(tài)網(wǎng)站托管頁(yè)面選擇立即開(kāi)通。

等待靜態(tài)網(wǎng)站托管服務(wù)開(kāi)通后，你就可以看到這樣的界面。點(diǎn)擊上方的「設(shè)置」，可以看到你的測(cè)試域名，后續(xù)上傳后，你就可以在這個(gè)測(cè)試域名中查看你的站點(diǎn)。

初始化云開(kāi)發(fā) Cli

完成了環(huán)境的創(chuàng)建后，接下來(lái)配置云開(kāi)發(fā) Cli。

安裝云開(kāi)發(fā) Cli 并登陸

首先，我們執(zhí)行命令安裝云開(kāi)發(fā) Cli

npm i -g @cloudbase/cli

安裝完成后， 執(zhí)行命令登陸 Cli

tcb login

系統(tǒng)會(huì)自動(dòng)打開(kāi)瀏覽器，你只需要在彈出的頁(yè)面中登陸你的騰訊云賬號(hào)，并授予 Cli 權(quán)限就可以操作了。

上傳文件

完成了 Cli 的登陸后，接下來(lái)就可以上傳文件了。首先，進(jìn)入到 Angular 項(xiàng)目的 dist 目錄: cd dist/cloudbase，然后，執(zhí)行命令來(lái)上傳文件

tcb hosting:deploy -e envId

這里你需要將 envId 替換為你自己的環(huán)境 ID，比如我的替換為 website-126ca8，結(jié)果如下

可以看到，我成功的上傳了文件，這個(gè)時(shí)候，我可以直接訪問(wèn)我的測(cè)試域名來(lái)查看我剛剛上傳的 Angular 項(xiàng)目。

當(dāng)你看到這樣的界面時(shí)，就說(shuō)明你配置成功了。

總結(jié)

云開(kāi)發(fā)的靜態(tài)托管中想要上傳 Angular 項(xiàng)目也十分簡(jiǎn)單，你只需要初始化一個(gè) Angular 項(xiàng)目，并使用云開(kāi)發(fā)的 CLi 工具就可以完成文件的上傳。