전체 스택 React + Node 애플리케이션에 단일 .env 파일을 사용하는 방법은 무엇입니까?

Question

저는 React와 Node.js를 사용하여 첫 번째 풀 스택 애플리케이션을 구축하고 있습니다. 프로젝트에는 클라이언트 폴더(React 하위 프로젝트용)와 서버 폴더(Node 하위 프로젝트용)가 있는 루트 디렉터리가 있습니다. 최근에 내 React 프로젝트를 create-react-app에서 Vite로 마이그레이션했습니다.

프런트엔드와 백엔드 모두 전체 프로젝트 루트에 있는 단일 .env 파일에서 서버 포트, 클라이언트 포트 및 기본 URL(현재는 localhost)을 읽을 수 있도록 하여 이에 대한 값을 하드코딩하지 않도록 하고 싶습니다.

Vite는 클라이언트 디렉터리의 .env 파일에서 읽을 수 있고 Node는 서버 디렉터리의 .env 파일에서 읽을 수 있으므로 클라이언트와 서버에 대해 두 개의 별도 .env 파일을 갖는 것이 간단해 보입니다. < /p>

프로젝트가 루트 디렉터리의 .env 파일을 사용하도록 설정하는 방법은 무엇입니까? 두 개 대신 하나의 .env 파일을 사용하는 것이 좋은/표준 관행입니까?

Answer 1

엉뚱한 해결책을 찾았습니다. 누군가가 좀 더 깔끔한 해결책을 제안할 수도 있습니다.

1. vite.config 파일에서 포트를 동적으로 설정하기 위해 다음 코드를 작성했습니다.

으아악

2. 또한 클라이언트 디렉토리 대신 루트 디렉토리에서 환경 변수를 읽도록 Vite/React를 구성하기 위해 파일(위에 표시됨)에 envDir 속성을 추가했습니다.

3. 이제 React 프로젝트에서 다음과 같은 환경 변수를 사용할 수 있습니다. import.meta.env.VITE_SERVER_PORT

4. Node 프로젝트에서 env 변수를 사용하려면 다음과 같이 dotenv를 사용합니다(.env 경로도 구성하면서):

으아악