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 bahagian hadapan dan bahagian belakang dapat membaca port pelayan, port klien dan URL asas (yang merupakan localhost buat masa ini) daripada satu fail .env dalam keseluruhan akar projek untuk mengelakkan nilai pengekodan keras untuk ini.

Mempunyai dua fail .env berasingan untuk klien dan pelayan nampaknya mudah kerana Vite boleh membaca daripada fail .env dalam direktori klien dan Node boleh membaca daripada fail .env dalam direktori pelayan. < /p>

Bagaimana untuk membolehkan projek menggunakan fail .env dalam direktori akar? Adakah amalan yang baik/standard untuk menggunakan satu fail .env dan bukannya dua?

Answer 1

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

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

2. 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.

3. Kini, dalam projek React saya, saya boleh menggunakan pembolehubah persekitaran seperti ini: import.meta.env.VITE_SERVER_PORT

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