Node.js 应用构建 vue 工程发布到 OSS

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是版本号。版本号的一般使用方式：

1. 在测试过程中可以进行覆盖发布，也就是对URL不变，更新静态资源文件内容。使用这种方式，很有可能会由于客户端的缓存，导致静态资源没有自动更新。不过这个对于测试环境来讲不算是一个大问题，这个方式可以避免版本号的快速上涨。

2. 在正式发布时应该升级版本号，避免对线上正在使用的版本号进行覆盖，以避免预期外的线上变更。

3. 测试环境的版本号和生产环境的版本号应该是两个序列，以避免混乱。常见的方式有两种

   1. 测试环境和生产环境使用不同的oss bucket，阿里巴巴是类似的做法。本文后续使用这个方式。

   2. 使用不同的版本序列。测试环境加上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 查看文件。