Create React App에서 환경 관리하기

React.js 앱을 다양한 환경에 배포할 때, 적절한 백엔드 리소스 버전에 연결되도록 해야 합니다. 이를 어떻게 구현할 수 있는지 살펴보겠습니다.

먼저 간단한 설정 파일부터 시작해 보겠습니다. src/config.js 파일은 모든 백엔드 리소스 정보를 저장합니다.

const config = {
  STRIPE_KEY: "pk_test_1234567890",
  MAX_ATTACHMENT_SIZE: 5000000,
  s3: {
    REGION: "us-east-1",
    BUCKET: "notes-app-uploads"
  },
  apiGateway: {
    REGION: "us-east-1",
    URL: "https://5by75p4gn3.execute-api.us-east-1.amazonaws.com/prod"
  },
  cognito: {
    REGION: "us-east-1",
    USER_POOL_ID: "us-east-1_udmFFSb92",
    APP_CLIENT_ID: "4hmari2sqvskrup67crkqa4rmo",
    IDENTITY_POOL_ID: "us-east-1:ceef8ccc-0a19-4616-9067-854dc69c2d82"
  }
};

export default config;

이제 앱을 dev 환경에 배포할 때는 개발용 백엔드에 연결되고, prod 환경에 배포할 때는 프로덕션용 백엔드에 연결되도록 변경해야 합니다. 물론 더 많은 환경을 추가할 수 있지만, 지금은 이 두 가지만 고려하겠습니다.

Create React App에서 환경 변수 사용하기

우리의 React 앱은 정적 싱글 페이지 애플리케이션입니다. 이는 특정 환경을 위해 빌드가 생성되면 해당 환경에서 지속된다는 것을 의미합니다.

Create React App은 빌드 시스템에 커스텀 환경 변수 지원 기능이 내장되어 있습니다. 커스텀 환경 변수를 설정하려면 Create React App 빌드 프로세스를 시작할 때 설정하면 됩니다.

$ REACT_APP_TEST_VAR=123 npm start

여기서 REACT_APP_TEST_VAR는 커스텀 환경 변수이며, 이를 123으로 설정했습니다. 앱 내에서는 이 변수를 process.env.REACT_APP_TEST_VAR로 접근할 수 있습니다. 따라서 앱에서 다음과 같은 코드를 작성하면:

console.log(process.env.REACT_APP_TEST_VAR);

콘솔에 123이 출력됩니다.

이러한 변수들은 빌드 시점에 포함됩니다. 또한, REACT_APP_로 시작하는 변수만 앱에 포함되며, 다른 모든 환경 변수는 무시됩니다.

스테이지 환경 변수

우리의 목적을 위해 REACT_APP_STAGE라는 환경 변수를 사용해 보겠습니다. 이 변수는 dev와 prod 값을 가질 수 있으며, 기본값은 dev로 설정됩니다. 이제 이 변수를 사용해 설정 파일을 다시 작성할 수 있습니다.

Change indicator src/config.js를 다음 코드로 교체하세요.

const dev = {
  STRIPE_KEY: "YOUR_STRIPE_DEV_PUBLIC_KEY",
  s3: {
    REGION: "YOUR_DEV_S3_UPLOADS_BUCKET_REGION",
    BUCKET: "YOUR_DEV_S3_UPLOADS_BUCKET_NAME"
  },
  apiGateway: {
    REGION: "YOUR_DEV_API_GATEWAY_REGION",
    URL: "YOUR_DEV_API_GATEWAY_URL"
  },
  cognito: {
    REGION: "YOUR_DEV_COGNITO_REGION",
    USER_POOL_ID: "YOUR_DEV_COGNITO_USER_POOL_ID",
    APP_CLIENT_ID: "YOUR_DEV_COGNITO_APP_CLIENT_ID",
    IDENTITY_POOL_ID: "YOUR_DEV_IDENTITY_POOL_ID"
  }
};

const prod = {
  STRIPE_KEY: "YOUR_STRIPE_PROD_PUBLIC_KEY",
  s3: {
    REGION: "YOUR_PROD_S3_UPLOADS_BUCKET_REGION",
    BUCKET: "YOUR_PROD_S3_UPLOADS_BUCKET_NAME"
  },
  apiGateway: {
    REGION: "YOUR_PROD_API_GATEWAY_REGION",
    URL: "YOUR_PROD_API_GATEWAY_URL"
  },
  cognito: {
    REGION: "YOUR_PROD_COGNITO_REGION",
    USER_POOL_ID: "YOUR_PROD_COGNITO_USER_POOL_ID",
    APP_CLIENT_ID: "YOUR_PROD_COGNITO_APP_CLIENT_ID",
    IDENTITY_POOL_ID: "YOUR_PROD_IDENTITY_POOL_ID"
  }
};

const config = {
  // 공통 설정 값은 여기에 추가
  MAX_ATTACHMENT_SIZE: 5000000,
  // REACT_APP_STAGE가 설정되지 않으면 기본값으로 dev 사용
  ...(process.env.REACT_APP_STAGE === "prod" ? prod : dev),
};

export default config;

앱의 리소스에 맞게 각 값을 교체해야 합니다.

REACT_APP_STAGE가 설정되지 않으면 기본적으로 dev 환경을 사용합니다. 이는 현재 빌드 프로세스(npm start 및 npm run build)가 기본적으로 dev 환경을 사용한다는 것을 의미합니다. 또한, 두 환경에 공통으로 적용되는 설정 값(예: MAX_ATTACHMENT_SIZE)은 별도의 섹션으로 이동했습니다.

아직은 prod 버전에 대해 걱정할 필요는 없습니다. 하지만 예를 들어, prod 버전의 앱을 빌드하려면 다음 명령어를 실행해야 합니다.

$ REACT_APP_STAGE=prod npm run build

또는 윈도우의 경우:

set "REACT_APP_STAGE=prod" && npm start

다음으로, React.js 앱을 Netlify에 배포하기 위한 빌드 스크립트를 작성해 보겠습니다.