如何在AWS Amplify中创建自动触发的站点维护中页面？

• 首先进入你的Amplify控制台，找到对应托管的React应用，进入「构建设置」页面
• 找到「构建镜像设置」模块，点击编辑，添加自定义的构建命令钩子：
  • 构建前阶段（preBuild）加命令，把你提前写好的maintenance.html维护页文件上传到Amplify托管的存储根目录
  • 构建完成后阶段（postBuild）再加命令，自动删除根目录的maintenance.html
• 接着找到「重写和重定向」配置，添加一条规则：
  • 源地址填/*
  • 目标地址填/maintenance.html
  • 状态码选200（重写）
  • 重点：把这条规则的优先级调到最低（也就是排在所有规则的最下面）

原理：只要根目录存在maintenance.html文件时，所有访问请求都会被重写到维护页，构建完成删除这个文件后规则自动失效，不会影响正常访问

• 你可以提前在React项目里写好维护页组件，给它配置单独的路由/maintenance
• 在项目根目录的amplify.yml配置文件里，添加环境变量标记位：

  version: 1
  frontend:
    phases:
      preBuild:
        commands:
          - export IS_MAINTENANCE=true
          - npm ci
      build:
        commands:
          - npm run build
      postBuild:
        commands:
          - export IS_MAINTENANCE=false
  

• 在React的路由配置里加判断逻辑，只要process.env.IS_MAINTENANCE的值为true，所有路由请求都直接渲染维护页组件，否则走正常的路由逻辑

如果完全不熟悉AWS配置，优先选方案2，只需要改你自己的React代码和项目里的amplify.yml文件，不需要在控制台调整复杂配置，也不容易出错。

内容的提问来源于stack exchange，提问作者Sharon