Amazon Amplify에 웹 애플리케이션 배포
시작 안내서
모듈 3: 배포 자동화
이 모듈에서는 Amplify 내장 CI\CD 파이프라인을 사용하여 웹 애플리케이션을 배포합니다.
소개
이 모듈에서는 GitHub 리포지토리(줄여서 리포)에 애플리케이션을 저장하며, 그런 다음 Amplify 콘솔을 사용하여 지속적 배포를 설정합니다.
배우게 될 내용
- GitHub 리포지토리를 Amplify에 연결
- Amplify를 사용하여 지속적 배포 설정
완료 시간
5분
모듈 선행 조건
- 관리자 수준의 액세스 권한이 있는 AWS 계정**
- 권장 브라우저: 최신 버전의 Chrome 또는 Firefox
[**]생성된 지 24시간이 지나지 않은 계정은 이 자습서를 완료하는 데 필요한 서비스에 액세스할 권한이 아직 없을 수 있습니다.
구현
GitHub에서 프로젝트 저장
프로젝트를 설정하여 배포 업데이트를 자동화하기 전에 이 프로젝트를 어딘가에 호스트해야 합니다. 이 안내서는 사용자가 GitHub에 친숙하고, 계정을 보유하고 있으며, 새 프라이빗 리포지토리 생성 방법을 안다고 가정합니다. 프라이빗 리포를 생성하고, 지금까지 작성한 코드를 리포로 푸시하십시오.
지속적 개발 설정
Amplify를 구성하여 코드를 배포하려면 이를 GitHub 계정에 연결해야 합니다. 이 작업은 AWS 콘솔을 통해 수행됩니다. GitHub 토큰을 생성하여 프라이빗 리포지토리에 액세스하고 이를 AWS 계정에 저장해야 하기 때문입니다. 해당 작업을 수행하기 위해 amplify-app 디렉터리에서 amplify 추가 호스팅을 실행합니다. Amplify가 호스팅에 대한 질문 목록을 보여주면 아래의 옵션을 선택하십시오.
amplify add hosting
? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
Amazon CloudFront and S3
? Choose a type
❯ Continuous deployment (Git-based deployments)
Manual deployment
Learn more그러면 브라우저에 새 창이 시작되고, Amplify 콘솔이 열려 프로젝트의 호스팅을 구성할 수 있습니다. Amplify 콘솔의 앱 페이지에서 [프론트엔드 환경] 탭을 클릭하고 GitHub를 선택한 다음 [브랜치 연결] 버튼을 클릭합니다.
이는 사용자를 GitHub로 리디렉션합니다. 이제 Amplify 콘솔을 GitHub 계정에 추가하여 해당 계정에서 호스팅한 소스 코드를 배포할 수 있습니다. 그러려면 녹색 Authorize aws-amplify-console 버튼을 클릭합니다.
이제 Amplify 애플리케이션에 GitHub 리포를 연결합니다. 리포지토리 브랜치 추가 페이지에서, amplify-web-app 리포지토리와 main 브랜치를 선택합니다. 그런 다음에 [다음]을 클릭합니다.
다음 단계를 통해 애플리케이션에 대한 구축 설정을 구성합니다. Amplify가 계정 내 AWS 리소스에 액세스하여 자동으로 배포하게 허용하는 IAM 서비스 역할이 필요합니다. 구성 구축 설정 페이지에서 파란색 상자 안 [새 역할 생성] 버튼을 클릭합니다.
IAM 콘솔이 새 탭에서 열리며, 필요 값으로 채워집니다. [역할 생성]을 클릭하십시오.
- 신뢰하는 엔터티 유형: AWS 서비스
- 서비스: Amplify
- 사용 사례: Amplify - 백엔드 개발
- 허가 정책: AdministratorAccess-Amplify
생성을 마치면 브라우저에서 이 탭을 닫고, 구성 구축 설정 페이지로 돌아갈 수 있습니다. 기존 역할 새로고침을 클릭한 다음 방금 생성한 역할을 드롭다운 메뉴에서 선택하십시오. 그런 다음 환경 드롭다운 메뉴에서 dev를 선택합니다. 이 항목은 amplify init를 실행한 다음 프로젝트에서 Amplify를 구성할 때 생성한 환경입니다.
나머지 설정을 기본값으로 두고 [다음]을 선택합니다.
구성한 값을 검토하고 [저장 및 배포]를 클릭합니다. Amplify는 이제 소스 리포지토리 변경 사항에서 사용자의 React 애플리케이션을 자동으로 배포하기 시작합니다.
이제 터미널로 돌아가 엔터를 눌러 과정을 따라갈 수 있습니다.
? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain │
├──────────────┼────────────────────────────────────────────┤
│ main │ https://main.d339jiqv9kzj2m.amplifyapp.com │
└──────────────┴────────────────────────────────────────────┘배포가 완료되면 출력된 URL에서 사용할 수 있으며, 누구나 이 URL을 통해 사용자의 앱에 액세스할 수 있습니다.