小談 ng deploy 的實現

Angular CLI 在 8.3.0 發佈過一個新命令 ng deploy，能夠將 Angular 應用部署到遠程服務器或雲存儲上面，例如：Firebase hosting、Azure、GitHub pages 等等，這也是算是 Angular CLI 最後一個將 Angular 應用從開發到部署打通全能選手工具了。

快速入門

這裏我以 ng-deploy-oss 爲示例，演示如何將 Angular 應用部署到七牛雲。

一、建立一個新項目

ng new hello-world --defaults

二、添加 ng-deploy-oss

ng add ng-deploy-oss

命令行會讓你輸入幾個參數：

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

三、部署

ng deploy

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

原理

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

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

ng-add

給 angular.json 增長 deploy 節點：

{
    "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 };
});

將全部上傳相關的動做寫至該方法內；它返回的是一個 Promise<BuilderOutput>，要告知 ng deploy 結束務必返回：return { success: true };。

如何部署至不一樣目標上

目前 ng deploy 只支持單個目標部署，有時多個遠程部署也是剛需，好比像當你在作一個開源時總須要照顧國內、國外時，老是但願一份 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 來調用這兩種不一樣目標：

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

結論

Angular 在國內有些小窘境，ng deploy 發佈這麼久，一直都沒見到對國內一些雲存儲進行適配；事實上，直接利用 ng deploy 來部署應用至遠程服務器上，可能在愈來愈多 Docker 應用後變得沒那麼重要，但對於常寫開源的人來講，可以快速將 Angular 應用部署至國內常見的幾個雲存儲上仍是挺有意義的。

（完）