풀 스택 React 애플리케이션 구축

구현

• Amplify 라이브러리 설치

  이 프로젝트에는 Amplify 라이브러리가 2개 필요합니다. 기본 aws-amplify 라이브러리에는 함께 작동하는 다양한 AWS 서비스와 상호 작용하는 데 사용되는 모든 클라이언트 측 API가 포함되어 있고 @aws-amplify/ui-react 라이브러리에는 프레임워크별 UI 구성 요소가 포함되어 있습니다. 이 두 라이브러리를 프로젝트의 루트에 설치합니다.
  

  npm install aws-amplify @aws-amplify/ui-react

  Code snippet copied

  복사
• 인증 서비스 생성

  인증 서비스를 생성하려면 Amplify CLI를 사용합니다.
  

  amplify add auth
  
  ? Do you want to use the default authentication and security configuration? Default configuration
  ? How do you want users to be able to sign in? Username
  ? Do you want to configure advanced settings? No, I am done.

  Code snippet copied

  복사
• 인증 서비스 배포

  인증 서비스가 로컬로 구성되었으므로, 이제 Amplify 푸시 명령을 실행하여 배포할 수 있습니다.
  

  amplify push --y

  Code snippet copied

  복사
• Amplify 리소스를 사용하여 React 프로젝트 구성

  CLI가 생성되었습니다. 이 CLI는 프로젝트의 src 디렉터리에 있는 aws-exports.js 라는 파일을 지속적으로 업데이트합니다. 이 파일은 Amplify 프로젝트에서 제공되는 다양한 AWS 리소스에 대해 React 프로젝트에 알리는 데 사용됩니다.

  이러한 리소스를 사용하여 앱을 구성하려면 src/index.js를 열고 마지막 가져오기 아래에 다음 코드를 추가합니다.

  import { Amplify } from 'aws-amplify';
  import config from './aws-exports';
  Amplify.configure(config);
  

  Code snippet copied

  복사
• App.js에 인증 흐름 추가

  다음으로, src/App.js를 열고 다음 코드를 업데이트합니다.

  import logo from "./logo.svg";
  import "@aws-amplify/ui-react/styles.css";
  import {
    withAuthenticator,
    Button,
    Heading,
    Image,
    View,
    Card,
  } from "@aws-amplify/ui-react";
  
  function App({ signOut }) {
    return (
      <View className="App">
        <Card>
          <Image src={logo} className="App-logo" alt="logo" />
          <Heading level={1}>We now have Auth!</Heading>
        </Card>
        <Button onClick={signOut}>Sign Out</Button>
      </View>
    );
  }
  
  export default withAuthenticator(App);

  Code snippet copied

  복사

  이 코드에는 withAuthenticator 구성 요소를 사용했습니다. 이 구성 요소는 사용자가 가입하고, 로그인하고, 암호를 재설정하고, 다중 인증(MFA)을 위해 로그인을 확인할 수 있도록 전체 사용자 인증 흐름을 구성합니다. 사용자가 로그아웃할 수 있는 로그아웃 버튼도 추가했습니다.
  

• 로컬로 앱 실행

  리소스의 배포가 완료될 때까지 기다린 다음 앱을 실행하여 앱을 보호하는 새로운 인증 흐름을 살펴봅니다.
  

  npm start

  Code snippet copied

  복사

  

  여기에서 가입을 시도할 수 있습니다. 그러면 이메일로 인증 코드가 전송됩니다. 인증 코드를 사용하여 앱에 로그인합니다. 로그인하면 로그아웃 버튼이 표시됩니다. 로그아웃하면 인증 흐름이 다시 시작됩니다.

  

• 프런트엔드 및 백엔드의 CI/CD 설정

  다음으로 지속적 배포 워크플로의 일부로 백엔드를 추가하도록 Amplify 빌드 프로세스를 구성해야 합니다. 터미널 창에서 다음을 실행합니다.
  

  amplify console
  ? Which site do you want to open? AWS console

  Code snippet copied

  복사

  그러면 Amplify 콘솔이 열립니다. 탐색 창에서 앱 설정 > 빌드 설정을 선택하고 amplify.yml에 backend 섹션(아래 코드의 2~7행)을 추가하도록 수정합니다. 편집을 마친 후 저장을 선택합니다.
  

  version: 1
  backend:
    phases:
      build:
        commands:
          - '# Execute Amplify CLI with the helper script'
          - amplifyPush --simple
  frontend:
    phases:
      preBuild:
        commands:
          - yarn install
      build:
        commands:
          - yarn run build
    artifacts:
      baseDirectory: build
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*

  Code snippet copied

  복사

  아래로 스크롤하여 빌드 이미지 설정으로 이동하고 편집을 선택합니다. 패키지 버전 재정의 추가 드롭다운을 선택하고 Amplify CLI를 선택합니다. 이미지에서 보듯이 최신 버전이 기본값으로 설정되어 있습니다.

  

  다음으로, 방금 생성한 백엔드 환경을 가리키도록 프런트엔드 브랜치를 업데이트합니다. 브랜치 이름 아래에서 편집을 선택한 다음, main 브랜치가 방금 생성한 staging 백엔드를 가리키도록 지정합니다. 저장을 선택합니다.
  

  

  

  Please set up a service role...(서비스 역할을 설정하세요)이라는 메시지가 표시될 경우 계속해서 앱에 서비스 역할을 설정하고 연결하기 전에 제공된 지침을 따르세요.

• 라이브 환경에 변경 사항 배포

  이제 로컬 터미널 창으로 돌아가서 변경 내용을 GitHub에 배포하여 Amplify 콘솔에서 새 빌드를 시작합니다.

  git add .
  git commit -m "added auth"
  git push origin main
  

  Code snippet copied

  복사