Amplify란 ?
정적 페이지를 구축, 배포 및 호스팅 하기 위한 AWS 서비스 입니다. Amplify를 Git repo에 연결 시 코드가 커밋될 때마다 자동으로 빌드 및 배포가 가능합니다.
1. 리액트 앱 만들기
간단히 CRA(create react app)을 사용해 리엑트 앱을 쉽게 만들 수 있습니다.
npx create-react-app MYAPP
2. Github repository에 연결
Github repository에 연결하고 코드를 커밋합니다.
cd MYAPP
git add .
git commit -m "first commit"
git remote add origin REPOSITORY_URL
git push origin master
3. 리엑트 앱 배포하기
이제 리엑트 앱 생성과 코드를 github에 올렸습니다. 이제 AWS Amplify를 이용해 어플리케이션을 배포합니다.
먼저, AWS Management Console을 열어 Amplify 를 검색하여, 들어갑니다.
다음과 같이, 오른쪽의 Host your web app에 Get started를 누릅니다.
그다음 Github를 선택하여, 아까 만든 repository와 브랜치를 선택하고, 저장 및 배를 누르면 AWS Amplify가 코드를 빌드하여 배포합니다.
4. 리액트 앱 실행
다음과 같이 배포까지 완료되면, 앱을 https://main.amplifyapp.com 에서 실행할 수 있습니다.
5. Amplify-cli를 이용한 로컬 앱 초기화
amplify를 로컬 개발 환경으로 가져와서, 인증 기능이나 API 추가 등 새 기능을 추가할 수 있습니다.
먼저, CLI를 설치합니다.
npm install -g @aws-amplify/cli
다음 명령어로 amplify cli 환경 설정을 진행합니다.
amplify configure
이후, 콘솔에 따라 진행합니다. 먼저 region을 설정하고, IAM 사용자 추가를 함으로써 로컬 환경에서 Amplify 앱 관리를 할 수 있게 해줍니다. 이후 발급받은 Key를 이용해 터미널에서 인증을 진행하면 환경 설정이 끝납니다.
이후 터미널 환경에서 CLI를 통해 여러가지 기능 추가가 가능합니다.