github에 커밋 할 때 API 키를 숨기려고하는데 포럼에서 지침, 특히 다음 게시물을 살펴 보았습니다.
create-react-app에서 API 키를 숨기려면 어떻게하나요?
변경하고 실을 다시 시작했습니다. 내가 뭘 잘못하고 있는지 잘 모르겠습니다. .env
프로젝트의 루트 (이름 process.env
)와 방금 넣은 파일에 파일을 추가했습니다 REACT_APP_API_KEY = 'my-secret-api-key'
.
fetch
App.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 단계
-
npm install dotenv --save
-
다음으로 앱에 다음 줄을 추가합니다.
require('dotenv').config()
-
그런 다음
.env
응용 프로그램의 루트 디렉터리에 파일을 만들고 변수를 추가합니다.
// contents of .env
REACT_APP_API_KEY = 'my-secret-api-key'
- 마지막으로 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 이후 환경 변수를 지원합니다.이를 위해 외부 패키지가 필요하지 않습니다.
* 참고 : 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"
}
답변
dotenv
devDependencies로 설치 하십시오.
npm i --save-dev dotenv
.env
루트 디렉터리에 파일을 만듭니다 .
my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md
.env
아래와 같이 파일을 업데이트하십시오. REACT_APP_ 는 변수 이름의 필수 접두사입니다.
REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY
- [ 선택 사항이지만 모범 사례 ] 이제 변수를 저장하는 구성 파일을 만들고 다른 파일에서 사용할 수 있도록 변수를 내보낼 수 있습니다.
예를 들어, base.js
다음과 같이 이름이 지정된 파일을 만들고 업데이트했습니다.
export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;
- 또는 다음과 같은 방법으로 JS 파일의 환경 변수를 간단히 호출 할 수 있습니다.
process.env.REACT_APP_BASE_URL