雲開發靜態託管是雲開發提供的靜態網站託管的能力,靜態資源(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