리액트 프런트엔드를 전개할 때 API 서버 URL을 삽입하는 방법

리액트 프런트엔드를 전개할 때 API 서버 URL을 삽입하는 방법

면책사항:저는 리액트 누브이기 때문에 리액트 웨이가 아닌 것 같습니다.

S3나 Google Storage와 같은 클라우드 프로바이더가 정적으로 서비스를 제공하기 위해 배포할 React 프런트 엔드를 작성합니다.이 프런트 엔드는 클라우드 어딘가에 있는 여러 API 서버와 상호 작용합니다. 같은 프로바이더에 있을 수도 있고 아닐 수도 있습니다.또한 UI 또는 UI의 일부를 개발하는 동안 이러한 서버의 주소는 로컬 또는 테스트 인스턴스일 수 있습니다.

다른 주소를 사용하여 개발, 스테이징 또는 Prod에 도입할 수 있도록 API 서버의 URL을 유연하게 리액트 애플리케이션에 삽입하려면 어떻게 해야 합니까?

솔루션: 최종적으로 제안된 솔루션을 조합하여 사용할 수 있게 되었습니다.

• 사용하다.env.production그리고..env.development변수를 저장하는 파일(파일 이름)REACT_APP_API_URI = 'host'
• 이는 create-react-app의 빌드 발판에 의해 자동으로 픽업되며 UI 코드로 다음과 같이 제공됩니다.process.env.REACT_APP_API_URI

이는 버전 관리 파일에 env 변수를 저장하는 등 12 Factor Apps의 원칙에 다소 어긋나지만 ATM 작업을 수행합니다.

다음과 같이 시험해 보십시오.

// http.js
const getBaseUrl = () => {
  let url;
  switch(process.env.NODE_ENV) {
    case 'production':
      url = 'https://stackoverflow.com';
      break;
    case 'development':
    default:
      url = 'https://google.com';
  }

  return url;
}

export default axios.create({
  baseURL: getBaseUrl(),
});

이 패키지 https://github.com/toddbluhm/env-cmd을 사용하면 환경에 맞는 env 파일을 만들 수 있습니다.

예를 들어 이 코드를 사용하여 .env.dll 및 .env 파일을 만듭니다.

// .env.staging file   
API_URL=https://staging.url.com/api/

// .env file
API_URL=https://url.com/api/

env 변수에서 API_URL을 사용하여 가져오는 방법:

fetch(process.env.API_URL)

그런 다음 패키지에 스크립트를 추가할 수 있습니다.json:

{
  "scripts": {
    "build:staging": "env-cmd .env.staging yarn build",
    "build:prod": "env-cmd .env yarn build"
  }
}

사용할 수 있습니다..envAPI가 일정할 경우 file을 수행합니다.development또는production환경. 그 후.build이 파라미터들은 변경할 수 없습니다.

를 변경할 경우URL빌드 후 추가js파일이라고 합시다.config.js

를 포함하다conf.js에index.html

더하다URL에conf.js맘에 들다

var URL1 = 'https://www.google.com'

다음과 같은 파라미터에 액세스할 수 있습니다.

export const {URL1} = window;

예를 들어 빌드 단계에서 환경 변수를 사용하여 이 작업을 수행할 수 있습니다.

환경변수를 정의하고 웹팩 파일에 로드할 수 있는 .env 등의 기능을 사용할 수 있습니다(예를 들어 웹팩을 사용하는 경우).하지만 어떤 번들러와도 사용할 수 있습니다.

.env 파일:

API=http://localhost:3000

웹 팩에서 DefinePlugin을 사용할 수 있습니다.

문서에서 가져온 예: API env 추가

    ...
    require('dotenv').config()
    ...

    new webpack.DefinePlugin({
      API_ENDPOINT: process.env.API,
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('5fa3b9'),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: '1+1',
      'typeof window': JSON.stringify('object')
    });

어쨌든, 이것은 한 가지 방법일 뿐이다.API 키 및 기타 다양한 환경에서 유용한 정보를 정의할 수 있도록 프로젝트를 준비하기 때문에 이 방법을 좋아합니다.

메모: 빌드 유형에 따라 로컬, 스테이징 및 프로덕션용으로 서로 다른 .env 파일을 정의하고 웹 팩에 각 파일을 로드할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/51024542/how-to-inject-api-server-url-when-deploying-react-frontend