検索

ホームページ  >  に質問  >  本文

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

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

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

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

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

P粉983021177P粉983021177448日前780

全員に返信(1)返信します

  • P粉203648742

    P粉2036487422023-09-09 14:36:36

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

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

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

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

      import.meta.env.VITE_SERVER_PORT

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

    4. リーリー

      返事
      0
  • キャンセル返事