Create React App에서 환경 설정하기

프론트엔드 React 앱을 개발하고 API 백엔드와 함께 작업할 때, 여러 환경을 만들어야 하는 경우가 많습니다. 예를 들어, 서버리스 백엔드의 개발 단계에 연결된 dev 환경을 만들 수 있습니다. 이는 프로덕션 버전과 격리된 환경에서 작업할 수 있도록 하기 위함입니다.

리소스를 격리하는 것 외에도, 프로덕션 버전을 모방한 별도의 환경을 갖는 것은 변경 사항을 라이브로 배포하기 전에 테스트하는 데 큰 도움이 됩니다. 이 아이디어를 더 확장하여 라이브 데이터베이스의 스냅샷을 포함한 스테이징 환경을 만들 수도 있습니다. 이렇게 하면 프로덕션 설정에 최대한 가까운 환경을 구축할 수 있습니다. 이러한 설정은 때때로 로컬 환경에서는 발생하지 않고 라이브 환경에서만 발생하는 버그와 문제를 추적하는 데 도움이 됩니다.

이번 장에서는 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 앱을 특정 환경에 맞게 설정할 수 있습니다. 예를 들어, 앱이 실행 중인 환경을 나타내기 위해 REACT_APP_STAGE라는 커스텀 환경 변수를 사용한다고 가정해 봅시다. 그리고 앱을 위한 두 가지 환경을 설정하려고 합니다:

• 로컬 개발과 라이브에 배포하기 전 테스트에 사용할 환경. 이를 dev라고 부릅니다.
• 변경 사항에 만족한 후에만 배포할 라이브 환경. 이를 production이라고 부릅니다.

먼저, 빌드 시스템에 REACT_APP_STAGE 환경 변수를 설정할 수 있습니다. 현재 package.json의 scripts 부분은 다음과 같이 생겼습니다:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "predeploy": "npm run build",
  "deploy": "aws s3 sync build/ s3://YOUR_S3_DEPLOY_BUCKET_NAME",
  "postdeploy": "aws cloudfront create-invalidation --distribution-id YOUR_CF_DISTRIBUTION_ID --paths '/*' && aws cloudfront create-invalidation --distribution-id YOUR_WWW_CF_DISTRIBUTION_ID --paths '/*'",
  "eject": "react-scripts eject"
}

YOUR_S3_DEPLOY_BUCKET_NAME은 S3 버킷 생성 챕터에서 React 앱을 호스팅하기 위해 만든 S3 버킷입니다. 그리고 YOUR_CF_DISTRIBUTION_ID와 YOUR_WWW_CF_DISTRIBUTION_ID는 apex와 www 도메인을 위한 CloudFront 배포 ID입니다.

여기서는 하나의 환경만 사용하며, 로컬 개발과 라이브 환경에서 모두 사용합니다. npm start 명령어는 로컬 서버를 실행하고, npx sst deploy 명령어는 앱을 라이브에 배포합니다.

두 환경을 설정하기 위해 다음과 같이 변경할 수 있습니다:

"scripts": {
  "start": "REACT_APP_STAGE=dev react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",

  "predeploy": "REACT_APP_STAGE=dev npm run build",
  "deploy": "aws s3 sync build/ s3://YOUR_DEV_S3_DEPLOY_BUCKET_NAME",
  "postdeploy": "aws cloudfront create-invalidation --distribution-id YOUR_DEV_CF_DISTRIBUTION_ID --paths '/*' && aws cloudfront create-invalidation --distribution-id YOUR_DEV_WWW_CF_DISTRIBUTION_ID --paths '/*'",

  "predeploy:prod": "REACT_APP_STAGE=production npm run build",
  "deploy:prod": "aws s3 sync build/ s3://YOUR_PROD_S3_DEPLOY_BUCKET_NAME",
  "postdeploy:prod": "aws cloudfront create-invalidation --distribution-id YOUR_PROD_CF_DISTRIBUTION_ID --paths '/*' && aws cloudfront create-invalidation --distribution-id YOUR_PROD_WWW_CF_DISTRIBUTION_ID --paths '/*'",

  "eject": "react-scripts eject"
}

