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


117

내 앱을 부트 스트랩하기 위해 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


package.json파일 을 게시 할 수 있습니까 ?
Steve Chamaillard

2
process.env백엔드 (노드 또는 사용중인 모든 항목)가 읽을 수있는 것입니다. 프런트 엔드 번들은 process.env브라우저에서 실행되는 것이 무엇인지 알지 못합니다 . 번들로 묶을 때 번들로 전달하도록 webpack을 구성하거나 전역 변수로 렌더링하는 인덱스 파일의 백엔드에서 전달할 수 있습니다.
Raul Rene

아마도 그렇지 않을 수도 있지만 몇 번이 문제를 발견했으며 내 컴퓨터가 많은 메모리를 사용할 때 .env 변수가로드되지 않는다는 것을 발견했습니다. 우분투 16.4를 사용합니다. react-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callback그래도 보이지 않으면 터미널에서 변수를로드 해보십시오. 메모리 사용량을 줄이기 위해 시스템을 다시 시작하고 일반적으로 다시 시도하면 문제가 해결됩니다.
Femi Oni

@RaulRene이 더 설정에 대한 필요가 없습니다에 대한 핸들 상자 밖으로 .env의 생성 - - 응용 프로그램의 반응
페미 오니

답변:


245

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

예:

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

여기에서 자세한 정보보기


9
이것은 매우 중요합니다. 나는 그것을 놓친하지만 그래 그것은 접두사 작동하지 않습니다
페미 오니를

8
이것은 내가 사용할 때 작동 .env하지만 .env.development또는 .env.production?
shenku

@shenku은 당신이에서만 작동 이유를 찾기 위해 관리나요 .env아니라 함께 .env.developmentenv.production
콘스탄틴 시릴

프런트 엔드 작업을 수행하는 개발자의 경우 브라우저에 NodeJ가 없기 때문에 웹팩이 필요합니다 ... meh
Stephane 19

2
감사합니다. 나는 몇 시간 동안 답을 찾고 있었다.
Fahmid

62

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


1
문서를 읽는 동안 루트 디렉토리에 있어야한다는 것을 알았지 만 여전히 src 폴더에 .env 파일을 추가 할 수있었습니다 ... (facepalm) 답변 해 주셔서 감사합니다.
Corné

나는 내부에 src 폴더가 있지만, 버전 3.4.3에서 루트 폴더로 이동 한 후 일을 할 때 작동하지 않았다, 같은 문제가 있었다
비 노드 쿠마르

네 이것이 문제입니다. 감사합니다
akash maurya

29

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

출처 : Github


21

다음과 같은 여러 환경을 사용하려면 .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 

이것은 dotenv또는 dotenv-cli?
Drazen Bjelovuk

2
환경에 따라 다른 .env 파일을 갖는 것은 이제 create-react-app : create-react-app docs에 의해 즉시 지원됩니다 . dotenv를 명시 적으로 사용할 필요가 없습니다 (create-react-app은 실제로 환경 변수를 처리하기 위해 백그라운드에서 사용합니다)
Marnix.hoh

@MariaJeysinghAnbu, 그 구문이 속한 dotenv-cli하지 dotenv: npmjs.com/package/dotenv-cli
AMS777

내가 사용 AMS777 @ dotenv의 NPM을하지 dotenv-CLI
마리아 Jeysingh ANBU

@MariaJeysinghAnbu, 사용하고 싶었지만 dotenv오류가 발생했습니다. 설명서를 확인했지만 -e명령 줄에 대한 옵션을 찾지 못했습니다 . 그러나 dotenv-cli문서 에서 찾았습니다 . 그것이 내가 말한 이유입니다. 나는 드디어을 사용 하고 있으며 동시에 설치 하고 설치 env-cmd하지 않아 혼란을 초래할 수 있습니다. dotenvdotenv-cli
AMS777

10

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의 파일.


1
감사합니다.이 댓글이 저를 구했습니다. create-react-app 문서는 이것을 업데이트하지 않았기 때문에 무엇이 잘못되었는지 알아 내고있었습니다
CKA

1
당신은 나를 여기에서 완전히 구했습니다. 나는이 일을 돌고 있었다. 감사합니다
MDiesel 19-09-18

누군가가이 사람에게 메달을 줄
Rittesh PV

7

이를 위해 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에 대해 서로 다른 환경 변수를 사용하는 적절한 방법입니다.


다음과 같은 전체 경로를 사용하십시오. ./node_modules/.bin/env-cmd
Nastro

그러나 나는 내 대답에서 접근 방식을 권장하지 않습니다. 지금은 반응이 .env의 작업을하려면 정비사에서 빌드를 제공하는 알
NASTRO

6

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

그것은

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

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

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

간단하면서도 좋은 곳. 나는 똑같이했고 나무를위한 나무를 볼 수 없었다. 감사합니다
Andy Allison 19

감사합니다! 나는 모든 일이 약간의 오류 : 몰래 검색 한
치아 Yongkang의

3

경우 .env파일이 작동하지만 .env.development.env.production, 다음 빈 생성하지 않는 .env사람들이 함께 파일을. 이유는 모르겠지만 이것은 나를 위해 작동합니다.


0

그리고 env 파일에서 API 키 뒤에 세미콜론이없는 것을 기억하십시오.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

해야한다

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

그게 내 실수 였어


-3

최신 반응 스크립트 (3.2.0)에서는 다음과 같이 간단합니다.

PORT=4000
BROWSER=none

.env 또는 .env.development 파일 (..etc)에서 루트 폴더에 있어야합니다.

REACT_APP 접두사와 함께 작동하지 않으며 (문서는 구식입니다) 추가 npm 패키지가 필요하지 않습니다 (반응 스크립트에는 이미 dotenv 6.2.0이 포함되어 있습니다)


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.