フルスタック React + Node アプリケーションに単一の .env ファイルを使用するにはどうすればよいですか?

Question

私は React と Node を使用して最初のフルスタック アプリケーションを構築しています。プロジェクトには、クライアント フォルダー (React サブプロジェクト用) とサーバー フォルダー (Node サブプロジェクト用) を含むルート ディレクトリがあります。最近、React プロジェクトを create-react-app から Vite に移行しました。

フロントエンドとバックエンドの両方で、サーバー ポート、クライアント ポート、およびベース URL (現時点では localhost) をプロジェクト ルート全体の単一の .env ファイルから読み取れるようにして、これらの値のハードコーディングを回避したいと考えています。 。

Vite はクライアント ディレクトリの .env ファイルから読み取ることができ、Node はサーバー ディレクトリの .env ファイルから読み取ることができるため、クライアントとサーバーに 2 つの別個の .env ファイルを用意することは簡単に思えます。 < /p>

プロジェクトがルート ディレクトリにある .env ファイルを使用できるようにするにはどうすればよいですか? 2 つの .env ファイルではなく 1 つの .env ファイルを使用するのが良い/標準的な方法ですか?

Answer 1

厄介な解決策を見つけました。おそらく誰かがよりクリーンな解決策を提案してくれるでしょう。

1. vite.config ファイルでポートを動的に設定するために、次のコードを作成しました。
リーリー

2. また、ファイル (上記) に

   envDir 属性を追加して、クライアント ディレクトリではなくルート ディレクトリから環境変数を読み取るように Vite/React を設定しました。

3. これで、私の React プロジェクトでは、次のように環境変数を使用できるようになりました:

   import.meta.env.VITE_SERVER_PORT

4. Node プロジェクトで環境変数を使用するには、次のように dotenv を使用します (同時に .env パスも設定します):

リーリー