は/ノードに反応：現在の実行時環境

Question

の動的ホストおよびポート（クライアント＆サーバー）は^ 0.14.0

を反応させるのノード^ 5.0.0

エクスプレス^ 4.0.0

I Reactアプリケーションを開発していて、クライアントのホストとポートをハードコードすることができなくなりました。

原因クラウドにサーバーをデプロイするか、ローカルで実行するかを切り替えることになるので、クライアントアプリケーションが動的なホストとポートを決定してサーバーにHTTP要求を行う方法を作成する必要があります。サーバーの正しいエンドポイント（ローカルまたはWeb上）。

すべてのリクエストはサーバーと同じ原点になっているので、これを設定するには2つの方法があります。

1）（簡単な方法）クライアント側：クライアントが初期化するとすぐに、または各要求の前に「場所」を取得します。

2）サーバー側：サーバーの設定を使用してホストとポートを決定し、サーバー側のレンダリング中にそれらを初期状態の一部として送信します。

第1の方法は、動作するものをハックするのが最も簡単な方法ですが、サーバーを展開し、異なる環境間で切り替えるという経験があれば、2番目の方法でより健全な方法を見つけることができます。

私は経験豊富なチームがオンラインこれを引き抜くために、多くの生産レベルの例なく、共通の規則を知って理解する - 私は¯\_(ツ)_/¯

Answer 1

サーバー側のようになる：WebPACKのを使用して

、特にwebpack define plugin、あなたは注入することができあなたのアプリケーションをバンドルするときは、右のホスト&ポート。右&ホストはpassing environment dependent variablesから来ます。そして、1つまたは別のものを選択することは、スクリプトの引数（例えば、production）に依存します。それは私のために働きます。私のスタックは以下の通りです：

私のニーズ（生産、雲、ローカル、...）に応じて異なるポート&ホストで設定ファイルを作成します。 rcを使用してインポートします。私のjavascriptのコードで

.... 
plugins: [ 
    new dwebpack.DefinePlugin({ 
    __LOCATION__: production ? rcConfig.location1 : rcConfig.location2 
    }) 
], 
.... 

は、その後、私は書くことができます__LOCATION__：私のWebPACKの設定にインポートすると は、私はWebPACKのコンフィグ内のノードを持っていた

<a href={__LOCATION__+"/api/todo"}>see todo</a> 

webpackingとき、それはその値によって置き換えられます

希望：