Vue.js+Node.js项目部署Heroku遇端口问题致503服务不可用

Hey there, let's work through your Heroku 503 Service Unavailable issue— I’ve gone through your configs and spotted a few key issues that are almost certainly causing this problem. Let’s break down each fix step by step:

1. Fix Your package.json Start Script #

Right now, your start script only runs npm run build, which just compiles your Vue app into the dist folder but never starts your Express server. Heroku expects the start script to launch a long-running process; if it exits immediately (like after a build finishes), Heroku marks the app as crashed and returns 503.

Update your scripts section to this:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "postinstall": "npm run build", // Auto-build after dependencies install on Heroku
  "start": "node app.js", // Launch the Express server
  "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
  "build": "node --optimize_for_size --max_old_space_size=2048 --gc_interval=100 build/build.js"
},

• postinstall ensures Heroku builds your Vue app right after installing dependencies.
• start now launches your Express server, keeping the process running as Heroku requires.

2. Correct Static File Path & Middleware Order in app.js #

Two issues here:

• Relative paths like 'dist' can break on Heroku (since the working directory might differ from your local setup).
• Your static file middleware is placed after the 404 error handler, so requests for static files get blocked by the 404 handler first.

First, update the static file path to use an absolute path, then move the middleware above your API routes and 404 handler:

// ... Keep your existing imports, mongoose connection, and body-parser setup ...

// Move static file serving HERE, before routes and error handlers
if (process.env.NODE_ENV === 'production') {
  console.log('Serving static files from dist directory');
  // Use absolute path to avoid directory issues on Heroku
  app.use(express.static(path.join(__dirname, 'dist')));
}

// Define your API routes next
app.use('/api/doings', doingsRoutes);
app.use('/api/targets', targetsRoutes);
app.use('/api/tops', topsRoutes);
app.use('/api/users', usersRoutes);

// Then your 404 error handler
app.use(function(req, res, next) {
  const err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// ... Rest of your port setup, app.listen, and error handling ...

3. Fix SPA Fallback Path in Error Handler #

If you're using Vue Router in history mode (which is common for SPAs), your 404 fallback needs to correctly point to the index.html file in your dist folder. Update the error handler to use an absolute path:

app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  
  // Serve index.html for 404s (SPA fallback)
  if (err.status === 404) {
    return res.sendFile(path.join(__dirname, 'dist', 'index.html'));
  }
  
  res.status(err.status || 500);
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

Double-check the path: if your app.js is in a subfolder (like server/app.js), adjust it to path.join(__dirname, '../dist', 'index.html') instead.

4. Verify Vue Build Config #

Your config/index.js build settings look good, but just confirm assetsPublicPath is set to '/'—this ensures your static assets (JS/CSS) load with the correct root path on Heroku.

Final Steps #

After making these changes, commit your code and push to Heroku again:

git add .
git commit -m "Fix Heroku 503 issues: start script, static paths, middleware order"
git push heroku master

You can check real-time logs to confirm everything works with:

heroku logs --tail

内容的提问来源于stack exchange，提问作者Илья Карев