如何在Netlify部署的React应用中设置维护模式并解决_redirects文件缺失部署错误

嘿，我来帮你搞定这俩问题——先解决那个烦人的部署错误，再把维护模式配置好！

首先说那个错误：A "_redirects" file is present in the repository but is missing in the publish directory "build"。其实原因很简单：React打包的时候，只会把public目录下的文件复制到最终的build文件夹里，你把_redirects放在自定义的directory目录里，React根本不会把它打包进去，Netlify自然找不到啦。

第一步：修复_redirects文件缺失问题 #

直接把你的_redirects文件移动到项目根目录的public文件夹下就行（标准React项目都有这个目录，要是没有就手动建一个）。这样当你执行npm run build的时候，React会自动把_redirects复制到build目录里，Netlify就能识别到它了。

你的_redirects内容不用改，还是：

/* /index.html 200

第二步：配置维护模式（两种方案任你选） #

接下来搞定维护模式，这里有两种实用的方式，看你需求来：

方案一：用Netlify环境变量控制（推荐，灵活可控） #

这种方式不用动你的主应用页面，通过环境变量就能一键开启/关闭维护模式，非常方便：

1. 把你准备的维护页面重命名为maintenance.html，放到public目录下，这样打包后它会出现在build文件夹里。
2. 修改public目录里的_redirects文件，加上条件重定向规则：

# 当MAINTENANCE_MODE设为true时，所有请求跳转到维护页面
/* /maintenance.html 302! Conditions:MAINTENANCE_MODE=true

# 保留原来的SPA重定向规则，正常情况下用这个
/* /index.html 200

3. 登录Netlify后台，找到你的站点，进入Site settings > Environment variables，添加一个环境变量：
   • 变量名：MAINTENANCE_MODE
   • 变量值：true（需要维护时设成true，恢复服务的时候改成false或者直接删掉这个变量就行）

方案二：临时替换主入口页面（快速应急） #

如果只是短时间紧急维护，不想折腾环境变量，可以直接把你的维护页面内容替换掉public/index.html（这是React项目的主入口页面），然后重新部署。等维护结束，再把原来的index.html内容恢复回来就行——这个方式简单粗暴，适合临时用。

最后验证一下 #

修改完之后，先本地执行打包命令看看：

npm run build

打开build目录，确认_redirects和维护页面（如果用方案一的话）都在里面，然后推送到Git仓库触发Netlify部署，这时候那个错误就会消失，维护模式也能正常工作啦！

内容的提问来源于stack exchange，提问作者K S Sabarinathan