Angular CLI 在 8.3.0 發(fā)布過一個新命令 ng deploy，可以將 Angular 應(yīng)用部署到遠程服務(wù)器或云存儲上面，例如：Firebase hosting、Azure、GitHub pages 等等，這也是算是 Angular CLI 最后一個將 Angular 應(yīng)用從開發(fā)到部署打通全能選手工具了。

快速入門

這里我以ng-deploy-oss 為示例，演示如何將 Angular 應(yīng)用部署到七牛云。

1、創(chuàng)建一個新項目

ng new hello-world --defaults

2、添加 ng-deploy-oss

ng add ng-deploy-oss

命令行會讓你輸入幾個參數(shù)：

? 請選擇云類型？ 七牛云
? 請輸入 AccessKey： test
? 請輸入 SecretKey： test
? 所在機房支持： qiniu.zone.Zone_z0 - 華東
? 請輸入 Bucket： ng-test
? 請輸入路徑前綴，如果不指定表示放在根目錄下： 
? 請輸入構(gòu)建生產(chǎn)環(huán)境的 NPM 命令行（例如：npm run build），若為空表示自動根據(jù) angular.json 構(gòu)建生成環(huán)境 
UPDATE angular.json (3925 bytes)
UPDATE package.json (1511 bytes)

3、部署

ng deploy

最后直接打開瀏覽器，就能直接訪問 ng build --prod 后的效果。

原理

事實上，ng deploy 如同其他 Angular schematics 指令 ng add、ng g 等類同，我曾經(jīng)在 淺談 Angular Cli Schematics 針對 Schematics 做過介紹。要自定義一個 ng deploy 只需要完成兩個部分：

• 編寫 ng-add 來修改 angular.json 來告知使用哪個 Angular Libary 來部署；
• 編寫上傳動作 createBuilder。

ng-add

給 angular.json 增加 deploy 節(jié)點：

{
  "serve": {},
+  "deploy": {
+    "builder": "ng-deploy-oss:deploy",
+    "options": {}
+  }
}

以及 package.json 的 devDependencies 增加依賴包：

+ "ng-deploy-oss": "~1.0.0",

有興趣可以參考 ng-deploy-oss 的 ng-add 的完整寫法。

createBuilder

它是一個固定的方法：

export default createBuilder<any>(async (schema: {}, context: BuilderContext): Promise<BuilderOutput> => {
  return { success: true };
});

將所有上傳相關(guān)的動作寫至該方法內(nèi)；它返回的是一個 Promise<BuilderOutput> ，要告知 ng deploy 結(jié)束務(wù)必返回：return { success: true };。

如何部署至不同目標(biāo)上

目前 ng deploy 只支持單個目標(biāo)部署，有時多個遠程部署也是剛需，比如像當(dāng)你在做一個開源時總需要照顧國內(nèi)、國外時，總是希望一份 gh-pages 和 七牛云（免費額度），我們只需要修改 angular.json：

{
  "serve": {},
+  "deploy-qiniu": {
+    "builder": "ng-deploy-oss:deploy",
+    "options": {}
+  },
+  "deploy-gh-pages": {
+    "builder": "angular-cli-ghpages:deploy",
+    "options": {}
+  }
}

注意：angular-cli-ghpages:deploy 引用的是 angular-cli-ghpages 依賴包。

然后使用 ng run 來調(diào)用這兩種不同目標(biāo)：

ng run <project name>:deploy-qiniu
ng run <project name>:deploy-gh-pages

結(jié)論

Angular 在國內(nèi)有些小窘境，ng deploy 發(fā)布這么久，一直都沒見到對國內(nèi)一些云存儲進行適配；事實上，直接利用 ng deploy 來部署應(yīng)用至遠程服務(wù)器上，可能在越來越多 Docker 應(yīng)用后變得沒那么重要，但對于常寫開源的人來說，能夠快速將 Angular 應(yīng)用部署至國內(nèi)常見的幾個云存儲上還是挺有意義的。

到此這篇關(guān)于小談angular ng deploy的實現(xiàn)的文章就介紹到這了,更多相關(guān)angular ng deploy內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論