小谈angular ng deploy的实现
AngularCLI在8.3.0发布过一个新命令ngdeploy，可以将Angular应用部署到远程服务器或云存储上面，例如：Firebasehosting、Azure、GitHubpages等等，这也是算是AngularCLI最后一个将Angular应用从开发到部署打通全能选手工具了。
快速入门
这里我以ng-deploy-oss为示例，演示如何将Angular应用部署到七牛云。
1、创建一个新项目
ngnewhello-world--defaults
2、添加ng-deploy-oss
ngaddng-deploy-oss
命令行会让你输入几个参数：
?请选择云类型？七牛云 ?请输入AccessKey：test ?请输入SecretKey：test ?所在机房支持：qiniu.zone.Zone_z0-华东 ?请输入Bucket：ng-test ?请输入路径前缀，如果不指定表示放在根目录下： ?请输入构建生产环境的NPM命令行（例如：npmrunbuild），若为空表示自动根据angular.json构建生成环境 UPDATEangular.json(3925bytes) UPDATEpackage.json(1511bytes)
3、部署
ngdeploy
最后直接打开浏览器，就能直接访问ngbuild--prod后的效果。
原理
事实上，ngdeploy如同其他Angularschematics指令ngadd、ngg等类同，我曾经在浅谈AngularCliSchematics针对Schematics做过介绍。要自定义一个ngdeploy只需要完成两个部分：
- 编写ng-add来修改angular.json来告知使用哪个AngularLibary来部署；
- 编写上传动作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
它是一个固定的方法：
exportdefaultcreateBuilder(async(schema:{},context:BuilderContext):Promise =>{ return{success:true}; });
将所有上传相关的动作写至该方法内；它返回的是一个Promise
如何部署至不同目标上
目前ngdeploy只支持单个目标部署，有时多个远程部署也是刚需，比如像当你在做一个开源时总需要照顾国内、国外时，总是希望一份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依赖包。
然后使用ngrun来调用这两种不同目标：
ngrun:deploy-qiniu ngrun :deploy-gh-pages
结论
Angular在国内有些小窘境，ngdeploy发布这么久，一直都没见到对国内一些云存储进行适配；事实上，直接利用ngdeploy来部署应用至远程服务器上，可能在越来越多Docker应用后变得没那么重要，但对于常写开源的人来说，能够快速将Angular应用部署至国内常见的几个云存储上还是挺有意义的。
到此这篇关于小谈angularngdeploy的实现的文章就介绍到这了,更多相关angularngdeploy内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！