React Project에 .env 파일 추가

github에 커밋 할 때 API 키를 숨기려고하는데 포럼에서 지침, 특히 다음 게시물을 살펴 보았습니다.

create-react-app에서 API 키를 숨기려면 어떻게하나요?

변경하고 실을 다시 시작했습니다. 내가 뭘 잘못하고 있는지 잘 모르겠습니다. .env프로젝트의 루트 (이름 process.env)와 방금 넣은 파일에 파일을 추가했습니다 REACT_APP_API_KEY = 'my-secret-api-key'.

fetchApp.js에서 키를 추가하는 방법이라고 생각 하고 템플릿 리터럴을 사용하지 않는 것을 포함하여 여러 형식을 시도했지만 프로젝트가 여전히 컴파일되지 않습니다.

어떤 도움이라도 대단히 감사합니다.

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

4 단계

1. npm install dotenv --save

2. 다음으로 앱에 다음 줄을 추가합니다.

   require('dotenv').config()

3. 그런 다음 .env응용 프로그램의 루트 디렉터리에 파일을 만들고 변수를 추가합니다.

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

4. 마지막으로 Git에서 무시하고 GitHub에서 끝나지 않도록 파일에 추가 .env합니다 .gitignore.

당신이 사용하는 경우 생성 - 반응 - 응용 프로그램을 다음 만 3, 4 단계하지만 시작하는 마음 변수의 요구에 계속 필요REACT_APP_ 작동하도록합니다.

참조 : https://create-react-app.dev/docs/adding-custom-environment-variables/

참고 - .env의 파일에 변수를 추가 한 후 응용 프로그램 다시 시작해야합니다.

참조-https: //medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

그래서 저는 React를 처음 접했고 그것을 할 방법을 찾았습니다.

이 솔루션에는 추가 패키지가 필요 하지 않습니다 .

1 단계 ReactDocs

위의 문서에서 셸 및 기타 옵션에서 내보내기에 대해 언급했는데 설명하려고하는 것은 .env를 사용하는 것입니다. 파일을

1.1 루트 /.env 만들기

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

이주의 사항 반드시 시작 REACT_APP_

1.2 ENV 변수에 액세스

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3 빌드 환경 문제

1.1 | 2 단계를 수행 한 후 작동하지 않고 위의 문제 / 해결 방법을 찾았습니다. React는 빌드 될 때 env를 읽고 생성 하므로 변수가 업데이트되도록 .env 파일을 수정할 때 마다 npm run start 가 필요합니다 .

오늘날에는 더 간단한 방법이 있습니다.

루트 디렉토리에 .env.local 파일을 만들고 거기에 변수를 설정하십시오. 귀하의 경우 :

REACT_APP_API_KEY = 'my-secret-api-key'

그런 다음 그런 식으로 js 파일을 호출합니다.

process.env.REACT_APP_API_KEY

React는 react-scripts@0.5.0 이후 환경 변수를 지원합니다.이를 위해 외부 패키지가 필요하지 않습니다.

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

* 참고 : create-react-app이 프로젝트를 만들 때이 파일을 gitignore에 추가하기 때문에 .env 대신 .env.local을 제안합니다.

파일 우선 순위 :

npm 시작 : .env.development.local, .env.development, .env.local, .env

npm 실행 빌드 : .env.production.local, .env.production, .env.local, .env

npm 테스트 : .env.test.local, .env.test, .env (.env.local이 누락 됨)

추가 정보 : https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Webpack 사용자

웹팩을 사용하는 경우 dotenv-webpack플러그인을 설치하고 사용 하여 아래 단계를 수행 할 수 있습니다.

패키지 설치

yarn add dotenv-webpack

.env파일 생성

// .env
API_KEY='my secret api key'

webpack.config.js파일에 추가

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

코드에서 다음과 같이 사용하십시오.

process.env.API_KEY

자세한 정보 및 구성 정보는 여기를 방문 하십시오.

1. 루트 폴더에 .env 파일을 만듭니다.

일부 소스는 사용하는 prefere .env.development및 .env.production하지만 의무적이 아니다.

2. VARIABLE의 이름은 REACT_APP_YOURVARIABLENAME로 시작해야합니다.

환경 변수가 그렇게 시작하지 않으면 문제가 발생할 것 같습니다.

3. 변수 포함

환경 변수를 포함하려면 코드에 process.env.REACT_APP_VARIABLE

외부 종속성을 설치할 필요가 없습니다.

npm install env-cmd 를 설치해야합니다.

루트 디렉토리에 .env를 만들고 다음과 같이 업데이트하십시오. REACT_APP_ 는 변수 이름의 필수 접두사입니다.

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

package.json 업데이트

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

1. dotenvdevDependencies로 설치 하십시오.

npm i --save-dev dotenv

2. .env루트 디렉터리에 파일을 만듭니다 .

my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md

3. .env아래와 같이 파일을 업데이트하십시오. REACT_APP_ 는 변수 이름의 필수 접두사입니다.

REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY

4. [ 선택 사항이지만 모범 사례 ] 이제 변수를 저장하는 구성 파일을 만들고 다른 파일에서 사용할 수 있도록 변수를 내보낼 수 있습니다.

예를 들어, base.js다음과 같이 이름이 지정된 파일을 만들고 업데이트했습니다.

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;

5. 또는 다음과 같은 방법으로 JS 파일의 환경 변수를 간단히 호출 할 수 있습니다.

process.env.REACT_APP_BASE_URL

값을으로 얻는 경우 undefined노드 서버를 다시 시작하고 다시 컴파일해야합니다.