测试环境 Web 发布指南
本文档旨在讲解如何将 web 代码发布至测试环境
警告
此方案为旧方案。已归档不再使用
信息
此为 CDN + OSS 方案
首先看一下网络拓扑
从上面的图片可以看到 对于公网用户:
- 通过网络设备经过公网访问测试环境地址(https://(mm|wm-custom).f.wmeimob.com/{project-key}/)
- 域名经过DNS解析至测试环境域名
- 网站根据项目key返回请求资源
对于开发人员:
- 迁出项目代码进行开发
- 提交代码。并通过工具(vscode插件/Flow流水线)进行打包构建
- 推送代码至静态资源存储区对应路径下(项目key)
代码构建/发布方式
通过上面的图解看到。发布代码可以通过两种方式：vscode插件 与 流水线构建的方式进行发布。
vscode插件构建（推荐）
对于开发人员来说。最简单的方式即是通过公司插件提供的功能进行发布。
优势:
- 一键执行构建发布：右键发布-选择环境-等待构建发布完成。
- 支持构建不同环境： 基于脚本命令构建并生成key作用域。
- 基于CDN + OSS回源,没有带宽限制。页面并发能力强，响应速度非常快。
操作步骤:
信息
这里仅作简要说明，详细说明请查阅插件说明。
- 打开vscode编辑器并安装好最新版本美萌插件
- 打开web项目，并在项目中pacakge.json上右键。
- 选择 项目构建发布至wm-custom
- 选择构建环境(命令适配了 uat|build脚本命令)
- 等待插件自动执行 构建-上传操作 执行完毕后 终端-输出会显式构建信息。并写入构建至项目 根package.json文件中
流水线构建
警告
流水线的配置相对来说比较繁琐。且配置容易出错。不是很推荐
项目兼容
对于上面说的非本地构建的项目。由于是使用的同一个测试域名。所以项目框架存在两个问题：
- 网站必须使用相对路径模式(即 publicPath: './')
- 登录token需要隔离
目前对于 2024/08/24 后通过员工平台模板创建的项目已经完成适配。对此之前的项目。要想接入发布模式则需要进行一定的代码调整。
下面会详细说明不同类型项目如何修改。你可以根据自身项目情况查看对应改动
提示
访问文档查看
本地构建
如果你的项目无法通过上面的方式发布(例如:老项目迁移成本太高。 接口服务无法处理CORS跨域等).那么你还可以使用最初的方式。
- 本地构建dist包
- 本地启动nginx服务器并放置静态资源。或提供给后端与接口服务放在一起(CORS问题)
- 提供 https://{projectname}.f.wmeimob.com测试地址