Heroku部署Express项目问题：本地正常线上某页面404

本地运行完全正常的Express项目，部署到Heroku后，其中一个页面返回404错误。

项目目录结构 #

bin
--www
public
--images
--javascripts
--stylesheets
routes
--about.js
--contact.js
--index.js
--sendEmail.js
views
--include
----footer.ejs
----head.ejs
----nav.ejs
----popup1.ejs
----popup2.ejs
----popup3.ejs
----scripts.ejs
--contact.ejs
--about.ejs
--error.ejs
--index.ejs
.gitignore
app.js
package-lock.json
package.json

app.js 核心代码 #

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var contactRouter = require('./routes/contact');
var aboutRouter = require('./routes/about');
var emailRouter = require('./routes/sendEmail');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/contact', contactRouter);
app.use('/about', aboutRouter);
app.use('/send', emailRouter);

// 原代码末尾存在多余闭合括号，此处已修正
module.exports = app;

错误截图 #

排查方向及解决方案 #

1. 先看Heroku日志
   打开终端执行 heroku logs --tail，实时监控请求日志，能精准看到是哪个路径返回404，以及请求的具体细节，这是最快定位问题的方法。

2. 检查路由大小写
   本地Windows系统不区分文件名和路由大小写，但Heroku用的Linux系统严格区分。比如页面里写的跳转链接是 /About，但路由定义的是 /about，本地能访问，到Heroku就会404。把所有页面的链接、表单提交路径和路由定义核对一遍，确保完全一致。

3. 确认启动脚本
   检查package.json里的scripts字段，启动命令必须正确：

   "scripts": {
     "start": "node ./bin/www"
   }
   

   Heroku默认执行npm start，如果启动命令错了，项目可能没加载全路由。

4. 检查Git提交完整性
   看看.gitignore有没有把路由文件、视图文件或者bin/www给忽略了。执行git status确认所有必要文件都已提交，没被漏掉的话再推一次到Heroku。

5. 核对路由文件细节
   如果是某个特定页面404，比如contact页面，就打开routes/contact.js检查：

   • 请求方法是否匹配：页面是GET请求，路由里是不是写成了POST；
   • 视图渲染是否正确：是不是res.render('contact')，有没有写错视图文件名。

6. 端口配置检查
   确认bin/www里用了Heroku分配的端口，而不是硬编码3000：

   var port = normalizePort(process.env.PORT || '3000');
   app.set('port', port);
   

   硬编码端口会导致Heroku启动失败，不过这种情况一般是503错误，但也可以排查下。

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