云開發(fā) 部署 Angular 項目

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

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

初始化一個 Angular 項目

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

ng new cloudbase
cd cloudbase

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

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

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

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

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

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

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

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

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

初始化云開發(fā) Cli

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

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

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

npm i -g @cloudbase/cli

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

tcb login

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

上傳文件

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

tcb hosting:deploy -e envId

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

可以看到，我成功的上傳了文件，這個時候，我可以直接訪問我的測試域名來查看我剛剛上傳的 Angular 項目。

當你看到這樣的界面時，就說明你配置成功了。

總結(jié)

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