저는 React와 Node.js를 사용하여 첫 번째 풀 스택 애플리케이션을 구축하고 있습니다. 프로젝트에는 클라이언트 폴더(React 하위 프로젝트용)와 서버 폴더(Node 하위 프로젝트용)가 있는 루트 디렉터리가 있습니다. 최근에 내 React 프로젝트를 create-react-app에서 Vite로 마이그레이션했습니다.
프런트엔드와 백엔드 모두 전체 프로젝트 루트에 있는 단일 .env 파일에서 서버 포트, 클라이언트 포트 및 기본 URL(현재는 localhost)을 읽을 수 있도록 하여 이에 대한 값을 하드코딩하지 않도록 하고 싶습니다.
Vite는 클라이언트 디렉터리의 .env 파일에서 읽을 수 있고 Node는 서버 디렉터리의 .env 파일에서 읽을 수 있으므로 클라이언트와 서버에 대해 두 개의 별도 .env 파일을 갖는 것이 간단해 보입니다. < /p>
프로젝트가 루트 디렉터리의 .env 파일을 사용하도록 설정하는 방법은 무엇입니까? 두 개 대신 하나의 .env 파일을 사용하는 것이 좋은/표준 관행입니까?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
엉뚱한 해결책을 찾았습니다. 누군가가 좀 더 깔끔한 해결책을 제안할 수도 있습니다.
- vite.config 파일에서 포트를 동적으로 설정하기 위해 다음 코드를 작성했습니다.
으아악-
-
-
으아악또한 클라이언트 디렉토리 대신 루트 디렉토리에서 환경 변수를 읽도록 Vite/React를 구성하기 위해 파일(위에 표시됨)에
envDir속성을 추가했습니다.이제 React 프로젝트에서 다음과 같은 환경 변수를 사용할 수 있습니다.
import.meta.env.VITE_SERVER_PORTNode 프로젝트에서 env 변수를 사용하려면 다음과 같이 dotenv를 사용합니다(.env 경로도 구성하면서):