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를 선택한 다음 [브랜치 연결] 버튼을 클릭합니다.

gsg-build-amplify-4.png

이는 사용자를 GitHub로 리디렉션합니다. 이제 Amplify 콘솔을 GitHub 계정에 추가하여 해당 계정에서 호스팅한 소스 코드를 배포할 수 있습니다. 그러려면 녹색 Authorize aws-amplify-console 버튼을 클릭합니다.

gsg-build-amplify-5

이제 Amplify 애플리케이션에 GitHub 리포를 연결합니다. 리포지토리 브랜치 추가 페이지에서, amplify-web-app 리포지토리와 main 브랜치를 선택합니다. 그런 다음에 [다음]을 클릭합니다.

gsg-build-amplify-6

다음 단계를 통해 애플리케이션에 대한 구축 설정을 구성합니다. Amplify가 계정 내 AWS 리소스에 액세스하여 자동으로 배포하게 허용하는 IAM 서비스 역할이 필요합니다. 구성 구축 설정 페이지에서 파란색 상자 안 [새 역할 생성] 버튼을 클릭합니다.

gsg-build-amplify-7

IAM 콘솔이 새 탭에서 열리며, 필요 값으로 채워집니다. [역할 생성]을 클릭하십시오.

  • 신뢰하는 엔터티 유형: AWS 서비스
  • 서비스: Amplify
  • 사용 사례: Amplify - 백엔드 개발
  • 허가 정책: AdministratorAccess-Amplify
gsg-build-amplify-8

생성을 마치면 브라우저에서 이 탭을 닫고, 구성 구축 설정 페이지로 돌아갈 수 있습니다. 기존 역할 새로고침을 클릭한 다음 방금 생성한 역할을 드롭다운 메뉴에서 선택하십시오. 그런 다음 환경 드롭다운 메뉴에서 dev를 선택합니다. 이 항목은 amplify init를 실행한 다음 프로젝트에서 Amplify를 구성할 때 생성한 환경입니다.

나머지 설정을 기본값으로 두고 [다음]을 선택합니다.

gsg-build-amplify-9

구성한 값을 검토하고 [저장 및 배포]를 클릭합니다. Amplify는 이제 소스 리포지토리 변경 사항에서 사용자의 React 애플리케이션을 자동으로 배포하기 시작합니다.

gsg-build-amplify-10

이제 터미널로 돌아가 엔터를 눌러 과정을 따라갈 수 있습니다.

? 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을 통해 사용자의 앱에 액세스할 수 있습니다.

결론

이 모듈에서는 프라이빗 GitHub 리포를 웹 애플리케이션의 코드에 연결하여 Amplify를 통한 자동 배포를 설정하는 방법에 대해 배웠습니다. 다음 모듈에서는 방금 배포한 애플리케이션을 이를 위해 생성된 모든 AWS 리소스와 함께 삭제하는 방법에 대해 알아봅니다.

다음 차례: 리소스 정리

내용이 마음에 드셨는지요.

피드백을 제공해 주셔서 감사합니다.
이 페이지가 도움이 되어 기쁩니다. 지속적인 개선에 도움이 되는 추가 세부 정보를 공유해 주시겠습니까?
닫기
피드백을 제공해 주셔서 감사합니다.
이 페이지가 도움이 되지 못해 죄송합니다. 지속적인 개선에 도움이 되는 추가 세부 정보를 공유해 주시겠습니까?
닫기