如何在Heroku上同域名部署Express后端与Vue前端应用

针对你需要同一域名根路径部署前端、/api路径部署Express后端的需求，以下是两种符合前后端分离原则的可行方案：

方案1：使用Heroku Edge Routes（官方推荐最优方案） #

这是和Digital Ocean App Platform组件挂载逻辑最接近的原生方案，无需修改业务代码，完全保留前后端独立部署、独立扩容的能力：

• 第一步：将Vue前端项目、Express后端项目分别作为独立应用部署到Heroku，确保两个应用单独访问时功能正常
• 第二步：在Heroku Edge面板中绑定你的自定义域名，配置路由规则：
  • 所有匹配/api/*规则的请求，转发到Express后端应用
  • 其余所有请求转发到Vue前端应用
• 额外优势：可直接开启Heroku Edge的CDN缓存能力，缓存前端静态资源，不需要额外适配CDN配置

方案2：独立Nginx反向代理层 #

如果暂不使用Edge功能，可新增一个Nginx应用作为统一流量入口，三个应用完全独立：

• 部署一个仅包含Nginx的Heroku应用作为入口层，绑定你的自定义域名
• 编辑Nginx配置文件，配置路由规则：

  server {
    listen $PORT;
    # /api路径转发到后端应用
    location /api/ {
      proxy_pass https://你的Express应用Heroku域名/;
      proxy_set_header Host $host;
    }
    # 其余路径转发到前端应用
    location / {
      proxy_pass https://你的Vue应用Heroku域名;
      proxy_set_header Host $host;
    }
  }
  

• 该方案同样支持前后端独立扩缩容，适配第三方CDN配置，只是多了一层反向代理的运维成本

关于Express托管静态资源方案的说明 #

你查询到的将前端构建产物拷贝到Express public目录的方案，仅适合流量较小的小型项目或Demo场景，优点是部署成本最低，缺点就是你提到的职责不分离、无法独立扩容，不适合中大型生产环境使用。

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