React+MongoDB+Express+Node.js应用本地正常，Heroku部署失败求助

Hey there! Let's break down the most common issues that cause MERN apps (React + Express + Node + MongoDB) to fail on Heroku when they run perfectly locally—especially since you're running Express and React on separate ports locally. Here's what to check step by step:

1. Fix Your API URL/Proxy Setup #

Locally, you probably use React's proxy field in package.json to point to your Express server (e.g., "proxy": "http://localhost:5000"). But this doesn't work on Heroku because your frontend and backend are either:

• Hosted on the same Heroku app (so they share a single domain), or
• Hosted on separate Heroku apps (so you need explicit, environment-specific URLs)

Fix Options: #

• Single Heroku App: Remove the proxy field and make all API calls use relative paths (e.g., /api/users instead of http://localhost:5000/api/users).
• Separate Apps: Use environment variables to set your API URL. In React, add this to your API calls:

  const apiBaseUrl = process.env.REACT_APP_API_URL || 'http://localhost:5000';
  // Example fetch call
  fetch(`${apiBaseUrl}/api/data`)
  

  Then, in your Heroku React app's settings, add the environment variable REACT_APP_API_URL with your Express Heroku app's URL (e.g., https://your-express-app.herokuapp.com).

2. Serve React's Build Folder via Express #

If you're hosting both frontend and backend on one Heroku app, you need to tell Express to serve React's production build files. Add this to your server.js:

const path = require('path');

// Serve static files from React's build directory in production
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, 'client/build')));

  // Catch all React routing requests
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}

Also, add a heroku-postbuild script to your root package.json so Heroku automatically builds your React app during deployment:

"scripts": {
  "start": "node server.js",
  "heroku-postbuild": "cd client && npm install && npm run build"
}

Make sure the path to your React folder (client in this example) matches your project structure.

3. Adjust CORS Configuration #

Your local CORS setup (app.use(cors())) might be too permissive or not restrictive enough for production. Instead of allowing all origins, lock it down to your Heroku domain:

const corsOptions = {
  origin: process.env.NODE_ENV === 'production' 
    ? 'https://your-heroku-app-name.herokuapp.com' 
    : 'http://localhost:3000',
  credentials: true // If you're using cookies/sessions
};
app.use(cors(corsOptions));

If you're hosting frontend and backend on the same app, you can even remove the CORS middleware entirely since they share the same origin.

4. Use Heroku's Dynamic Port #

Heroku assigns a random port via the PORT environment variable—never hardcode your port in server.js:

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

This ensures your Express server uses Heroku's assigned port in production, and falls back to 5000 locally.

5. Verify MongoDB Connection #

Local MongoDB works, but production needs a cloud instance (like MongoDB Atlas). Make sure:

• You're using the Atlas connection string in production, stored in a Heroku environment variable (MONGODB_URI).
• Your server.js uses the environment variable instead of a local connection string:

  mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/your-local-db', {
    useNewUrlParser: true,
    useUnifiedTopology: true
  });
  

• You've added 0.0.0.0/0 to your Atlas IP whitelist (allows all IPs, including Heroku's dynamic ones—ensure your database has strong user authentication!).

6. Check Heroku Logs for Exact Errors #

This is the most important step! Run this command in your terminal to see real-time logs:

heroku logs --tail

Logs will tell you exactly what's failing—whether it's a missing dependency, a build error, a database connection timeout, or a routing issue.

Start with the logs first—they'll point you directly to the problem. Most of the time, it's one of the above fixes that gets your app running on Heroku.

内容的提问来源于stack exchange，提问作者Pabba Anu Bharath