Wie verwende ich eine einzelne .env-Datei für eine Full-Stack-React + Node-Anwendung?
P粉983021177
P粉983021177 2023-09-08 20:36:08
0
1
778

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?

P粉983021177
P粉983021177

Antworte allen(1)
P粉203648742

我找到了一个混乱的解决方案,也许有人可以建议一些更干净的解决方案。

  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,
    }
  })
}
  1. 我还在文件中添加了 envDir 属性(如上所示),以将 Vite/React 配置为从根目录而不是客户端目录读取环境变量。

  2. 现在,在我的 React 项目中,我可以使用环境变量,如下所示:import.meta.env.VITE_SERVER_PORT

  3. 要在我的 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}`);
})
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage