Wie verwende ich eine einzelne .env-Datei für eine Full-Stack-React + Node-Anwendung?

Question

Ich erstelle meine erste Full-Stack-Anwendung mit React und Node. Das Projekt verfügt über ein Stammverzeichnis mit einem Client-Ordner (für das React-Unterprojekt) und einem Server-Ordner (für das Node-Unterprojekt). Ich habe kürzlich mein React-Projekt von create-react-app auf Vite migriert.

Ich möchte, dass sowohl das Frontend als auch das Backend den Server-Port, den Client-Port und die Basis-URL (im Moment localhost) aus einer einzigen .env-Datei im gesamten Projektstammverzeichnis lesen können, um eine Hardcodierung der Werte für diese zu vermeiden.

Zwei separate .env-Dateien für Client und Server zu haben, scheint einfach zu sein, da Vite aus der .env-Datei im Client-Verzeichnis und Node aus der .env-Datei im Serververzeichnis lesen kann. < /p>

Wie ermögliche ich einem Projekt die Verwendung einer .env-Datei im Stammverzeichnis? Ist es eine gute/Standardpraxis, eine .env-Datei anstelle von zwei zu verwenden?

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}`);
})