React天气API项目部署Firebase后空白页问题及结构困惑

先纠正你对CRA运行机制的误解 #

你完全没必要手动给public/index.html加/src/index.js的引用——Create React App（CRA）在开发环境靠npm start启动的dev server处理源码加载，但到了生产环境，npm run build会把所有src/下的代码、依赖打包成压缩后的静态文件（存在build/static/里），同时自动修改build/index.html，注入打包好的js、css文件引用。你手动加的/src/index.js在部署后根本不存在，自然不会生效。

一步步排查部署问题 #

1. 先确认build产物是否正常 #

• 运行npm run build，看终端有没有报错，然后检查项目根目录的build/文件夹：里面必须有index.html和static/（包含js、css子文件夹）。
• 打开build/index.html，看里面是不是已经有类似<script src="/static/js/main.xxxxxx.js"></script>的自动注入标签（xxxxxx是随机哈希值），如果没有，说明build过程出问题了，重新跑npm run build看日志找错。

2. 检查Firebase初始化的关键配置 #

这是最容易踩坑的地方，重新跑firebase init，注意这几个选项：

• 选Hosting服务；
• 问What do you want to use as your public directory?时，必须输入build，不能用默认的public！选public的话，Firebase会上传你最初的样板public目录，而不是你构建好的应用；
• 问Configure as a single-page app (rewrite all urls to /index.html)?选Yes（React单页应用需要这个配置处理路由）；
• 问File build/index.html already exists. Overwrite?选No，别把你刚build好的文件覆盖了；
• 其他选项按需选，不需要自动部署就选No。

3. 重新部署并验证 #

• 跑firebase deploy，部署完打开Firebase给的URL。如果还是空白，打开浏览器F12开发者工具：
  • 看Console标签有没有报错（比如API跨域、路由配置错、资源加载失败）；
  • 看Network标签，检查static/js、static/css里的文件是不是能正常加载（状态码200）。

4. 本地先验证build产物 #

如果本地npm start正常，但build后本地也打不开，说明应用本身在生产模式有问题：

• 装个serve工具：npm install -g serve；
• 跑serve -s build，访问http://localhost:3000，如果这里也空白，就去排查代码：比如环境变量是不是没配置对（生产环境要用REACT_APP_前缀）、路由是不是用了BrowserRouter但没配置单页应用重写、API请求地址是不是硬编码成了本地地址等。

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