如何在Azion平台创建边缘应用并上传React项目？

前置准备 #

• 先在本地React项目根目录执行生产构建命令：
  • 用Create React App脚手架的项目跑npm run build，生成build产物文件夹
  • 用Vite脚手架的项目跑npm run build，生成dist产物文件夹
• 提前注册并登录Azion账号，完成账号基础验证

1. 创建静态站点类型的边缘应用 #

• 登录控制台后，在左侧导航栏找到Edge Applications入口，点击右上角新增应用按钮
• 应用类型选择Static Website（静态网站），这是React这类纯前端打包项目最适配的类型
• 给应用设置自定义名称，其余基础初始化配置保持默认即可，进入下一步

2. 上传React构建产物 #

• 进入资源上传环节后，打开本地刚才生成的build或dist文件夹，选中里面所有文件（包含根目录的index.html、static资源文件夹、favicon等），拖拽到平台上传区域
• 注意不要上传整个React项目源码，也不要把整个build/dist文件夹直接上传，要保证上传后index.html处于资源的根目录层级，否则打开会白屏
• 等待所有文件上传完成，确认文件列表里根目录存在index.html后进入下一步

3. 配置单页应用路由规则（必做，否则刷新子页面会404） #

React是客户端路由的单页应用，所有前端路由路径都需要回退到index.html处理：

• 找到Rules Engine（规则引擎）配置模块，新增一条处理规则：
  • 匹配条件：请求路径不包含.（即匹配所有不带文件后缀的路径，比如/home、/detail/1这类前端路由地址）
  • 执行动作：将请求路径重写为/index.html，响应状态码设为200
• 静态资源缓存规则保持默认即可，平台默认会对带hash的js、css、图片资源配置长缓存，符合React项目的性能优化要求

4. 绑定域名并发布 #

• 无自定义域名的情况下，可以直接使用平台分配的默认测试域名
• 需要绑定自有域名的话，在Domains配置项中添加自己的域名，按照平台提示给域名添加CNAME解析即可
• 所有配置核对完成后点击Deploy按钮发布，等待1-2分钟部署完成后，即可通过对应域名访问部署好的React项目

常见问题排查 #

• 页面打开白屏：检查上传的文件层级，确认index.html在资源根目录，没有被嵌套在额外的文件夹里；同时检查项目构建时的公共路径配置，部署在根路径的话publicPath要设为/
• 刷新非首页路径报404：检查步骤3的路由回退规则是否正确配置
• 静态资源加载失败：检查资源路径是否正确，确认上传时所有static文件夹内的资源都完整上传没有缺失

内容的提问来源于stack exchange，提问作者aloisio-miguel-bastian