小谈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 相关文章推荐
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
PHP实现的日历功能示例
2018/09/01 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
javascript实现密码验证
2015/11/10 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
PyQt5每天必学之布局管理
2018/04/19 Python
3分钟学会一个Python小技巧
2018/11/23 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
搞笑获奖感言
2014/01/30 职场文书
协议书范文
2015/01/27 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python