재조정 변수를 반응시키다. 정의되지 않은 상태로 반환하다.

재조정 변수를 반응시키다. 정의되지 않은 상태로 반환하다.

리액션 앱을 만들고 있는데 내 api에서 데이터를 가져와야 하는데, 지금은 api url을 환경변수로 저장하려고 해.내 .env파일이 있고, dotenv가 설치되어 있고, 여기 내 코드프로세스가 있다.envAPI_URL이 정의되지 않은 상태로 반환됨.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from '../src/components/Home'
import dotenv from  'dotenv'
import path from 'path'


class App extends Component {
  render() {
    console.log(process.env.API_URL)
    return (
      <div>
        <Home/>
      </div>
    );
  }
}

export default App;

여기서 주목해야 할 세 가지 사항

1. 변수 앞에 다음이 붙어야 한다.REACT_APP_

   예:REACT_APP_WEBSITE_NAME=hello

2. 변경사항을 반영하려면 서버를 재시작해야 한다.

3. .env 파일이 루트 폴더(package.json이 있는 동일한 위치)에 있고 src 폴더에는 없는지 확인하십시오.

그런 다음 다음과 같은 변수에 액세스할 수 있다.process.env.REACT_APP_SOME_VARIABLE

추가 팁

1. 변수 값을 작은따옴표 또는 큰따옴표로 묶을 필요가 없음
2. 세미콜론을 넣지 마십시오.;또는 쉼표,각 행의 끝에

자세한 내용은 여기를(내 게시물) 및 공식 문서를 참조하십시오.

아마 전화해야 할 것이다.dotenv.config()문서에 의해 제안된 바와 같이

에는 create-react-apput ussociative가 dotenv꾸러미추가해야 할 것 같다.REACT_APP_의 변수 이름에 접두사를 붙이다.env파일. 여기 문서를 참조하십시오.

• React 환경변수에 react_APP_ 접두사를 추가한다.

  apiKey: process.env.REACT_APP_API_KEY
  

• .env 파일이 루트 디렉터리에 있는지 확인하십시오.

  src/
  .env
  .gitignore
  package.json
  package-lock.json
  

• .env 파일에서 변경한 후 개발 서버를 재시작하십시오.

• 따옴표 안의 값만 복사하고 후행 쉼표(몇 시간 동안 나를 괴롭혔다)를 제거하는 것을 잊지 마십시오.이 예들은 너에게 오류를 줄 것이다.

  REACT_APP_API_KEY=Ach2o1invVocSn25FcQhash209,
  REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209",
  REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209"
  

A라고 부를 때.env에서 가변적인.JS파일명세서를 작성하다.process.env.쓰기 전에 접두사를 붙이다.env가변적

이렇게 하면 마치process.env.REACT_APP_NOT_SECRET_CODE

변수 이름을 시작하는 것을 잊지 마십시오.REACT_APP_이전 답변에서 언급된 접두사를 접두사로 지정하지 않으면 보안상의 이유로 해당 접두사를 무시하게 된다.

• 접두사를 사용했는지 확인하십시오.REACT_APP모든 변수에 있어서.

• .env 파일의 변수 이름과 의 변수 이름이 일치하는지 확인하십시오.
  당신의 js 파일.예를 들어,REACT_APP_KEY 대 .env 대 .envo 에서.process.env.REACT_APP_KY

• 개발 서버가 실행 중이면 중지한 후 npm을 사용하여 다시 실행하십시오.나는 이것에 대해 정말 고심했다. (변수는 정의되지 않은 오류다.)
• .env 파일을 업데이트할 때마다 빌드 중에만 환경 변수가 업데이트되므로(변수는 정의되지 않은 오류임) 서버를 중지하고 다시 실행해야 한다.
• 변수 값에서 인용문을 제거하십시오.

// Wrong: 
REACT_APP_KEY=”AHEHEHR”

// Right:
REACT_APP_KEY=AHEHEHR

1. vscode를 다시 시작(프로젝트 닫기, 편집기 닫기)
2. 다시 시작하다
3. 계획을 착수하다

내 경우에는 그것이 많은 도움이 된다.또한 RECT_APP_로 키 이름을 시작하는 것도 잊지 마십시오.YOU_NAME_KEY

위의 솔루션이 작동하지 않는 경우 ".env" 파일 플레이스가 어디에 있는지 확인하십시오.내 경우처럼 내가 한 모든 것이 정확하게 이루어졌지만 실수로 인해 ".env"를 내 프로젝트 디렉토리 외부에 배치했고, 그 때문에 오류가 발생하고 있다.

참고: ".env" 파일은 "package.json"과 동일한 디렉토리에 있어야 한다.

안녕, 고마워 내가 하고 일했던 건 config.js 파일을 만드는 거였어

 const dev={
    API_URL:"http://localhost:300"
}

const prod={
    API_URL:"llll"
}
const config=process.env.NODE_ENV=='development'?dev:prod
export default  config

그런 다음 구성 요소의 모든 위치에서 가져와 데이터를 얻는다.

내가 넘어간 또 다른 가능한 함정은 Create-react-app 폴더가 아닌 위의 변수(Node server/backend .env가 위치한 위치)를 정의하는 것이었다.오늘처럼 소중한 시간을 낭비하게 될 테니 그러지 않도록 해.

캐시도 지우고 해 봐

npx react-native start --reset-cache

수정:

babel.config.js에서 옵션 구성을 사용하는 경우:

    {
  "plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": true
    }]
  ]
}

그런 다음 다음을 가져오십시오.

import {API_URL, API_TOKEN} from "@env"

다음 대신:

import {API_URL, API_TOKEN} from "react-native-dotenv"

NPM 패키지 설명 자체에는 이러한 불일치가 있음

개발 도구를 통해 쉽게 읽을 수 있으므로 API 키를 프런트엔드 코드에 저장하거나 사용하지 마십시오.

API 키를 .env에 저장하고 Resact 앱에서 사용하는 것은 DevTools에서 API 키를 읽을 수 있기 때문에 여전히 보안이 해제된다.

서비스에 대한 프록시 역할을 할 간단한 백엔드 코드를 사용하십시오.

요청을 통해 필요한 데이터를 전송한 후 백엔드에 저장된 API 키를 포함하여 백엔드가 해당 데이터를 사용한 후 해당 API 키가 필요한 특정 서비스에 요청하십시오.

접두사를 붙일 필요 없음REACT_APP_, 단지 당신의 환경을 확인한다 -

• 개발 환경(npm start)에 있는 경우 환경 변수를 다음에 환경 변수를 추가하십시오..env.development-과 같이API_URL=http://example.com
• 프로덕션 환경에 있는 경우 업데이트.env효과가 있을 거야

그런 다음 JS 파일에 동일한 파일을 사용하십시오.process.env.API_URL

참고: 이 테스트는 React JS v16.8에서 수행됨

해결책:
1큰따옴표를 제거한다.("...")
2.프리픽스는 모든 변수에 대해 RECT_APP여야 한다.

올바른 방법:

REACT_APP_API_URL=http://localhost:8002

나는 그것이 효과가 있기를 바란다.

localhost에서 dev 서버를 사용하는 경우 .env가 여기서 작동하지 않는다는 것을 알고 "정상" 서버에 웹 사이트를 배포해야 하는 경우, 브라우저가 .env를 스테이징할 때 볼 수 없도록 하는 것이 안전상의 이유임

참조URL: https://stackoverflow.com/questions/53237293/react-evironment-variables-env-return-undefined