1. 场景介绍
本文会介绍如何在 AppStack 中构建 vue 工程,并将构建产物发布到OSS,然后在应用页面中引用OSS上的静态资源地址。
开通一个OSS的bucket,假设其地址为:static-serving.oss-cn-beijing.aliyuncs.com
假设构建后的静态资源包含两个文件: 1.1/css/index.css, 1.1/js/index.js。则在上传构建产物之后,可以通过http://static-serving.oss-cn-beijing.aliyuncs.com/1.1/css/index.js 和 http://static-serving.oss-cn-beijing.aliyuncs.com/1.1/js/index.js 来访问。因此把这两个地址写入到应用网页中即可访问。
其中URL中的1.1是版本号。版本号的一般使用方式:
在测试过程中可以进行覆盖发布,也就是对URL不变,更新静态资源文件内容。使用这种方式,很有可能会由于客户端的缓存,导致静态资源没有自动更新。不过这个对于测试环境来讲不算是一个大问题,这个方式可以避免版本号的快速上涨。
在正式发布时应该升级版本号,避免对线上正在使用的版本号进行覆盖,以避免预期外的线上变更。
测试环境的版本号和生产环境的版本号应该是两个序列,以避免混乱。常见的方式有两种
测试环境和生产环境使用不同的oss bucket,阿里巴巴是类似的做法。本文后续使用这个方式。
使用不同的版本序列。测试环境加上test后缀,比如0.0.1-test,生产环境使用数字,比如0.0.1。
2. 操作实践
2.1 创建应用
进入AppStack首页-应用,点击「新建应用」,选择「Node.js 构建 vue 工程发布到 OSS」模板。你也可以自定义企业模板,定义企业专属应用架构和研发流程。
2.2 按需修改应用代码、流水线配置
按需修改代码仓库地址为你自己的代码
按需修改构建配置,上传到你自己的 OSS bucket。
2.3 构建并发布到测试环境
提交代码后触发构建,并上传到测试 OSS bucket。
2.4 构建并发布到生产环境
测试验证通过,发布到生产环境,进入 OSS 查看文件。