小谈angular ng deploy的实现


Posted in Javascript onApril 07, 2020

Angular CLI 在 8.3.0 发布过一个新命令 ng deploy,可以将 Angular 应用部署到远程服务器或云存储上面,例如:Firebase hosting、Azure、GitHub pages 等等,这也是算是 Angular CLI 最后一个将 Angular 应用从开发到部署打通全能选手工具了。

快速入门

这里我以ng-deploy-oss 为示例,演示如何将 Angular 应用部署到七牛云。

1、创建一个新项目

ng new hello-world --defaults

2、添加 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)

3、部署

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 应用部署至国内常见的几个云存储上还是挺有意义的。

到此这篇关于小谈angular ng deploy的实现的文章就介绍到这了,更多相关angular ng deploy内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 #Javascript
vue开发中遇到的问题总结
Apr 07 #Javascript
手把手教您实现react异步加载高阶组件
Apr 07 #Javascript
javascript绘制简单钟表效果
Apr 07 #Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 #Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 #jQuery
js实现登录时记住密码的方法分析
Apr 05 #Javascript
You might like
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Vue中的Props(不可变状态)
2018/09/29 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python多维数组切片方法
2018/04/13 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
总结python中pass的作用
2019/02/27 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2014年终工作总结范本
2014/12/15 职场文书
街道社区活动报告
2015/02/05 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL