使用Heroku分离前端和后端

Question

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

我想使用Heroku部署它们，最好是在相同的域上。我还想为这两个部分单独使用管道，每个部分都有一个登台和生产环境。

有没有可能让两个应用在同一个域上运行，这样前端就可以在/api/*上调用后端？另一种选择是在api.derpshow.com上为后端提供服务，在app.derpshow.com上为前端提供服务，但这在一定程度上会使安全性变得复杂。

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

任何建议都是非常感谢的！

Answer 1

对于您正在尝试的内容，您必须使用webserver来提供静态内容，并提供对容器(gunicorn，tomcat等)的访问。拿着你的应用。这也是最佳实践。

建议您使用nginx作为its服务器，因为它更容易设置。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，它允许你在你的应用服务器前面运行nginx-buildpack。然后，您需要在不同的端口上运行您的应用程序，并将一个端口设置为api.derpshow.com，另一个端口设置为app.derpshow.com，然后您可以限制从本地主机对api.derpshow.com的调用。

Answer 2

只想贡献一下我最近所做的。我有一个带有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服务器来反向代理请求。

我的答案是让你的后端服务器服务于前端请求；我相信也有一种方法可以让前端服务器服务于后端请求。