使用Docker部署Angular 4到Heroku时出现连接超时问题

我来帮你排查Docker部署Angular 4到Heroku后持续超时的问题，核心大概率出在几个容易忽略的配置细节上，咱们一步步梳理：

1. 必须适配Heroku的动态端口 #

Heroku不会给你固定端口，而是通过PORT环境变量动态分配。如果你的服务器（不管是node.js、nginx还是其他）硬编码了端口（比如3000），那肯定无法被Heroku的路由正确转发，直接导致超时。

• 如果用自定义node.js的server.js：
  一定要改成监听环境变量指定的端口，示例代码片段：

  const express = require('express');
  const app = express();
  // 优先用Heroku的PORT变量，本地调试 fallback到3000
  const port = process.env.PORT || 3000;
  
  // 注意这里的路径要和你Angular构建的dist文件夹路径完全匹配
  app.use(express.static(__dirname + '/dist/your-angular-app-name'));
  
  // Angular单页应用的路由 fallback
  app.get('/*', (req, res) => {
    res.sendFile(__dirname + '/dist/your-angular-app-name/index.html');
  });
  
  app.listen(port, () => {
    console.log(`Server running on port ${port}`);
  });
  

• 如果用nginx：
  要通过envsubst替换配置里的端口为$PORT，并且确保nginx前台运行（否则容器会直接退出）。比如Dockerfile里的启动命令要改成：

  CMD sh -c "envsubst '\$PORT' < /etc/nginx/conf.d/default.conf > /etc/nginx/conf.d/default.conf.tmp && mv /etc/nginx/conf.d/default.conf.tmp /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"
  

  对应的nginx配置文件要写成：

  server {
      listen ${PORT};
      root /usr/share/nginx/html;
      index index.html index.htm;
  
      location / {
          try_files $uri $uri/ /index.html;
      }
  }
  

2. 确认Dockerfile的构建与启动逻辑正确 #

• 构建阶段要确保Angular的npm run build --prod执行成功，并且把dist文件夹正确复制到生产镜像里；
• 生产镜像里的启动命令必须保证进程前台运行（比如node直接跑server.js，nginx用daemon off;），否则Heroku会认为容器启动失败；
• 最好在Dockerfile里加上EXPOSE $PORT（虽然Heroku会忽略，但能明确端口意图）。

3. 深挖Heroku日志细节 #

你说日志显示部署成功，但可以再仔细看容器启动后的日志：有没有出现类似Server running on port XXXXX的字样？如果没有，说明服务器根本没正确启动——可能是依赖没装全、dist路径错误、启动命令写错了。

比如如果用node.js，日志里没看到端口监听的输出，大概率是server.js里的路径写错了，或者npm install没装全依赖。

4. 本地模拟Heroku环境测试 #

可以本地手动设置PORT环境变量启动容器，测试是否能正常访问，比如：

docker build -t angular-heroku .
docker run -e PORT=5000 -p 5000:5000 angular-heroku

如果本地访问localhost:5000正常，那问题基本就锁定在Heroku的端口适配或者部署流程上了。

最后总结 #

最常见的问题就是没正确使用Heroku的PORT环境变量，其次是容器内服务器进程没前台运行、Angular构建产物路径错误。你可以先从端口配置入手排查，再结合日志确认服务器是否真的启动成功。

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