AWS Amplify CLI를 사용하여 React 배포 및 GitHub 연동해 보기

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

React 생성

npx create-react-app test-amplify
cd test-amplify
npm start

npx로 test-amplify라는 폴더명의 React 프로젝트를 생성합니다.

이어서 npm start로 React를 실행합니다.

npm start 명령어를 입력하면 React 화면이 표시되는 것을 확인할 수 있습니다.

Amplify CLI 설치

sudo npm install -g @aws-amplify/cli

상기 명령어로 Amplify CLI를 설치합니다.

sudo amplify configure

상기 명령어를 통해  Amplify CLI의 초기 설정 작업을 진행합니다.

※ 명령어를 입력하면 AWS 콘솔 화면이 열리게 되며, Admin 권한을 가진 계정으로 로그인을 시도합니다.

이어서 리전을 선택하면, IAM User를 생성하는 가이드 라인 페이지가 표시됩니다.

기존 유저로 사용할 생각이라면 페이지를 닫고, Enter를 누릅니다.

혹은 새로 유저를 생성할 생각이면 가이드라인에 따라 유저를 생성하고, 페이지를 닫은 다음, 엔터를 누릅니다.

엔터를 누르면, 액세스 키와 시크릿 키, 프로필 이름을 입력하고, Amplify CLI를 사용하기 위한 유저 설정이 끝납니다.

Amplify에서 React 사용

Amplify에서 React 프로젝트를 가져와 사용하기 위한 초기 설정을 진행합니다.

sudo amplify init

React 프로젝트가 있는 폴더에서 상기 명령어를 입력합니다.

※ 이번 블로그에서는 test-amplify 폴더가 됩니다.

amplify init을 실행하면, amplify에 생성할 프로젝트 명을 입력하고, 프로젝트에 대한 정보를 확인할 수 있습니다.

인증 방법을 선택하게 되는데, AWS 프로필을 이용할 것인지 혹은 액세스 키를 이용할 것인지를 선택합니다.

IAM User 생성 및 기존 유저를 사용할 생각이라면 AWS profile를 선택합니다.

이어서 사용할 프로필을 선택하고, MFA가 등록되어있다면, MFA코드도 입력합니다.

React 프로젝트를 Amplify에 배포

sudo amplify add hosting

상기 명령어를 통해 배포할 준비를 시작합니다.

배포 방법으로는 Amplify 콘솔을 통하며, Amplify CLI를 사용하여 배포할 생각입니다.

※ 여기서 깃 허브를 연동해서 배포하는 방법도 존재하는데, 아래에서 별개로 다루도록 하겠습니다.

sudo amplify publish

마지막으로 상기 명령어를 통해 배포를 진행합니다.

배포가 끝나고, 콘솔 화면으로 들어와 보면, 성공적으로 배포가 된 것을 확인할 수 있습니다.

도메인을 클릭해 보면, React 화면이 표시됩니다.

이후에는 코드를 수정하고 sudo amplify publish 명령어를 입력하면 재배포가 이루어지기 때문에, Amplify CLI를 통해 손쉽게 프로젝트를 관리할 수 있습니다.

GitHub와 연동

먼저 GitHub에 리포지토리를 생성한 다음, React 프로젝트가 있는 test-amplify 폴더에 git init 및 push까지 진행합니다.

Git-based를 선택하면, 콘솔 화면이 열리며, 로그인을 시도합니다.

이어서 Amplify 콘솔 화면에서 작업을 진행하는데, 리포지토리에는 GitHub를 선택합니다.

리포지토리를 선택합니다.

지속적인 배포를 위해 CI/CD 활성화에 체크를하고, 리소스에 액세스할 수 있는 IAM Role를 생성합니다.

IAM Role의 경우 Amplify를 검색해서 Backend Deployment를 선택한 상태로 만들어주면 됩니다.

콘솔에서의 작업이 끝났다면, 터미널에서 다음과 같이 환경명과 도메인을 받아볼 수 있습니다.

코드를 수정하고 git push를 하면, 자동으로 배포가 이루어집니다.

이렇게 AWS Amplify CLI를 사용하여, 프로젝트를 생성하고 배포하는 과정까지 살펴 봤습니다.

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