AWS Amplify 설정하기

이번 섹션에서는 사용자가 앱에 로그인하고 회원가입할 수 있도록 설정할 것입니다. 이를 위해 백엔드 섹션에서 생성한 AWS 리소스를 연결할 것입니다.

이 작업을 위해 AWS Amplify라는 라이브러리를 사용할 것입니다. AWS Amplify는 Auth, API, Storage와 같은 간단한 모듈을 제공하여 백엔드와 쉽게 연결할 수 있도록 도와줍니다.

AWS Amplify 설치

Change indicator packages/frontend/ 디렉토리에서 다음 명령어를 실행하세요.

$ npm install aws-amplify@^5

이 명령어는 NPM 패키지를 설치하고 React 앱의 package.json에 의존성을 추가합니다.

설정 파일 생성하기

이제 앱에서 사용할 모든 리소스를 참조할 수 있도록 프론트엔드에 설정 파일을 만들어 보겠습니다.

Change indicator frontend/src/config.ts 파일을 생성하고 다음 내용을 추가합니다.

const config = {
  // 백엔드 설정
  s3: {
    REGION: import.meta.env.VITE_REGION,
    BUCKET: import.meta.env.VITE_BUCKET,
  },
  apiGateway: {
    REGION: import.meta.env.VITE_REGION,
    URL: import.meta.env.VITE_API_URL,
  },
  cognito: {
    REGION: import.meta.env.VITE_REGION,
    USER_POOL_ID: import.meta.env.VITE_USER_POOL_ID,
    APP_CLIENT_ID: import.meta.env.VITE_USER_POOL_CLIENT_ID,
    IDENTITY_POOL_ID: import.meta.env.VITE_IDENTITY_POOL_ID,
  },
};

export default config;

여기서는 서버리스 백엔드에서 설정한 환경 변수를 불러오고 있습니다. 이 작업은 React 앱을 처음 설정할 때 진행했던 내용입니다.

AWS Amplify 추가하기

다음으로 AWS Amplify를 설정해 보겠습니다.

Change indicator AWS Amplify를 초기화하려면 src/main.tsx 파일에서 ReactDOM.createRoot 줄 위에 다음 코드를 추가하세요.

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID,
  },
  Storage: {
    region: config.s3.REGION,
    bucket: config.s3.BUCKET,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
  },
  API: {
    endpoints: [
      {
        name: "notes",
        endpoint: config.apiGateway.URL,
        region: config.apiGateway.REGION,
      },
    ],
  },
});

Change indicator src/main.tsx 파일의 헤더 부분에 다음 코드를 추가하여 Amplify를 임포트하세요.

import { Amplify } from "aws-amplify";

Change indicator 그리고 앞서 생성한 config 파일을 src/main.tsx 파일의 헤더 부분에 임포트하세요.

import config from "./config.ts";

Amplify에는 프론트엔드와 함께 사용하기 위해 해결해야 하는 3년 된 버그가 있습니다.

Change indicator frontend/index.html 파일의 <head> 태그 끝에 다음 코드를 추가하세요.

<script>
  window.global = window;
  var exports = {};
</script>

여기서 몇 가지 주의할 점이 있습니다.

Amplify는 Cognito를 Auth, S3를 Storage, API Gateway를 API로 참조합니다.
Auth의 mandatorySignIn 플래그는 사용자가 앱과 상호작용하기 전에 로그인해야 하도록 설정되었습니다.
name: "notes"는 Amplify에게 API의 이름을 지정하도록 지시합니다. Amplify는 앱이 사용할 여러 API를 추가할 수 있게 해줍니다. 우리의 경우 전체 백엔드는 단일 API로 구성됩니다.
Amplify.configure()는 상호작용할 다양한 AWS 리소스를 설정합니다. 여기서는 설정 외에 특별한 작업을 수행하지 않습니다. 따라서 이 코드가 복잡해 보일 수 있지만, 단순히 설정을 하는 것임을 기억하세요.

변경 사항 커밋하기

Change indicator 지금까지 작업한 코드를 커밋하고 GitHub에 푸시해 보겠습니다.

$ git add .
$ git commit -m "React 앱 설정 완료"
$ git push

다음으로, 로그인과 회원가입 폼을 만드는 작업을 진행할 예정입니다.

AWS Amplify 설정하기

AWS Amplify 설치

설정 파일 생성하기

AWS Amplify 추가하기

변경 사항 커밋하기

SST Guide