小谈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 闭包在封装函数时的简单分析
Nov 28 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
JSONP跨域请求
Mar 02 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
javascript实现计算器功能
Mar 30 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
详解Python 最短匹配模式
2020/07/29 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
高中班长自我鉴定
2013/12/20 职场文书
运动会通讯稿300字
2014/02/02 职场文书
委托书样本
2014/04/02 职场文书
李白故里导游词
2015/02/12 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers