如何在Heroku及本地切换Angular+Node.js应用的环境URL？

没问题，咱们一步步来搞定这个部署需求——既要本地能正常测试，又要Heroku上自动切换到生产环境配置，核心就是把启动脚本和环境切换逻辑配置到位：

1. 确认Angular生产环境配置已到位 #

你已经在environment.ts（本地开发）和environment.prod.ts（生产）里配置了不同的API URL，这步很关键。记得environment.prod.ts里要把production设为true，并且API URL指向Heroku上的后端地址，比如：

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://your-heroku-app-name.herokuapp.com/api'
};

Angular CLI默认会在执行ng build --prod时自动使用这个生产环境配置，不用额外改构建命令。

2. 配置Heroku的启动与构建脚本 #

Heroku部署时会读取你package.json里的脚本命令，咱们需要设置三个关键脚本：

// package.json
"scripts": {
  "start": "node server.js", // Heroku启动时默认执行的命令，用来启动Node后端
  "build": "ng build --prod", // 构建Angular生产版本
  "heroku-postbuild": "npm install -g @angular/cli && npm run build" // Heroku部署阶段自动执行的构建脚本
}

• heroku-postbuild：这是Heroku的特殊脚本，部署时会自动触发。因为Heroku服务器默认没装Angular CLI，所以先全局安装它，再执行生产构建，把Angular打包到dist/文件夹里。
• start：Heroku启动应用时会默认执行这个命令，用来启动你的Node.js后端服务。

3. 让Node.js后端正确托管Angular静态文件 #

构建好的Angular静态文件都在dist/[你的Angular项目名]文件夹里，你需要在server.js里加一段代码，让Express（假设你用Express做后端）托管这些静态资源，同时处理单页应用的路由：

// server.js
const express = require('express');
const path = require('path');
const app = express();

// 先放你的API路由代码...
// app.use('/api', yourApiRoutes);

// 托管Angular静态文件
app.use(express.static(path.join(__dirname, 'dist/your-angular-app-name')));

// 所有非API的请求都返回Angular的index.html（处理SPA路由）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-angular-app-name/index.html'));
});

// 监听端口，Heroku会自动提供PORT环境变量
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

记得把your-angular-app-name替换成你实际的Angular项目名称（就是dist文件夹下的子文件夹名）。

4. 本地测试生产环境的方法（可选） #

如果你想在本地模拟Heroku的运行状态，只需要：

1. 执行npm run build构建生产版本的Angular应用
2. 执行node server.js启动后端服务
3. 访问http://localhost:3000，此时应用会使用environment.prod.ts里的API URL，和Heroku上的运行逻辑完全一致。

5. 额外提醒 #

• 确保你的.gitignore文件里没有包含dist/文件夹，否则Heroku会直接用你本地的构建文件，而不是重新构建生产版本。
• 如果之后需要修改Heroku上的API URL，直接修改environment.prod.ts后重新推送代码即可；如果想动态设置，可以用Heroku的环境变量（比如heroku config:set API_URL=https://new-url.com/api），然后在environment.prod.ts里读取这个变量：apiUrl: process.env.API_URL || 'fallback-url'，不过要注意Angular构建时会把变量值打包进去，所以修改环境变量后需要重新部署。

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