Node.js应用启动后前端资源及接口404问题求助

Hey there! Let's troubleshoot those 404 errors and get your Node + React app ready for Heroku deployment. The core issue here is that your Node backend isn't set up to serve your compiled React static files, and might not be handling route fallbacks for your single-page app (SPA). Here's how to fix it step by step:

1. Configure Your Node Backend to Serve Static Files & Handle SPA Routes #

First, update your main Node server file (like server.js or app.js) to serve the compiled React assets and redirect all non-API requests to React's index.html. This ensures both your static files and SPA routes work correctly.

If you're using Express, add these lines after your API route definitions (order matters!):

const express = require('express');
const path = require('path');
const app = express();

// 👇 First, define your API routes (keep these above static file serving)
app.post('/login', (req, res) => {
  // Your login logic here
});
app.get('/tiles', (req, res) => {
  // Your tiles data logic here
});

// 👇 Serve compiled React static files from the build directory
app.use(express.static(path.join(__dirname, 'client/build')));

// 👇 Handle all non-API requests by returning React's index.html (for SPA routing)
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

// Start server (use Heroku's PORT env variable or default to 5000)
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Note: If your build directory is in the root of your project (not inside client), adjust the path to path.join(__dirname, 'build') instead.

2. Update Your Root package.json Scripts for Heroku #

Heroku needs to know how to build your app and start the server. Update your root package.json scripts to ensure React gets compiled before the server starts:

{
  "scripts": {
    "start": "node server.js", // Replace with your actual server entry file
    "build": "cd client && npm install && npm run build", // Install client dependencies + build React
    "dev": "concurrently \"node server.js\" \"cd client && npm start\"" // Keep your dev script as-is
  },
  "engines": {
    "node": ">=16.x", // Specify a Node version compatible with your app
    "npm": ">=8.x"
  }
}

Heroku will automatically run npm run build during deployment, which compiles your React app into the client/build directory.

3. Verify Frontend API Request Paths #

Make sure your React frontend is requesting the correct API paths. For example:

• If your backend defines /login directly, your frontend should call fetch('/login') (not /api/login unless you added a prefix).
• In development, your client/package.json should have a proxy field to forward requests to your backend:

  {
    "proxy": "http://localhost:5000"
  }
  

This ensures dev requests work, and when built, the frontend uses the same relative paths that your backend handles.

4. Test Locally Before Deploying #

Before pushing to Heroku, test the production setup locally:

1. Run npm run build to compile your React app.
2. Run npm start to start your Node server.
3. Visit http://localhost:5000 — you should see your React app, and your /login//tiles APIs should return valid responses instead of 404s.

Heroku Deployment Tips #

• Make sure you don't have client/node_modules or build in your .gitignore (Heroku needs the build output, but it will run npm install for the client during build).
• Set any required environment variables in Heroku's dashboard under "Settings" > "Config Vars".

That should fix your 404 issues and get your app ready for Heroku!

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