🛠 AWS Amplify - 1) 프론트엔드 앱 배포 및 호스팅

목표

• AWS Amplify 서비스를 살펴본다.
• AWS Amplify를 통해 프론트엔드 앱을 배포한다.
• AWS Amplify 앱과 Route53을 통해 도메인 설정을 진행한다.

---

1. AWS Amplify(?)

1-1) 설명

모바일 및 프론트엔드 개발자가 AWS에서 구동되는 안전하고 확장 가능한 
풀스택 애플리케이션을 개발하도록 지원하는 도구 및 서비스 집합입니다. 

Amplify를 사용하면 몇 분 만에 앱 백엔드를 구성하고 앱을 연결하며, 
정적 웹 앱을 배포 및 AWS 콘솔 외부에서 앱 콘텐츠를 쉽게 관리할 수 있습니다.

Amplify는 JavaScript, React, Angular, Vue, Next.js 등의 널리 사용되는 웹 프레임워크와 
Android, iOS, React Native, Ionic, Flutter 등의 모바일 플랫폼을 지원합니다.

1-2) 제공 기능

---

2. AWS Amplify로 프론트엔드 앱 배포하기

1. 선행 해야 할 작업

• 형상 관리에 코드 push (해당 예제는 AWS CodeCommit 사용)

2. 프론트엔드 앱 배포

2-1. Get Started

1. AWS Amplify로 배포 이력이 없으면 해당 초기 화면이 보여진다.
2. Get started > Deliver 메뉴를 통해 프론트엔드 앱을 호스팅한다.
   

2-2. 형상관리 서비스 선택

1. 소스 코드가 관리하는 서비스를 선택한다.
   

2-3. 리포지토리, 브랜치 선택

1. 프론트엔드 앱 소스코드가 있는 리포지토리를 선택한다.
2. 배포하고자 하는 브랜치를 선택한다.
   

2-4.(중요) 빌드 설정

1. 프로비저닝 > 빌드 > 배포 > 테스트 > 확인 과정이 통과해야 성공
2. AWS 서비스들은 주로 yml 형식으로 빌드 및 배포를 수행한다.
3. 스마트한 Amplify는 코드 검토 후, 자동적으로 빌드 설정을 셋팅한다.
4. (구문 참조) Configuring build settings
   
5. 해당 예제에서는 테스트 코드가 원할하게 작성되지 않았기에 테스트 부분은 삭제한다.
   

2-5. 배포 설정 검토

2-6. 배포 확인

1. 성공적인 배포가 완료 되었으면 전부 ✔ 표시가 되어있다.
2. 브랜치명을 클릭 > 세부 페이지에서는 배포 관련 로그를 확인할 수 있다.
3. CDN 기반 앱 호스팅도 진행해주어, 하단 도메인으로 이동해 결과를 확인할 수 있다.
   

---

3. AWS Amplify 도메인 설정

• Route53 혹은 타사 도메인 서버와 연결할 수 있다.
• 해당 예제는 Route53 DNS 관리를 통해 도메인을 제공하는 호스팅 업체와 연동했다는 가정

1. 도메인 설정

1-1. 도메인 관리 > 사용자 지정 도메인 추가

1-2. Route53에 등록한 도메인 추가

• 서브 도메인에 대한 하위 도메인 설정을 커스텀하게 추가할 수 있다.
  

1-3. 연결 확인

• 해당 연결 작업이 끝나면, 도메인을 통하여 앱 접속이 가능하다.
  

---

참고

AWS Amplify
AWS Amplify Docs