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

Question

我正在使用React和Node建立我的第一個全端應用程式。這個專案有一個根目錄，其中有一個客戶端資料夾（用於React子專案）和一個伺服器資料夾（用於Node子專案）。我最近將React專案從create-react-app遷移到了Vite。我希望前端和後端都能夠從整個專案根目錄中的單一.env檔案讀取伺服器連接埠、客戶端連接埠和基本URL（現在是localhost），以避免對這些進行硬編碼值。客戶端和

P粉203648742 · Answer

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

為了在 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,
    }
  })
}

我還在檔案中新增了 envDir 屬性（如上所示），以將 Vite/React 配置為從根目錄而不是客戶端目錄讀取環境變數。
現在，在我的 React 專案中，我可以使用環境變量，如下所示：import.meta.env.VITE_SERVER_PORT
要在我的 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}`);
})