Bagaimana untuk menggunakan fail .env tunggal untuk aplikasi React + Node timbunan penuh?

Question

Saya sedang membina aplikasi tindanan penuh pertama saya menggunakan React dan Node. Projek ini mempunyai direktori akar dengan folder klien (untuk subprojek React) dan folder pelayan (untuk subprojek Node). Saya baru-baru ini telah memindahkan projek React saya daripada create-react-app ke Vite. Saya mahu kedua-dua frontend dan backend dapat membaca port pelayan, port klien dan URL asas (yang localhost buat masa ini) daripada satu fail .env dalam keseluruhan akar projek untuk mengelakkan nilai pengekodan keras untuk ini. pelanggan dan

P粉203648742 · Answer

Saya menemui penyelesaian yang tidak kemas, mungkin seseorang boleh mencadangkan penyelesaian yang lebih bersih.

Untuk menetapkan port secara dinamik dalam fail vite.config, saya menulis kod berikut:

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,
    }
  })
}

Saya juga menambah atribut envDir pada fail (ditunjukkan di atas) untuk mengkonfigurasi Vite/React untuk membaca pembolehubah persekitaran daripada direktori akar dan bukannya direktori klien.
Kini, dalam projek React saya, saya boleh menggunakan pembolehubah persekitaran seperti ini: import.meta.env.VITE_SERVER_PORT
Untuk menggunakan pembolehubah env dalam projek Nod saya, saya menggunakan dotenv seperti ini (sambil mengkonfigurasi laluan .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}`);
})