小談angular ng deploy的實(shí)現(xiàn)
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)用從開發(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
最后直接打開瀏覽器,就能直接訪問(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è)開源時(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ā)布這么久,一直都沒見到對(duì)國(guó)內(nèi)一些云存儲(chǔ)進(jìn)行適配;事實(shí)上,直接利用 ng deploy 來(lái)部署應(yīng)用至遠(yuǎn)程服務(wù)器上,可能在越來(lái)越多 Docker 應(yīng)用后變得沒那么重要,但對(duì)于常寫開源的人來(lái)說(shuō),能夠快速將 Angular 應(yīng)用部署至國(guó)內(nèi)常見的幾個(gè)云存儲(chǔ)上還是挺有意義的。
到此這篇關(guān)于小談angular ng deploy的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)angular ng deploy內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Angular ng-repeat 對(duì)象和數(shù)組遍歷實(shí)例
- ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子
- AngularJS學(xué)習(xí)筆記之ng-options指令
- angularjs自定義ng-model標(biāo)簽的屬性
- angular之ng-template模板加載
- AngularJS 文件上傳控件 ng-file-upload詳解
- AngularJS基礎(chǔ) ng-if 指令用法
- 詳解AngularJS中ng-src指令的使用
- Angular2中Bootstrap界面庫(kù)ng-bootstrap詳解
- angular指令筆記ng-options的使用方法
- Angular.js中ng-if、ng-show和ng-hide的區(qū)別介紹
- AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解
- AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
相關(guān)文章

Angular2學(xué)習(xí)教程之TemplateRef和ViewContainerRef詳解

Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹

Angular.js中angular-ui-router的簡(jiǎn)單實(shí)踐

AngularJS directive返回對(duì)象屬性詳解

angularjs獲取到My97DatePicker選中的值方法

Angular 通過(guò)注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例