여기서 주목할 만한 몇 가지 작업을 수행합니다:

1. npm start 명령어에 REACT_APP_STAGE=dev를 사용합니다.
2. YOUR_DEV_S3_DEPLOY_BUCKET_NAME, YOUR_DEV_CF_DISTRIBUTION_ID, YOUR_DEV_WWW_CF_DISTRIBUTION_ID와 같은 개발 버전의 S3 및 CloudFront 배포를 설정합니다.
3. npx sst deploy를 기본적으로 개발 환경과 개발 버전의 S3 및 CloudFront 배포로 설정합니다. 또한 REACT_APP_STAGE=dev 환경 변수를 사용해 빌드합니다.
4. YOUR_PROD_S3_DEPLOY_BUCKET_NAME, YOUR_PROD_CF_DISTRIBUTION_ID, YOUR_PROD_WWW_CF_DISTRIBUTION_ID와 같은 프로덕션 버전의 S3 및 CloudFront 배포를 설정합니다.
5. 마지막으로, npx sst deploy:prod를 통해 프로덕션 환경을 위한 특정 버전의 배포 스크립트를 생성합니다. 이 명령어는 개발 버전과 마찬가지로 REACT_APP_STAGE=production 환경 변수와 프로덕션 버전의 S3 및 CloudFront 배포를 사용해 빌드합니다.

개발 버전을 위해 S3 및 CloudFront 배포를 복제할 필요는 없지만, 라이브 버전을 최대한 비슷하게 모방하려는 경우 도움이 됩니다.

환경 변수 사용하기

이제 커스텀 환경 변수를 사용하여 빌드 명령어를 설정했으니, 앱에서 이를 사용할 준비가 되었습니다.

현재 src/config.js 파일은 다음과 같이 생겼습니다:

export default {
  MAX_ATTACHMENT_SIZE: 5000000,
  s3: {
    BUCKET: "YOUR_S3_UPLOADS_BUCKET_NAME",
  },
  apiGateway: {
    REGION: "YOUR_API_GATEWAY_REGION",
    URL: "YOUR_API_GATEWAY_URL",
  },
  cognito: {
    REGION: "YOUR_COGNITO_REGION",
    USER_POOL_ID: "YOUR_COGNITO_USER_POOL_ID",
    APP_CLIENT_ID: "YOUR_COGNITO_APP_CLIENT_ID",
    IDENTITY_POOL_ID: "YOUR_IDENTITY_POOL_ID",
  },
};

REACT_APP_STAGE 변수를 사용하기 위해, 조건부로 설정을 구성할 것입니다.

const dev = {
  s3: {
    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 = {
  s3: {
    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 = process.env.REACT_APP_STAGE === "production" ? prod : dev;

export default {
  // 공통 설정 값은 여기에 추가
  MAX_ATTACHMENT_SIZE: 5000000,
  ...config,
};

이 설정은 매우 직관적입니다. 개발 환경과 프로덕션 환경을 위한 설정을 각각 정의하고, process.env.REACT_APP_STAGE를 사용하여 어떤 설정을 사용할지 결정합니다.

다시 말해, 각 환경마다 리소스를 복제할 필요는 없지만, 라이브 리소스와 개발 리소스를 분리하는 것은 매우 중요합니다. 라이브 데이터베이스에서 직접 변경 사항을 테스트하는 것은 바람직하지 않습니다.

요약하자면:

• REACT_APP_STAGE 커스텀 환경 변수는 dev 또는 production으로 설정됩니다.
• 로컬에서 작업할 때는 npm start 명령어를 사용하여 개발 환경을 사용합니다.
• npx sst deploy 명령어는 기본적으로 개발 환경에 배포합니다.
• 개발 버전에 만족하면 npx sst deploy:prod 명령어를 사용하여 프로덕션 환경에 배포할 수 있습니다.

이 전체 설정은 매우 간단하며, 여러 환경으로 확장할 수 있습니다. Create React App에서 커스텀 환경 변수에 대해 더 자세히 알아보려면 여기를 참조하세요.