리액트 프로젝트에서 dotenv를 사용할 수 있습니까?

리액트 프로젝트에서 dotenv를 사용할 수 있습니까?

환경변수(개발/프로덕트 엔드포인트 API 호출, 개발/프로덕트에 따른 키 등)를 설정하려고 하는데 dotenv를 사용할 수 있는지 궁금합니다.

dotenv를 설치하고 webpack을 사용하고 있습니다.

웹 팩 엔트리는main.js이 파일에는require('dotenv').config()

다음으로 웹 팩 설정에 다음과 같이 입력합니다.

  new webpack.EnvironmentPlugin([
    'NODE_ENV',
    '__DEV_BASE_URL__'  //base url for dev api endpoints
  ])

하지만 아직 정의되지 않았습니다.어떻게 하면 제대로 할 수 있을까요?

오래된 질문을 해서 미안하지만
리액트 컨버터는 실제로 후드 아래에 있는 dotenv 라이브러리를 사용합니다.

react-scripts@0.2.3 이후에서는 다음과 같이 환경변수를 조작할 수 있습니다.

1. 프로젝트의 루트에 .env 파일을 만듭니다.
2. RECT_APP_로 시작하는 환경 변수 설정
3. process.env를 사용하여 액세스합니다.컴포넌트의 RECT_APP_...

.env

REACT_APP_BASE_URL=http://localhost:3000

App.js

const BASE_URL = process.env.REACT_APP_BASE_URL;

자세한 내용은 문서를 참조하십시오.

간단한 대답은 '아니오'입니다.브라우저는 로컬 또는 서버 환경 변수에 액세스할 수 없으므로 dotenv는 검색할 필요가 없습니다.대신 보통 설정 모듈에서 React 응용 프로그램에서 일반 변수를 지정합니다.

웹 팩은 빌드 머신에서 환경 변수를 가져와 설정 파일에 구우도록 만들 수 있습니다.그러나 실제로는 실행 시간이 아닌 빌드 시간에 문자열을 교체하는 것입니다.따라서 애플리케이션의 각 빌드에는 하드 코드화된 값이 포함됩니다.그런 다음 이러한 값에 액세스 할 수 있습니다.process.env물건.

var nodeEnv = process.env.NODE_ENV;

또, 다음의 명령어를 사용할 수도 있습니다.DefinePlugin빌드 대상(dev, prod 등)에 따라 다른 값을 명시적으로 지정할 수 있습니다.주의:JSON.stringify모든 값이 전달되었습니다.

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

이것은 어떤 종류의 공개 세부사항에도 적합하지만 개인 키, 비밀번호 또는 API 비밀 정보에는 절대 사용하지 마십시오.이는 에 내장된 모든 값에 공개적으로 액세스할 수 있으며 중요한 세부 정보가 포함된 경우 악의적으로 사용될 수 있기 때문입니다.이러한 경우 서버측 코드를 작성하고, 시크릿을 사용하여 서드파티 API를 인증할 수 있는 간단한 API를 구축하여 클라이언트측 어플리케이션에 관련 내용을 전달해야 합니다.서버측 API는 중개자 역할을 하여 필요한 데이터를 얻으면서도 비밀을 보호합니다.

1. 파일 .env를 .

   API_URL=http://localhost:8000
   

2. package dotenv npm 을 설치합니다.

   $ npm install --save-dev dotenv
   

3. 변수 을 추가하도록 webpack 을 합니다.

   const webpack = require('webpack');
   const dotenv = require('dotenv');
   
   module.exports = () => {
     // call dotenv and it will return an Object with a parsed key 
     const env = dotenv.config().parsed;
   
     // reduce it to a nice object, the same as before
     const envKeys = Object.keys(env).reduce((prev, next) => {
       prev[`process.env.${next}`] = JSON.stringify(env[next]);
       return prev;
     }, {});
   
     return {
       plugins: [
       new webpack.DefinePlugin(envKeys)
     ]
   };
   

4. 정말 잘했어!React와 dotenv를 즐겨보세요.

실제로 리액트 앱에서 웹 팩과 함께 dotenv를 사용할 수 있습니다.게다가, 그것을 하는 방법에는 여러 가지가 있다.다만, 이것은 아직 빌드 타임의 설정인 것에 주의해 주세요.

1. 위의 답변과 유사한 방법입니다.dotenvDefine Plugin(플러그인 정의)의 Respect(반응) 자세한 .env현재 구성에 따른 파일은 이 블로그에서 확인할 수 있습니다.

2. 플러그인 사용.저는 개인적으로 그게 정말 편리하다고 생각해요.예를 들어 다음과 같은 환경이 있다고 가정합니다.dev,staging ★★★★★★★★★★★★★★★★★」prod .은 각 env)에 대해 .env.dev,.env.staging팩

   const Dotenv = require('dotenv-webpack');
   
   module.exports = (env, argv) => {
       const envPath = env.ENVIRONMENT ? `.env.${env.ENVIRONMENT}` : '.env';
   
       const config = {
           ...
           plugins: [
               new Dotenv({
                   path: envPath
               })
           ]
       };
   
       return config;
   };
   

특정 환경을 위한 앱을 만들 때 웹 팩에 환경 이름을 전달하기만 하면 됩니다.

webpack --config webpack.config.js --env.ENVIRONMENT=dev

소스 폴더에 config.json을 만들었습니다.

{
    "api_url" : "http://localhost:8080/"
}

그리고 내가 필요로 하는 파일에 그것을 요구했습니다.

const config = require('./config.json');

config.api_url을 사용했습니다.

언급URL : https://stackoverflow.com/questions/42182577/is-it-possible-to-use-dotenv-in-a-react-project