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

本文介绍如何在 AppStack 中构建 Vue 工程,并将构建产物发布到 OSS 以供引用

前提条件

  • 具备基本的 Node.js 和 Vue.js 知识。

  • 开通一个 OSS bucket,假设地址为:static-serving.oss-cn-beijing.aliyuncs.com

背景信息

基于AppStack平台使用Node.js构建Vue应用发布到阿里云对象存储服务(OSS)静态网站的托管为例。

假设构建后的静态资源包含 1.1 /css/index.css 和 1.1 /js/index.js,上传后通过相应的 URL 访问,并将地址写入应用网页中。

URL 中的 1.1 是版本号。版本号的使用方式如下:

  1. 测试过程中可以覆盖发布,即 URL 不变只更新文件内容,可能会因缓存导致资源不更新,但对测试环境影响不大。

  2. 正式发布时应升级版本号,避免覆盖线上版本,防止意外变更。

  3. 测试和生产环境应使用不同的版本号序列,常见方式有两种:

    1. 使用不同的 OSS Bucket(本文采用此方式)。

    2. 使用不同的版本序列,如测试环境加上 test 后缀(如 0.0.1-test),生产环境使用数字(如 0.0.1)。

方案原理

image

操作实践

步骤一:创建应用

进入应用交付AppStack首页,单击「新建应用」,选择「Node.js 构建 vue 工程发布到 OSS」模板。您也可以自定义组织模板,定义组织专属应用架构和研发流程。

高的 - 2024-12-13T153857.464.png

步骤二:修改应用

  • 按需修改代码仓库地址为您自己的代码库。

    高的 - 2024-12-13T153925.710.png

  • 按需修改构建配置,上传到您的 OSS Bucket。

    高的 - 2024-12-13T154001.890.png

    高的 - 2024-12-13T154103.023.png

步骤三:构建并发布到测试环境

  • 提交代码后触发构建,并上传到测试 OSS Bucket。

    高的 - 2024-12-13T154159.774.png

步骤四: 构建并发布到生产环境

测试验证通过,发布到生产环境,进入 OSS 查看结果。

高的 - 2024-12-13T154249.857.png