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

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

Clock Icon2023.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를 참고합니다.

  • sudo amplify publish

코드 수정이 끝났다면 상기 명령어로 수정한 코드를 Amplify에 반영합니다.

결과 확인

Amplify에서 제공한 도메인으로 접속해 보면, 로그인과 회원 가입 폼이 만들어진 것을 확인할 수 있습니다.

이메일과 비밀번호를 입력하고 회원 가입을 시도합니다.

이후 화면이 전환되며, 인증 코드를 입력하라고 합니다.

이메일을 확인해 보면, 회원 가입시 입력한 이메일로 인증 코드가 날아온 것을 확인할 수 있습니다.

인증에 성공했다면, React의 메인 페이지가 표시됩니다.

마지막으로 콘솔 화면에서 Cognito로 들어가 확인해 보면, 조금 전 가입한 이메일이 표시되는 것을 확인할 수 있습니다.

본 블로그 게시글을 읽고 궁금한 사항이 있으신 분들은 kis2702@naver.com로 보내주시면 감사하겠습니다.

この記事をシェアする

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.