Nodejs APIをReactJsアプリケーションと同じドメインに統合する方法

Question

MERNアプリケーション、MJO、ReactJ、NodeJについては読んでいますが、MongoDB、ExpressJsそしてNodeJsが相互作用し、ReactJsが独自に動作する方法は、私の質問は簡単です（私は思っています）。

質問：Node、Express、およびMongoを使用してAPIを作成し、Reactによって管理されているAPPを持っている場合は、両方ともサーバーが必要です（Express経由ではわかります）。 Reactアプリを同時に起動します。別のURLが必要ですか？異なるポートを設定する必要がありますか？どのように私はそれらを統合する必要がありますか？

私は本当にたくさん読んでいましたが、ほとんどすべてのチュートリアルはローカルで作成されています（そして、私はPassengerでサーバーで作業しています。そうでなければ）/ MongoかReactだけですが、APIとReactをどのように接続するのか分かりません。それはいくつかの要因に依存し

おかげ

Answer 1

：環境（例えば、開発、生産）、およびサーバーの上にコントロール。開発のために、2つの異なるURLを使用でき、Webpack Dev Serverのようなものを使用できます。通常は、モジュールバンドラを使用します。 Webpack、あなたのリアクションコードの変更を監視する。ただし、サーバーサイドレンダリングを使用すると、これはさらに複雑になります。

通常、クライアント側のアプリケーション用のバンドルファイルは、すでに最適化および縮小されています。 APIを変更できる場合は、新しいエンドポイントで静的にサービスを提供することができます（例：/static/bundle.js）index.htmlファイルからこのエンドポイントをリクエストします。/にアクセスするとExpress.jsサーバーから送信されます。

Reactアプリケーションにルートを設定する必要があるため、サーバーはクライアントアプリケーションルートの処理方法を知る必要があります（たとえば、app.get('/*',() => ...)など、APIエンドポイントと衝突する可能性があります）あなたは可能性：

• 名前空間接頭辞、あなたのAPIエンドポイントを、例えば/api/v1/...
• 場所別のURL、ポートまたはサブドメイン内のAPIこの場合は、あなたが実際に並行して、これらの二つのサーバを実行する必要があるだろうと。 Node.jsには、これをより便利にするヘルパーがあります。例えば、concurrently。

Answer 2

MERNアプリのAPI,、Integrationを引き出します。

私は3つのアプローチ

1）使用foremanを使用しています。これで、ProcfileでAPIとWebクライアントを指定することができます。私はそれを使用しましたhere

2）あなたのAPIを必要とする要求を処理するためにプロキシを使用してください。だから、package.jsonに、あなたは

// package.json 
....... 
....... 
"proxy": "<path to url:[port no if you're developing locally]>" 

（あなたのAPIを実行している必要があります）チェックhereあなたのAPIのURLを指定します。 さらに、APIとReactconcurrentlyを実行するためのスクリプトを追加することもできます。

3）APIとReactアプリケーションをDockerコンテナに設定します。 mern-starterはこれをチェックするのに最適な場所です。

希望すると便利です。