如何将含HTML/CSS/JS客户端与Node.js服务端的应用部署至Heroku？

Heroku对Node.js全栈应用的支持非常到位，你要实现的前端AJAX请求后端、更新UI的需求完全能满足——而且部署后前后端会处于同一域名下，连跨域问题都不用额外操心。下面我给你详细拆解部署的全流程：

一、先整理好你的项目结构 #

首先要把前端和后端文件规整成Heroku能识别的结构，推荐的目录如下：

你的项目文件夹/
├── public/          # 存放所有前端静态文件（HTML/CSS/JS）
│   ├── index.html
│   ├── styles.css
│   └── app.js
├── server.js        # Node.js服务端的入口文件（必须有）
├── package.json     # 项目依赖配置文件（核心，Heroku靠它识别项目类型）
└── .gitignore       # 忽略不需要提交的文件，比如node_modules、.env等

前端文件统一放在public目录下，这样后端可以轻松托管这些静态资源。

二、配置Node.js服务端 #

以最常用的Express框架为例，你的server.js需要做这几件事：

1. 托管前端静态资源
2. 编写供前端调用的API接口
3. 监听Heroku分配的动态端口（不能硬编码端口号）

给你一个示例代码：

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

// 用Heroku分配的端口，本地开发默认用3000
const PORT = process.env.PORT || 3000;

// 托管public目录下的前端静态文件
app.use(express.static('public'));

// 解析JSON格式的请求体（处理前端AJAX的POST请求）
app.use(express.json());

// 示例API接口，供前端AJAX调用
app.get('/api/get-data', (req, res) => {
  res.json({
    status: 'success',
    data: '这是从Node.js服务端返回的响应数据',
    timestamp: new Date().toLocaleString()
  });
});

// 启动服务
app.listen(PORT, () => {
  console.log(`服务已启动，监听端口 ${PORT}`);
});

然后重点配置package.json，必须包含start脚本（Heroku会通过这个脚本启动你的服务），同时把依赖都列在dependencies里：

{
  "name": "my-fullstack-app",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

注意：devDependencies里的依赖Heroku默认不会安装，如果有开发时才用的包，要放在这个字段里；生产环境需要的包一定要放在dependencies里。

三、前端AJAX请求配置 #

因为部署后前后端在同一个域名下，所以前端的AJAX请求直接用相对路径即可，不用写完整域名，这样本地开发和线上部署都能正常工作。示例代码（比如在public/app.js里）：

// 前端发起AJAX GET请求的示例
fetch('/api/get-data')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(result => {
    // 更新UI，比如把数据显示到页面上
    document.getElementById('response-content').textContent = result.data;
    console.log('服务端返回数据:', result);
  })
  .catch(error => {
    console.error('请求出错:', error);
    document.getElementById('response-content').textContent = '请求失败，请稍后重试';
  });

四、部署到Heroku的具体步骤 #

假设你已经安装了Heroku CLI，并且注册了Heroku账号：

1. 初始化Git仓库（如果还没做的话）：

git init
git add .
git commit -m "初始化全栈应用项目"

2. 登录Heroku：

heroku login

按提示在浏览器里完成登录即可。
3. 创建Heroku应用：

heroku create  # 不填应用名的话，Heroku会自动分配一个随机名称；也可以自定义，比如heroku create my-awesome-app

4. 推送代码到Heroku：

git push heroku main

Heroku会自动安装依赖、启动你的服务。
5. 打开部署好的应用：

heroku open

这时候你就能看到前端页面，并且AJAX请求能正常和后端交互了。

几个关键注意事项 #

• 端口问题：绝对不能硬编码端口号，一定要用process.env.PORT，因为Heroku会动态分配端口，硬编码会导致服务启动失败。
• 静态资源路径：确保前端文件都放在public目录，并且服务端正确配置了express.static('public')，否则前端页面会无法访问。
• 日志排查：如果部署后出现问题，用heroku logs --tail命令查看实时日志，能快速定位错误（比如依赖缺失、接口报错等）。
• 环境变量：如果有敏感信息（比如API密钥），不要硬编码到代码里，用Heroku的环境变量管理：heroku config:set KEY=VALUE，然后在代码里通过process.env.KEY获取。

内容的提问来源于stack exchange，提问作者Vishal-L