如何将单个 .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}`);
})