使用Heroku分离前端和后端

我有一个应用程序，我们称之为derpshow，它由两个存储库组成，一个用于前端，一个用于后端

我想使用Heroku部署这些，最好是在同一个域上。我还希望为这两个部分分别使用管道，每个部分都有一个暂存和生产环境

是否可以让两个应用程序在同一个域上运行，以便前端可以在

/api/*

上调用后端？另一种选择是在

api.derpshow.com

上提供后端服务，在

app.derpshow.com

上提供前端服务，但这会在一定程度上使安全性复杂化

这方面的最佳实践是什么？前端是简单的静态文件，所以它甚至可以从S3或类似的服务，但我仍然需要登台和生产环境以及自动测试等等

---

非常感谢您的建议

对于您正在尝试的内容，您必须使用webserver提供静态内容，并提供对保存应用程序的容器（gunicorn、tomcat等）的访问。这也是最佳实践

Asume您可以使用nginx作为web服务器，因为它更容易设置。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...
    }
}

#项目A的服务器定义
服务器{
听80；
服务器名称：derpshow.com www.derpshow.com；
地点/{
#gUnicorn的代理。
代理通行证http://127.0.0.1:;
#等等。。。
}
}
#项目B的服务器定义
服务器{
听80；
服务器名称api.derpshow.com www.api.derpshow.com；
地点/{
#在不同端口上代理gUnicorn。
代理通行证http://127.0.0.1:;
允许127.0.0.1；
否认一切；
#等等。。。
}
}

就这样

---

旧答案：尝试使用它可以让你在Heroku上的应用服务器前运行NGINX。然后，您需要在不同的端口上运行应用程序，并将一个端口设置为api.derpshow.com，另一个端口设置为app.derpshow.com，然后您可以限制仅从本地主机调用api.derpshow.com。

我只想贡献我最近所做的。我有一个NodeJS w/Express后端和一个普通的Bootstrap/vanilla前端（使用

XMLHttpRequest

进行通信）。要连接这两者，只需告诉express为静态文件提供服务（即为/index.html、/img/pic1.png等提供请求）

例如，要让express为目录test_site1中的资产提供服务，只需执行以下操作：

app.use（express.static）

请注意，所有这些答案似乎都是合并由一个monolith服务器提供服务的代码的变体

Jozef的答案似乎是在所有东西（包括前端和后端）之上添加一个完整的nginx服务器来反转代理请求

我的答案是让你的后端服务器服务于前端请求；我相信也有办法让前端服务器服务于后端请求。
这是一个很好的答案草图，但如果你想要奖金，我希望你能更明确地说明你的指示。另外，既然他要求最佳实践，还有其他ap吗这是可行的方法还是最佳实践真的“使用nginx”？你想用Heroku做什么？前端和后端的技术是什么？是的，但是你如何将信息发送到express server…？？
xhttp.open（'GET'），'http://localhost:8080/domainfinder/domain/“+dataHere，true）
如何在前端设置端口和主机以匹配express上的端口和主机？这样它们就可以在Heroku上正确设置。这些天我在web上工作不太多，但据我所知，这需要做一些配置工作。类似于设置来自Heroku配置的baseUrl。当然，当您在本地测试时，yo你可以使用开发配置，比如localhost和ngrok