AWS Amplify와 Amazon Cognito를 연동해 React 배포해 보기

AWS Amplify와 Amazon Cognito를 연동해 React 배포해 보는 과정을 정리해 봤습니다.

#한국어블로그

#AWS

#Amazon Cognito

#AWS Amplify

#AWS Amplify CLI

Kim Jaewook

2023.11.30

안녕하세요 클래스메소드 김재욱(Kim Jaewook) 입니다. 이번에는 AWS Amplify와 Amazon Cognito를 연동해 React 배포해 보는 과정을 정리해 봤습니다.

React 프로젝트를 생성하고, Amplify 생성 및 배포는 아래 블로그를 참고해 주세요.

※ 아래 블로그에서 React 프로젝트 생성, Amplify CLI 설치 및 배포 과정을 포함하고 있습니다.

Amplify CLI에서 Cognito 설정

yarn add aws-amplify @aws-amplify/ui-react

먼저 Amplify Library를 설치합니다.

여기서 yarn 설치시 에러가 발생한다면「npm install --global yarn」npm으로 yarn을 설치합니다.

sudo amplify add auth

이제 Amplify CLI를 이용해 Cognito를 생성합니다.

선택한 값은 다음과 같습니다.

Default configuration
Email
No, I am done

sudo amplify push

이제 생성한 Cognito를 Amplify에 반영합니다.

이미지와 같이「Auth」가 추가되어 있는 것을 확인하고 yes를 입력합니다.

React 코드 수정

import logo from './logo.svg';
import './App.css';

import { Authenticator} from "@aws-amplify/ui-react";
import { Amplify } from 'aws-amplify'; 
import awsconfig from "./aws-exports";
import '@aws-amplify/ui-react/styles.css';

Amplify.configure(awsconfig);

function App() {
  return (
    <Authenticator>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
            Learn React
          </a>
        </header>
      </div>
    </Authenticator>
  );
}

export default App;

이어서 React의 코드를 수정합니다.

회원 가입 및 인증 페이지를 화면에 표시해야 하는데, UI의 경우 아래 Amplify UI를 참고합니다.