web-dev-qa-db-ja.com

Herokuでフロントエンドとバックエンドを分離する

私は、フロントエンド用とバックエンド用の2つのリポジトリで構成されるアプリケーションをderpshowと呼んでいます。

これらをHerokuを使用して、できれば同じドメインにデプロイしたいと思います。また、ステージング環境と本番環境の両方で、両方の部分に別々にパイプラインを使用したいと思います。

フロントエンドが/api/*でバックエンドを呼び出すことができるように、両方のアプリを同じドメインで実行することは可能ですか？もう1つのオプションは、api.derpshow.comのバックエンドとapp.derpshow.comのフロントエンドにサービスを提供することですが、セキュリティが多少複雑になります。

このためのベストプラクティスは何ですか？フロントエンドは単に静的ファイルであるため、S3などから提供することもできますが、ステージング環境と本番環境、および自動テストなどが必要です。

アドバイスは大歓迎です！

herokudeployment
17
altschuler

あなたがしようとしているものについては、静的コンテンツを提供するためにウェブサーバーを使用し、アプリを保持するコンテナー（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を実行できます。次に、異なるポートでアプリを実行し、1つのポートをapi.derpshow.comに設定し、もう1つをapp.derpshow.comに設定する必要があります。その後、api.derpshow.comへの呼び出しをlocalhostからのみ制限できます。

10
Jozef Dochan

私が最近やったことに貢献したいと思います。 NodeJS w/Expressバックエンドと単純な古いBootstrap/Vanillaフロントエンド（XMLHttpRequestを使用して通信する）がありました。これら2つを接続するには、静的ファイルを提供するようにExpressに指示するだけです（つまり、/ index.html、/ img/pic1.pngへのリクエストを提供します）など。

たとえば、ディレクトリtest_site1のアセットを提供するようにexpressに指示するには、次のようにします。

app.use(express.static('<any-directory>/test_site1'));

この投稿に対するアイデアへの感謝： https://www.fullstackreact.com/articles/deploying-a-react-app-with-a-server/

これらの答えはすべて、1つのモノリスサーバーによって処理されるようにコードをマージするバリエーションであるように見えます。

Jozefの答えは、すべて（フロントエンドとバックエンドの両方）の上にnginxサーバー全体を追加して、プロキシリクエストをリバースすることです。

私の答えは、バックエンドサーバーにフロントエンドリクエストを処理させることです。フロントエンドサーバーにバックエンドリクエストを処理させる方法もあると思います。

2
information_interchange