NodeJS+React应用部署Heroku遇Cannot GET /错误求助

Hey there! I totally get how frustrating it is when your app works perfectly locally but breaks on deployment. Let's break down why you're seeing that Cannot GET / error on Heroku and fix it step by step.

The Root Cause #

Your Express server isn't set up to serve your React app's static build files, and it lacks a fallback route to handle client-side navigation (even for your single Contact page). Right now, when someone visits your app on Heroku, the server has no idea what to do with the root URL /—you only defined a POST route for /api/form.

Step 1: Update Your Express Server to Serve Static Files #

Modify your Index.js to serve the React build folder and add a catchall route for all GET requests. Here's how:

First, add the path module import at the top:

const path = require("path");

Then, after your /api/form POST route, add these lines to serve static files and handle unmatched requests:

// Serve static files from the React app's build directory
app.use(express.static(path.join(__dirname, "reactapp/build")));

// Catchall route: send back React's index.html for any unmatched GET request
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "/reactapp/build/index.html"));
});

Important: Make sure this code comes after your API route. If you put it before, the catchall will intercept your form submission requests!

Step 2: Add a Heroku Postbuild Script #

Heroku needs to build your React app during deployment—right now it's only starting the server. Update your package.json scripts to include a heroku-postbuild command:

{
  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm start --prefix reactapp",
    "client:build": "npm run build --prefix reactapp",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactapp && npm run client:build --prefix reactapp"
  }
}

What this does:

• NPM_CONFIG_PRODUCTION=false ensures Heroku installs your React app's dev dependencies (required for building)
• It installs React dependencies, then runs the build command to generate the reactapp/build folder

Step 3: Verify Your Procfile #

Double-check your Procfile has the correct command to start the server:

web: node index.js

This tells Heroku to start a web process using your index.js file.

Step 4: Set Up Environment Variables on Heroku #

Your .env file isn't tracked by Git (thanks to .gitignore), so Heroku can't access your EMAIL and PASSWORD variables. To fix this:

1. Go to your Heroku app dashboard
2. Navigate to Settings > Config Vars
3. Add two entries:
   • Key: EMAIL, Value: your Gmail address
   • Key: PASSWORD, Value: your Gmail app password (note: if you have 2FA enabled, use an app-specific password instead of your regular account password)

Step 5: Redeploy to Heroku #

Commit all your changes and push to Heroku:

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

After deployment, your app should load correctly, and the contact form should work as expected!

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