我有一个应用程序，我们称之为derpshow，它由两个存储库组成，一个用于前端，一个用于后端。
我想使用 Heroku 部署这些，最好在同一个域上。我还想分别为这两个部分使用管道，每个部分都有一个暂存和生产环境。
是否可以让两个应用程序在同一个域上运行，以便前端可以在/api/* 上调用后端？另一种选择是在api.derpshow.com 上提供后端服务，在app.derpshow.com 上提供前端服务，但这会使安全性有些复杂。
这方面的最佳做法是什么？前端只是静态文件，所以它甚至可以从 S3 或类似的服务，但我仍然需要暂存和生产环境以及自动测试等等。
非常感谢任何建议！
【问题讨论】：
标签： heroku deployment
只想贡献我最近所做的事情。我有一个带 Express 后端的 NodeJS 和一个普通的旧 Bootstrap/vanilla 前端（仅使用 XMLHttpRequest 进行通信）。要连接这两者，您可以简单地告诉 express 提供静态文件（即向 /index.html、/img/pic1.png 提供请求）等。
例如，要告诉 express 提供目录 test_site1 中的资产，只需这样做：
app.use(express.static('<any-directory>/test_site1'));
非常感谢这篇文章的想法：https://www.fullstackreact.com/articles/deploying-a-react-app-with-a-server/
请注意，所有这些答案似乎都是合并代码以由一个整体服务器提供服务的变体。
Jozef 的答案似乎是在一切（前端和后端）之上添加一个完整的 nginx 服务器来反向代理请求。
我的回答是让您的后端服务器处理前端请求；我相信还有一种方法可以让前端服务器为后端请求提供服务。
【讨论】：
xhttp.open('GET', 'http://localhost:8080/domainfinder/domain/' + dataHere, true);你如何在你的前端设置端口和主机以匹配快递上的那个？这样他们就可以正确设置 heroku
对于您要尝试的内容，您必须使用网络服务器来提供静态内容并提供对保存您应用的容器（gunicorn、tomcat 等）的访问。这也是最佳做法。
假设您使用 nginx 作为网络服务器，因为它更容易设置。 nginx 配置文件看起来像这样
# Server definition for project A
server {
listen 80;
server_name derpshow.com www.derpshow.com;
location / {
# Proxy to gUnicorn.
proxy_pass http://127.0.0.1:<projectA port>;
# etc...
}
}
# Server definition for project B
server {
listen 80;
server_name api.derpshow.com www.api.derpshow.com;
location / {
# Proxy to gUnicorn on a different port.
proxy_pass http://127.0.0.1:<projectBg port>;
allow 127.0.0.1;
deny all;
# etc...
}
}
就是这样。
旧答案：尝试使用nginx-buildpack，它允许您在 Heroku 上的应用服务器前运行 NGINX。然后，您需要在不同的端口上运行您的应用程序，并将一个端口设置为 api.derpshow.com，另一个端口设置为 app.derpshow.com，然后您可以限制仅从 localhost 调用 api.derpshow.com。
【讨论】：