[reactjs] .env 파일을 선택하지 않는 반응 앱을 만드시겠습니까?

Program / 글쓴이

내 앱을 부트 스트랩하기 위해 create react 앱 을 사용 하고 있습니다.

두 개의 .env파일 .env.development과 .env.production루트를 추가했습니다.

내 .env.development포함 사항 :

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

내 앱을 사용 react-scripts start하여 콘솔을 실행하면 process.env튀어 나옵니다.

{ NODE_ENV: "development", PUBLIC_URL: "" }

나는 다른 것을 시도했지만 내 개발 파일에서 검증을 선택하지 못했습니다. 내가 뭘 잘못하고 있니?!

Directry 구조는 다음과 같습니다.

/.env.development
/src/index.js

Package.json 스크립트는 다음과 같습니다.

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

편집하다:

내 변수에서 @jamcreencia 정확하게 지적 붙여야한다 로 REACT_APP.

편집 2

파일 이름을 지정하면 .env정상적으로 작동하지만 사용 .env.development하거나.end.production

답변

를 사용 하면 변수 이름 create-react-app앞에 접두사를 붙여야 REACT_APP_액세스 할 수 있습니다.

예: 

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

여기에서 자세한 정보보기

답변

.env 파일이 src 폴더가 아닌 루트 디렉토리에 있는지 확인하십시오.

답변

이 같은 문제가 있었다! 해결책은 내 노드 서버에 대한 연결을 닫는 것입니다 (CTRL + C로이 작업을 수행 할 수 있음). 그런 다음 ‘npm run start’로 서버를 다시 시작하면 .env가 제대로 작동합니다.

출처 : Github

답변

다음과 같은 여러 환경을 사용하려면 .env.development .env.production

사용 dotenv-CLI 패키지

프로젝트 루트 폴더 추가 .env.development및 .env.production

및 package.json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
},

그런 다음 환경에 따라 빌드하십시오.

npm run-script build-dev

답변

env-cmd 관련 . VMois의 종류에 따라 GitHub의에 포스트 , ENV-CMD는 당신에 다음과 같이 환경 변수가 작동, (글을 쓰는 등의 버전 9.0.1) 업데이트되었습니다 반작용 프로젝트 :

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

당신에 package.json의 파일.

답변

이를 위해 env-cmd 모듈이 있습니다. npm npm i env-cmd을 통해 다음 섹션 의 package.json파일에 설치 scripts하십시오.

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

프로젝트 루트에서 env 변수는 같지만 값이 다른 두 개의 파일을 만들어야합니다.

.env.development
.env.production

그런 다음 공개에서 제외합니다. 이를 위해 .gitignore파일에 두 줄을 추가 하십시오 .

.env.development
.env.production

따라서 이것은 dev 및 prod에 대해 서로 다른 환경 변수를 사용하는 적절한 방법입니다.

답변

나는 같은 문제가 있었지만 JS 대신 YAML 형식의 .env 파일 이 있었기 때문 입니다.

그것은

REACT_APP_API_PATH: 'https://my.api.path'

그러나 그것은 필요했습니다

REACT_APP_API_PATH = 'https://my.api.path'