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

快速入門

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

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

ng new hello-world --defaults

2、添加 ng-deploy-oss

ng add ng-deploy-oss

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

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

3、部署

ng deploy

最后直接打開(kāi)瀏覽器，就能直接訪問(wèn) ng build --prod 后的效果。

原理

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

• 編寫 ng-add 來(lái)修改 angular.json 來(lái)告知使用哪個(gè) Angular Libary 來(lái)部署；
• 編寫上傳動(dòng)作 createBuilder。

ng-add

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

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

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

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

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

createBuilder

它是一個(gè)固定的方法：

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

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

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

目前 ng deploy 只支持單個(gè)目標(biāo)部署，有時(shí)多個(gè)遠(yuǎn)程部署也是剛需，比如像當(dāng)你在做一個(gè)開(kāi)源時(shí)總需要照顧國(guó)內(nèi)、國(guó)外時(shí)，總是希望一份 gh-pages 和 七牛云（免費(fèi)額度），我們只需要修改 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 來(lái)調(diào)用這兩種不同目標(biāo)：

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

結(jié)論

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

（完）