フルスタック React + Node アプリケーションに単一の .env ファイルを使用するにはどうすればよいですか?
P粉983021177
P粉983021177 2023-09-08 20:36:08
0
1
640

私は 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粉983021177
P粉983021177

全員に返信 (1)
P粉203648742

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

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

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

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

    import.meta.env.VITE_SERVER_PORT

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

  4. リーリー
いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!