雲開發靜态網站托管現已支援 Angular 應用

Angular也可以部署了

雲開發靜态托管是雲開發提供的靜态網站托管的能力，靜态資源（HTML、CSS、JavaScript、字型等）的分發由騰訊雲對象存儲 COS 和擁有多個邊緣網點的騰訊雲 CDN 提供支援。

在雲開發靜态托管中，你同樣可以托管一個 Angular 項目，接下來，我就介紹一下應該如何将一個 Angular 項目部署到雲開發靜态網站托管服務中。

初始化一個 Angular 項目

首先，我們使用 Angular cli 建立一個項目，來作為示範。

ng new cloudbase
cd cloudbase
           

執行完成後，可以執行 npm run start 啟動預覽，檢視一下效果：

看完效果以後，可以執行 npm run build 來建構出最終的産出物：

在建構完成後,我們可以在 dist/cloudbase 中看到我們的項目建構産物。

建立雲開發環境

完成了 Angular 項目的建立後，接下來建立雲開發的環境,通路雲開發控制台,點選上方的建立環境，建立一個新的環境。在彈出的界面中輸入你的環境名稱，并選擇按量計費，點選下方的立即開通，就可以開通一個雲開發環境了。

等待環境初始化完成後，點選剛剛建立好的環境，進入到詳情頁，點選左側的環境設定，可以看到環境的 ID， 記住這裡的環境 ID，後續上傳檔案的時候會用到。

再次選擇左側清單的「靜态網站托管」：

在靜态網站托管頁面選擇立即開通。

等待靜态網站托管服務開通後，你就可以看到這樣的界面。點選上方的「設定」，可以看到你的測試域名，後續上傳後，你就可以在這個測試域名中檢視你的站點。

初始化雲開發 Cli

完成了環境的建立後，接下來配置雲開發 Cli。

安裝雲開發 Cli 并登陸

首先，我們執行指令安裝雲開發 Cli：

npm i -g @cloudbase/cli
           

安裝完成後， 執行指令登陸 Cli：

tcb login
           

系統會自動打開浏覽器，你隻需要在彈出的頁面中登陸你的騰訊雲賬号，并授予 Cli 權限就可以操作了。

上傳檔案

完成了 Cli 的登陸後，接下來就可以上傳檔案了。首先，進入到 Angular 項目的 dist 目錄:

cd dist/cloudbase
           

，然後，執行指令來上傳檔案：

tcb hosting:deploy -e envId
           

這裡你需要将 envId 替換為你自己的環境 ID，比如我的替換為 website-126ca8，結果如下：

可以看到，我成功的上傳了檔案，這個時候，我可以直接通路我的測試域名來檢視我剛剛上傳的 Angular 項目。

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

總結

雲開發的靜态托管中想要上傳 Angular 項目也十分簡單，你隻需要初始化一個 Angular 項目，并使用雲開發的 CLi 工具就可以完成檔案的上傳。

One More Thing

9.9元包年靜态網站托管服務贊助計劃，隻要是技術站點即可參與，點選下方連結，立即申請！

申請連結：https://cloud.tencent.com/product/wh?from=12331

公衆号：騰訊雲雲開發

騰訊雲雲開發：https://cloudbase.net

雲開發控制台：https://console.cloud.tencent.com/tcb?from=12304

☁

更多精彩

掃描二維碼了解更多