雲開發靜態網站託管現已支持 Angular 應用

雲開發靜態託管是雲開發提供的靜態網站託管的能力,靜態資源(HTML、CSS、JavaScript、字體等)的分發由騰訊雲對象存儲 COS 和擁有多個邊緣網點的騰訊雲 CDN 提供支持。

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

初始化一個 Angular 項目

首先,我們使用 Angular cli 創建一個項目,來作爲演示。

ng new cloudbase
cd cloudbase

image-20200424184233870

執行完成後,可以執行 npm run start 啓動預覽,查看一下效果:

image-20200424184251681

看完效果以後,可以執行 npm run build 來構建出最終的產出物:

image-20200424184307504

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

image-20200424184329873

創建雲開發環境

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

image-20200424184341980

等待環境初始化完成後,點擊剛剛創建好的環境,進入到詳情頁,點擊左側的環境設置,可以看到環境的 ID, 記住這裏的環境 ID,後續上傳文件的時候會用到。

image-20200424184359668

再次選擇左側列表的「靜態網站託管」:

image-20200424184411281

在靜態網站託管頁面選擇立即開通。

image-20200424184425581

等待靜態網站託管服務開通後,你就可以看到這樣的界面。點擊上方的「設置」,可以看到你的測試域名,後續上傳後,你就可以在這個測試域名中查看你的站點。

image-20200424184436842

初始化雲開發 Cli

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

安裝雲開發 Cli 並登陸

首先,我們執行命令安裝雲開發 Cli:

npm i -g @cloudbase/cli

image-20200424184448280

安裝完成後, 執行命令登陸 Cli:

tcb login

系統會自動打開瀏覽器,你只需要在彈出的頁面中登陸你的騰訊雲賬號,並授予 Cli 權限就可以操作了。

上傳文件

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

cd dist/cloudbase

,然後,執行命令來上傳文件:

tcb hosting:deploy -e envId

這裏你需要將 envId 替換爲你自己的環境 ID,比如我的替換爲 website-126ca8,結果如下:

image-20200424184504839

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

image-20200424184513121

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

總結

雲開發的靜態託管中想要上傳 Angular 項目也十分簡單,你只需要初始化一個 Angular 項目,並使用雲開發的 CLi 工具就可以完成文件的上傳。

One More Thing

9.9元包年靜態網站託管服務贊助計劃,只要是技術站點即可參與,點擊下方鏈接,立即申請!

申請鏈接:https://cloud.tencent.com/product/wh?from=12331

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章