異なる環境のReact Webpackアプリで変数をパラメータ化する方法は？

Question

私はcreate-react-appで作成されたReact Webアプリケーションに取り組んでいて、それを展開する準備が整いました。

私の開発環境（localhost：{api-port}）上で実行されているapiインスタンスを開発用に使用していますが、デプロイされたアプリケーションの場合、これはサーバーapiインスタンス（api.myapp.com） ）。

現在のホストは私のネットワークコンポーネントでちょうど変数です：

const hostname = 'localhost:9876' 

私は生産のフロントエンドで提供されます静的ファイルを生成するためにWebPACKのを使用する予定、と私は続けていきたいと考えてを使用して開発し、create-react-appによって設定する。

私のプロジェクトを設定して、私がdevサーバを稼働しているか、稼働中のビルドを使っているかに基づいてホストを自動的に正しい値に設定できるのはどうですか？

Answer 1

の詳細を読むことができ、共通の解決策は、このようなprocess.env.NODE_ENVに対してチェックすることです：

const hostname = process.env.NODE_ENV === "development" ? "localhost:9876" : "localhost:6789"; 

あなたはDefinePluginを使用して、WebPACKのコンフィギュレーションファイルに存在するように環境変数を強制する必要があるかもしれませんこのように：

plugins: [ 
    new webpack.DefinePlugin({ 
    "process.env": { 
     NODE_ENV:JSON.stringify(process.env.NODE_ENV || "development") 
    } 
    }) 
] 

---

代替ソリューションは、を使用するのが良いかもしれませんパッケージを使用し、構成パラメータとしてホスト名文字列を指定します。 configは現在のNODE_ENVに基づいてファイルから設定を継承します。まず、default.jsonファイルの設定を使用してから、環境に応じてdevelopment.jsonまたはproduction.jsonで設定を上書きします。

設定ファイルを出力ディレクトリにコピーするには、CopyWebpackPluginを使用する必要があります。

Answer 2

これを実現できる方法はたくさんあります。これらの解決策の1つは、ウェブパックのDefinePluginを使用することです。あなたが使用できるグローバル変数どこでもあなたのコードベースで利用可能なAPI_HOSTを、作成し

new webpack.DefinePlugin({ 
    API_HOST: process.env.NODE_ENV === 'production' 
    ? JSON.stringify('localhost:8080') 
    : JSON.stringify('api.com') 
}), 

：WebPACKの構成で、あなたのプラグインのセクションでは、このようなものを追加します。あなたがここにDefinePluginhttps://webpack.js.org/plugins/define-plugin/

Answer 3

アプリの完全なURLを呼び出すのではなく、apiサーバーにリクエストを送信するときに相対パスを使用できます。

、あなたのpackage.jsonファイルにプロキシプロパティを追加することができ、あなたの開発のために：

{ 
... 
"proxy": { 
    "/api/*": { 
     "target" :"http://localhost:9876" 
    } 
} 
} 

あなたは/apiで始まるすべての要求がhttp://localhost:9876/apiにリダイレクトされます作るたびので、これは単なる開発中ですが、プロダクションでは、/apiの接頭辞を要求すると、リダイレクトされません。プロキシは、create-react-appというデベロッパーサーバーでのみ利用可能であるため、通常は配信されます。