.env 파일을 선택하지 않고 리액트 앱을 생성하시겠습니까?

.env 파일을 선택하지 않고 리액트 앱을 생성하시겠습니까?

앱을 부트스트랩하기 위해 리액트 앱을 사용하고 있습니다.

개를 .env 파 files.env.development ★★★★★★★★★★★★★★★★★」.env.production★★★★★★★★★★★★★★★★★★.

★★★.env.development에는 다음이 포함됩니다.

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

using using 를 사용하여 앱을 실행할 때react-scripts start 콘솔 출력 " " " "process.env

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

여러 가지 시도를 해봤지만 개발 파일에서 검증 가능한 파일을 찾을 수 없습니다. 제가 뭘 잘못하고 있는 걸까요?

다이렉트리 구조는 다음과 같습니다.

/.env.development
/src/index.js

패키지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

앱 리액트 앱 앞에 프리픽스를 .REACT_APP_예:

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

** .env 파일이 src 폴더가 아닌 루트 디렉토리에 있는지 확인합니다.

커스텀 환경변수 추가에 관한 CRA 문서:

주의: 커스텀 환경변수는 다음과 같이 작성해야 합니다.REACT_APP_를 제외한 NODE_ENV는, 키가 , 됩니다.

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

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

출처: Github.

음음음음과 같은 여러 .env.development .env.production

dotenv-cli 패키지 사용

.env.development ★★★★★★★★★★★★★★★★★」.env.production folder (프로젝트 루트 폴더)

그리고 당신의 소포.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 

저도 같은 문제가 있었습니다만, JS가 아닌 YAML 형식의 .env 파일을 가지고 있었기 때문입니다.

그랬다.

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

하지만 그것은 필요했습니다.

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

위의 모든 답변을 적용했는데 작동하지 않는 사용자는 npm 터미널을 재시작하고 라이브 서버를 중지한 후 다시 실행하면 작동하기 때문에 작동합니다.

env-cmd에 대해서VMois가 gitHub에 올린 친절한 게시물에 따르면 env-cmd는 갱신되었습니다(writing 현재 버전 9.0.1). 환경변수는 React 프로젝트에서 다음과 같이 동작합니다.

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

당신의 소포 안에.json 파일.

1- .env 파일이 리액트 앱 루트 디렉토리에 기반하는지 확인합니다.

2- 리액트 앱의 경우 변수 이름 앞에 RECT_APP_를 붙여야 합니다.예: RECT_APP_API_URL

3-kill 서버와 npm은 .env 파일 수정 후 다시 시작합니다.

이를 위해 env-cmd 모듈이 있습니다.npm 경유로 설치npm i env-cmd 후 당신의 그 your package.jsonscripts★★★★

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

프로젝트 루트에서는 env 변수는 같지만 값이 다른 파일을 2개 작성해야 합니다.

.env.development
.env.production

그리고 나서 그들을 공공장소에서 제외시켜라. 당신의 것 your your your .gitignore 추가: file 2행추가:

.env.development
.env.production

따라서 이는 dev 및 prod에 다른 env 변수를 사용하는 적절한 방법입니다.

<고객명> 님의 중.envbackend.frontend "백엔드"입니다.

• 파일을 수정할 때마다 응용 프로그램에서 변경 내용을 적용하려면 해당 서버를 재시작해야 합니다.
• 에서는 변경 수 ..envfilename을 클릭합니다.

경우,.env하지만, 「」는 동작합니다..env.development ★★★★★★★★★★★★★★★★★」.env.production말고 주세요..env 그런지는 난 왜 그랬는지 모르겠지만 이건 나한테 효과가 있어.

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

레퍼런스: https://create-react-app.dev/docs/adding-custom-environment-variables

그 문서는 혼란을 일으킵니다.

접두사를 .REACT_APP_.부러워하다

또한 빌드 단계에서 .env 콘텐츠 변경이 로드되었기 때문에 테스트/개발/프로드 서버를 재시작해야 합니다.

또한 env-file의 API 키 뒤에 세미콜론을 두지 마십시오.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

그래야 한다

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

