部署MEAN应用至Heroku后页面空白问题求助

Hey there, sorry to hear you're stuck with your first MEAN app on Heroku—let's break this down step by step. Blank pages after a successful build usually boil down to a few common issues, even if the server logs look good. Here are the most likely fixes to check:

MEAN apps rely on Express to serve your frontend's built files. If this configuration is off, the browser won't get your index.html or assets.

• Make sure your server.js (or main backend file) is set up to serve static files from your frontend's build folder (usually dist for Angular, build for React):

  const path = require('path');
  // Adjust the path to match your frontend's build directory
  app.use(express.static(path.join(__dirname, 'client/dist')));
  

• Add a catch-all route to redirect all non-API requests to index.html—this ensures Angular's client-side routing works:

  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/dist/index.html'));
  });
  

Heroku needs explicit instructions to build your frontend during deployment.

• In your root package.json, add a heroku-postbuild script that installs frontend dependencies and runs the build command:

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

• Double-check that the client folder path matches your frontend's location, and that your frontend's package.json has a valid build script (e.g., "build": "ng build --prod" for Angular).

If your frontend calls an API, it might be pointing to localhost instead of your Heroku app's URL.

• Set an environment variable in Heroku (via dashboard or heroku config:set API_URL=https://your-app-name.herokuapp.com/api) and update your frontend to use this variable instead of hardcoding localhost.
• Ensure your backend listens on Heroku's dynamic port:

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

Server logs don't always show frontend issues. Open your browser's DevTools (F12):

• Check the Console tab for JavaScript errors (e.g., failed API calls, missing assets).
• Look at the Network tab to confirm index.html loads with a 200 status, and all CSS/JS assets don't return 404 errors.

Even if logs say "connected", your connection string might be incorrect for Heroku.

• For MongoDB, use Heroku's provided MONGODB_URI environment variable instead of a local string:

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

If none of these fix it, sharing snippets of your server.js or root package.json would help narrow things down further. Good luck with your first MEAN app—you're almost there!

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