测试环境 Web 发布指南

本文档旨在讲解如何将 web 代码发布至测试环境

首先看下网路链路图

从上面的图片可以看到

对于公网用户:

• 通过网络设备经过公网访问测试环境地址 https://{project-key}.wmeimob.work
• 域名经过DNS解析至测试环境域名
• 网站根据项目key返回请求资源

对于开发人员:

• 迁出项目代码进行开发
• 提交代码。并通过工具(vscode插件/Flow流水线)进行打包构建
• 推送代码至静态资源存储区对应路径下(项目key)

vscode构建

你可以使用vscode项目发布功能构建web网站。

优势

• 一键执行构建发布：通过命令面板/右键快捷键功能一键打包发布。
• 支持构建不同环境： 基于特定规则生成唯一站点。多项目互不影响
• 基于CDN + 服务器回源： 没有带宽限制。页面并发能力强，响应速度非常快。
• 集中管理资源：集中管理发布。设置生命周期。到期自动清理

操作步骤

信息

这里仅作简要说明，详细说明请查阅插件说明。

1. 打开vscode编辑器并安装好最新版本美萌插件
2. 打开web项目，并在项目中pacakge.json上右键。
3. 选择 项目构建发布

4. 选择构建环境(命令适配了 uat|build脚本命令)
5. 等待插件自动执行 构建-上传操作 执行完毕后 终端-输出会显式构建信息。并写入构建至项目 根package.json文件中

流水线构建

警告

流水线的配置相对来说比较繁琐。且配置容易出错。此方式暂时关闭。仅生产环境配置使用

本地构建

如果你的项目无法通过上面的方式发布(例如:老项目迁移成本太高。 接口服务无法处理CORS跨域等).那么你还可以使用最初的方式。

• 本地构建dist包
• 本地启动nginx服务器并放置静态资源。或提供给后端与接口服务放在一起(CORS问题)
• 提供 https://{projectname}.f.wmeimob.com测试地址