如何將單一 .env 檔案用於全端 React + Node 應用程式？

Question

我正在使用 React 和 Node 建立我的第一個全端應用程式。該專案有一個根目錄，其中有一個客戶端資料夾（用於 React 子專案）和一個伺服器資料夾（用於 Node 子專案）。我最近將React專案從create-react-app遷移到了Vite。

我希望前端和後端都能夠從整個專案根目錄中的單一 .env 檔案讀取伺服器連接埠、客戶端連接埠和基本 URL（現在是 localhost），以避免對這些進行硬編碼值。

客戶端和伺服器有兩個單獨的 .env 檔案似乎很簡單，因為 Vite 可以從客戶端目錄中的 .env 檔案讀取，而 Node 可以從伺服器目錄中的 .env 檔案讀取。 < /p>

如何讓專案能夠使用根目錄中的一個 .env 檔案？使用一個 .env 檔案而不是兩個是一種好的/標準做法嗎？

Answer 1

我找到了一個混亂的解決方案，也許有人可以建議一些更乾淨的解決方案。

1. 為了在 vite.config 檔案中動態設定端口，我編寫了以下程式碼：

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, path.resolve(__dirname, "../")) };
  return defineConfig({
    plugins: [react()],
    envDir: "../",
    server: {
      port: process.env.VITE_CLIENT_PORT,
    }
  })
}

2. 我還在檔案中新增了 envDir 屬性（如上所示），以將 Vite/React 配置為從根目錄而不是客戶端目錄讀取環境變數。

3. 現在，在我的 React 專案中，我可以使用環境變量，如下所示：import.meta.env.VITE_SERVER_PORT

4. 要在我的 Node 專案中使用 env 變量，我可以像這樣使用 dotenv （同時也配置 .env 路徑）：

const express = require('express');
require('dotenv').config({ path: '../.env' });
const app = express();

app.listen(process.env.VITE_SERVER_PORT, () => {
    console.log(`Server running on port ${process.env.VITE_SERVER_PORT}`);
})