React应用部署Netlify时卡住及404问题排查与解决

一、部署流程卡住的原因与解决 #

原因 #

从部署日志可以看到，你配置的Build命令是npm start——这是React的开发服务器启动命令，它会持续运行以提供热重载功能，不会自动终止进程。而Netlify的构建流程要求命令执行完成后生成生产环境文件，因此开发服务器一直运行会导致部署流程卡住。

解决方法 #

将Netlify站点设置中的Build命令修改为：

CI= npm run build

（部分环境可能需要写成CI=true npm run build）
这个命令会生成生产环境的静态文件到build目录，执行完成后自动终止，不会卡住部署流程。

二、部署成功后出现404页面的原因与解决 #

原因1：发布目录配置错误 #

React执行npm run build后，静态文件默认生成在项目根目录的build文件夹中。但从日志的Current directory可以看到，Netlify的构建目录是/opt/build/repo/Final/dev，如果Netlify未正确识别到build文件夹的位置，就会找不到静态资源，导致404。

解决方法 #

在Netlify控制台进入站点的构建与部署 -> 构建设置，将发布目录设置为build（如果build文件夹在dev目录下，则填写dev/build，根据你的实际项目结构调整）。

原因2：单页应用(SPA)路由未配置重定向 #

如果你的React应用使用了客户端路由（比如React Router），直接访问非根路径（如/settings）时，Netlify服务器会尝试寻找对应路径的静态文件，但SPA只有index.html一个入口文件，因此会返回404。

解决方法 #

在项目的public目录下创建_redirects文件，添加以下内容：

/*    /index.html   200

Netlify会将所有请求重定向到index.html，由React Router处理客户端路由。

关于日志中的ESLint警告 #

日志里的警告都是代码规范问题，不影响部署和应用运行，可选择性修复：

• 删除未使用的变量/函数：如Homepage.jsx中的useState、firebase.js中的addDoc、Settings.jsx中的uploadAvatar2fb
• 给Signup.jsx中的img标签添加alt属性：有意义的图片写描述文本，装饰性图片写空字符串（<img src="xxx" alt="" />）

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