AWS Amplify로 CI/CD 적용하기

CI/CD로 AWS에 React 앱 배포

---

  [ AWS 가입하기 ]

AWS Amplify 콘솔에 들어가기 위해서는 AWS 계정이 필요합니다. AWS Amplify를 사용하는 데 따르는 추가 요금은 없습니다. (AWS 사이트에 들어가서 가입 또는 로그인 후 다음 단계를 진행 할 수 있습니다.)

 

환경 설정 확인
터미널을 열고 아래 명령을 입력합니다.

node -v;

 이 명령이 v8.0 미만을 반환하면 노드를 버전 8보다 높은 버전으로 업그레이드 합ㄴ다.
이 명령이 노드를 찾지 못하면 nodejs.org/download에서 노드를 설치 하시면 됩니다.

새 React 프로젝트 생성하기 (프로젝트가 있을 경우 해당 프로젝트 사용)
React 프로젝트를 생성하는 가장 쉬운 방법은 CRA(create-react-app) 명령을 사용하는 것입니다.
다음 명령을 사용하여 이 패키지를 설치 합니다.

npx create-react-app amplifyapp
cd amplifyapp
npm start

---

  [ Girhub Repository 생성하기 ]  

이 단계에서는 Github Repository를 생성하고 코드를 해당 Repository에 커밋 합니다.
(이때 Github 계정이 필요합니다.)

- 새 Github Repository를 생성합니다.

- 명령줄 인터페이스에서 다음 명령을 실행하여 git을 초기화 하고 프로젝트를 새 Github Repo에 푸쉬 합니다.

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master

---

  [ AWS Amplify 콘솔에 로그인하기 ]  

새 브라우저 창에서 AWS Management Console을 엽니다.
검색창에 Amplify를 입력하고 AWS Amplify를 선택하여 서비스 콘솔을 엽니다.

---

  [ AWS Amplify에 CI/CD 적용하여 배포 ]  

 

이 단계에서는 방금 생성한 Github Repo를 AWS Amplify 서비스에 연결합니다.

• 이렇게 하면 AWS에서 프로젝트를 빌드, 배포 및 호스팅 할 수 있습니다.
  - [배포] 아래에서 [시작하기]를 선택합니다.

• Repo 서비스로 [Github]를 선택하고 [다음]을 선택합니다.

• Github에 인증하고 Amplify 콘솔로 돌아갑니다.
  앞에서 생성한 Repo와 마스터 브랜티를 선택한 후 [다음]을 선택합니다.

• 기본 빌드 설정을 그대로 적용하고 [다음]을 선택합니다.

• 최종 세부 정보를 검토하고 [저장 및 배포]를 선택합니다.

• AWS Amplify 콘솔이 소스 코드를 빌드하고 앱을 "https://<branchname>.<appid>.amplifyapp.com"에 배포합니다.

• 빌드가 완료되면 해당 썸네일을 선택하여 웹 앱이 실제로 시작 및 실행 되는 지 확인 할 수 있습니다.

---

  [ 코드 변경 사항 자동 배포 ]  

• 이 단계에서는 코드를 약간 변경한 후 변경 사항을 repo의 마스터 브랜치에 푸쉬 합니다.
  - src/App.js 파일을 편집합니다.

  ---

  [ 리소스 정리 ]  

• AWS Amplify 콘솔에서 생성한 리소스를 쉽게 종료 할 수 있습니다.
  사실상 더이상 사용하지 않는 리소스를 종료해서 요금이 부과되지 않도록 하는 것이 좋습ㄴ다.
  
  [작업]을 선택한 다음 [앱 삭제]를 선택합니다.
  모달 창이 열리면 delete를 입력하여 앱 삭제 의사를 확인합니다. 이제 앱이 삭제 됩니다.