React 앱에서 서버리스 환경 변수 설정하기

풀스택 개발자들이 자주 묻는 질문 중 하나는 “백엔드의 환경 변수를 프론트엔드 앱에 어떻게 설정할까?”입니다.

백엔드의 환경 변수를 프론트엔드 앱에 어떻게 설정할까?

예를 들어, 여러분의 React 앱이 백엔드의 API 엔드포인트를 호출할 수 있습니다. 이 값을 프론트엔드 앱에 하드코딩하는 것은 바람직하지 않습니다. 주된 이유는 풀스택 앱을 여러 환경에 배포할 때, React 앱이 올바른 API 엔드포인트를 호출하도록 하고 싶기 때문입니다.

이번 장에서는 React.js 앱과 서버리스 백엔드 사이에서 이를 어떻게 구현하는지 살펴보겠습니다.

다음은 실제 동작을 보여주는 비디오입니다.

이제 개발과 배포라는 두 가지 워크플로우를 살펴보겠습니다.

개발 중

로컬에서 개발할 때 다음과 같은 상황을 원합니다:

로컬 서버리스 개발 환경을 시작합니다.
백엔드 환경 변수(API 엔드포인트, S3 버킷, Cognito 인증자 등)를 출력합니다.
로컬 React 개발 환경을 시작합니다.
백엔드 환경 변수를 자동으로 가져옵니다.

예를 들어, 아주 간단한 풀스택 SST 앱을 살펴보겠습니다. 이 앱은 간단한 Hello World API 엔드포인트와 React.js 앱을 가지고 있습니다.

import * as sst from "@serverless-stack/resources";

export default class MyStack extends sst.Stack {
  constructor(scope, id, props) {
    super(scope, id, props);

    // HTTP API 생성
    const api = new Api(stack, "Api", {
      routes: {
        "GET /": "functions/lambda.handler",
      },
    });

    // React.js 앱 생성
    const site = new ReactStaticSite(this, "Site", {
      path: "frontend",
      environment: {
        // 앱에 API 엔드포인트 전달
        REACT_APP_API_URL: api.url,
      },
    });

    // 출력에 URL 표시
    stack.addOutputs({
      SiteUrl: site.url,
      ApiEndpoint: api.url,
    });
  }
}

여기서는 ReactStaticSite 구성을 사용합니다. 이를 통해 API에서 React 환경 변수를 설정할 수 있습니다.

environment: {
  // 앱에 API 엔드포인트 전달
  REACT_APP_API_URL: api.url,
}

이제 로컬 개발 환경을 시작하면:

$ pnpm start

SST는 .build/ 디렉토리에 구성한 환경을 포함한 파일을 생성합니다. 이 파일은 다음과 같이 생겼습니다.

[
  {
    "path": "frontend",
    "stack": "dev-my-react-app-my-stack",
    "environmentOutputs": {
      "REACT_APP_API_URL": "https://fp21ziovfk.execute-api.us-east-1.amazonaws.com"
    }
  }
]

React 측에서는 이 환경 변수를 가져와야 합니다. 이를 위해 이 파일을 읽고 React의 빌드 타임 환경 변수로 설정하는 아주 간단한 CLI(@serverless-stack/static-site-env)를 사용합니다.

$ pnpm add --save-dev @serverless-stack/static-site-env

이제 process.env.REACT_APP_API_URL을 사용해 컴포넌트에서 환경 변수를 사용할 수 있습니다.

export default function App() {
  const url = process.env.REACT_APP_API_URL;

  return (
    <div className="App">
      API 엔드포인트: <a href={url}>{url}</a>
    </div>
  );
}

이제 시작 스크립트를 감싸줍니다.

"scripts": {
  "start": "sst-env -- react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

React 로컬 환경을 시작하면:

$ pnpm run start

이전에 서버리스 앱에서 설정한 환경 변수가 포함됩니다!

React에 설정된 서버리스 환경 변수

다음으로, 풀스택 앱을 배포할 때 어떤 일이 발생하는지 살펴보겠습니다.

배포 중

React 앱을 환경 변수와 함께 배포해야 합니다. SST는 내부적으로 CDK를 사용하므로, 배포 흐름은 다음과 같습니다.

API를 배포합니다.
React 앱을 빌드합니다.
React 앱의 환경 변수를 교체합니다.
React 앱을 S3와 CloudFront에 배포합니다.

SST와 ReactStaticSite 구문은 이 과정을 자동으로 처리합니다.

AWS에 배포된 React 앱에서 설정된 서버리스 환경 변수

이제 백엔드의 환경 변수가 React 앱에 자동으로 설정된 풀스택 서버리스 앱을 갖게 됩니다. 더 이상 환경 변수를 하드 코딩할 필요가 없으며, 로컬 개발 환경에서도 동일하게 작동합니다!

자세한 내용은 SST로 React.js 앱을 빌드하는 예제를 참고하세요: 서버리스로 React.js 앱 만들기.

React 앱에서 서버리스 환경 변수 설정하기

개발 중

배포 중

SST Guide