그것은 나의 실수였다.

때undefined하고, 「」으로 재기동합니다.npm start명령어를 입력합니다.

코드 VS 코드 '''는.env.localenv 파일은 자동 소싱되지만 프로젝트 전체에서 MY_ENV_VAR를 검색할 때 검색 결과에서 자동으로 무시됩니다(기본적으로 git이 무시되기 때문일 수 있습니다).은, 「」가 있으면, 「」가 있는 을 의미합니다.MY_ENV_VAR= 안에서.env.local나처럼 그걸 잊어버리면 물건들이 부서지고 15분 동안 혼란스러워 할 거야

내 IDE가 Import를 추가했다는 것을 깨닫기 전까지 오랜 시간 동안 힘들었습니다.

import * as process from "process";

제거만 하면 됩니다. 그런 경우에도 괜찮습니다.

「 」를한 후.env display, "파일"

• 응용 프로그램 재시작
• 서버를 종료하다
• 려려를 npm start 하다

그리고 효과가 있을 것이다

App.js.에서 .env 변수에 접속할 수 없는 것과 같은 문제가 있었습니다.또한 create.env 파일을 사용하여 문제를 해결했습니다.

제 경우 다른 OS에서 파일을 복사하여 ubuntu 시스템에서 사용했기 때문에 sudo touch .env를 실행한 후 변수를 추가하고 앱을 다시 시작하면 됩니다.

process.env를 추가하지 않았습니다.

이렇게 생겼어요.

const domain = process.env.REACT_APP_AUTH0_DOMAIN;

첫 번째 단계:

.env.local 파일에 RECT_APP_your_를 추가합니다.API_key는 다음과 같습니다.

두 번째 단계:

구성 파일 추가${process.env.REACT_APP_Your_API_key}

세 번째 단계:

React App을 재시작한 후 동작 여부를 테스트해야 합니다.

주로, 나는 마지막 단계를 잊는다.

위의 솔루션 중 어느 것도 효과가 없는 경우는, 다음의 잠재적인 솔루션을 시험해 주세요.

1. 모든 것을 확인합니다.import정의된 환경변수를 필요로 하는 파일 내의 스테이트먼트가 로컬프로젝트로부터 Import 되고 있습니다(VSCode가 잘못 완료되어 있는 것은 아닙니다).import이 방법으로 설명)

2. 현재 터미널 인스턴스를 종료하고 새 인스턴스에서 앱을 실행해 보십시오.

나는 파일 이름을 짓는 바보 같은 실수를 했다.secret.env왜냐하면 Node.js에서는 항상 그렇게 했으니까요.이름 변경 후.env, 단말기의 재기동 및 실행npm start다시 말하지만 모든 게 잘 풀렸다

나 역시 아무런 가치도 얻지 못했습니다.어떤 이유에서인지 환경파일은 dev.env, qa.env 등이어야 한다고 생각했습니다.사실 그냥 .env에요.바로 그거야.혹시 다른 사람이 이런 실수를 할까 봐

create-react는 핫 새로고침 기능 .env 파일은 Javascript가 아니기 때문에 지원되지 않습니다.따라서 env 파일을 변경할 때는 반드시 서버를 수동으로 기동하여 새로운 변경의 효과를 확인하십시오.

제 경우는, 서버를 수동으로 재기동하면 정상적으로 동작했습니다.

저는 env-cmd와 그 이후를 패키지에 설치하는 것이 효과가 있었습니다.JSON은 다음 코드 행을 추가합니다.

"scripts": {
"start": "env-cmd -f .env.development react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

}

최신 react-scripts(3.2.0)에서는 간단한 설명입니다.

PORT=4000
BROWSER=none

루트 폴더에 있어야 하는 .env 또는 .env.development 파일(.. 등)에 저장해야 합니다.

RECT_APP 프리픽스에서는 동작하지 않습니다(docs는 오래된 것 같습니다).npm 패키지는 필요 없습니다(react-script에는 dotenv 6.2.0이 이미 포함되어 있습니다).

언급URL : https://stackoverflow.com/questions/48378337/create-react-app-not-picking-up-env-files