在Heroku部署Laravel+ReactJS应用遇静态资源404问题求助

首先，你的核心问题出在Procfile的命令逻辑和构建时机上：

你写的web: vendor/bin/heroku-php-nginx public/ && npm run build里，heroku-php-nginx是一个阻塞式命令——它会启动Web服务器并一直运行，所以后面的npm run build永远不会被执行。这就导致你的React代码根本没被构建，public目录里缺少app.js这类静态资源，自然会返回404。

下面是具体的解决步骤：

1. 调整React的构建输出路径 #

确保你的React构建产物（编译后的js、css）会输出到Laravel的public目录下：

• 如果是直接用React脚手架（create-react-app）开发的，修改package.json里的build脚本，把产物移动到Laravel的public目录：

  "scripts": {
    "build": "react-scripts build && cp -r build/* ../public/"
  }
  

  （路径根据你的React项目在Laravel中的位置调整，比如如果React在resources/js/react-app下，那../public就要改成../../public）
• 如果是用Laravel Mix集成的React（更推荐的Laravel前端方案），直接用Mix的生产环境编译命令即可，它默认会把资源输出到public/js和public/css：

  "scripts": {
    "prod": "mix --production"
  }
  

2. 让Heroku在部署阶段自动执行构建 #

Heroku支持在部署过程中运行构建脚本，你需要做两件事：

2.1 添加Node.js和PHP的Buildpacks #

Heroku需要同时处理PHP（Laravel）和Node.js（React），所以要添加两个buildpack：

heroku buildpacks:add heroku/php
heroku buildpacks:add heroku/nodejs

2.2 配置部署时的构建脚本 #

在项目根目录的package.json里添加heroku-postbuild脚本，Heroku会在部署时自动执行它：

• 如果是纯React脚手架：

  "scripts": {
    // ... 其他已有脚本
    "heroku-postbuild": "npm run build"
  }
  

• 如果是Laravel Mix：

  "scripts": {
    // ... 其他已有脚本
    "heroku-postbuild": "npm run prod"
  }
  

3. 修正你的Procfile #

Procfile只需要负责启动Laravel的Web服务器，不需要包含构建命令（因为构建已经在部署阶段完成了）：

web: vendor/bin/heroku-php-nginx public/

4. 检查视图中的资源引用路径 #

确保你在Laravel的Blade视图里用正确的方式引用静态资源：

• 用Laravel的asset()助手：

  <script src="{{ asset('js/app.js') }}"></script>
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  

• 如果用了Laravel Mix，推荐用mix()助手（它会自动处理缓存哈希）：

  <script src="{{ mix('js/app.js') }}"></script>
  <link href="{{ mix('css/app.css') }}" rel="stylesheet">
  

完成这些步骤后，重新部署你的应用：

git add .
git commit -m "Fix Heroku deployment build flow"
git push heroku main

这样部署时Heroku会先执行React的构建，把产物放到public目录，再启动PHP服务器，静态资源就能正常访问了。

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