Amazon Web Services 한국 블로그
AWS Amplify CLI를 사용한 앱 호스팅 기능 출시
AWS Amplify 및 AWS Amplify 콘솔을 사용해보셨나요? AWS에서 웹 애플리케이션을 아이디어에서 프로토타입으로 구현하는 가장 빠른 방법을 제공하는 제품이라고 생각합니다.
AWS Amplify는 인증(Amazon Cognito 사용), 스토리지(Amazon Simple Storage Service(S3) 사용) 또는 GraphQL API(모두 명령줄 인터페이스를 통해 사용 가능)와 같은 서비스를 쉽게 추가하기 위한 도구 체인을 사용하여 최신 애플리케이션을 빌드하는 강력한 프레임워크입니다.
AWS Amplify 콘솔을 사용하면 최신 웹 앱에 대한 지속적 배포와 호스팅을 손쉽게 수행할 수 있습니다. 그리고 React, Angular, Vue.js, Ionic 및 Ember를 포함하여 SPA(Single Page App) 프레임워크에 대한 프론트엔드 및 백엔드 자산 호스팅을 지원합니다. 또한 Gatsby, Eleventy, Hugo, VuePress 및 Jekyll과 같은 정적 사이트 생성기도 지원합니다.
오늘 AWS Amplify CLI에서 사용 가능한 호스팅 옵션으로는 Amazon S3 및 Amazon CloudFront 외에도 Amplify 콘솔이 포함됩니다. Amplify 콘솔을 사용하면 지속적 배포, 즉각적 캐시 무효화, 사용자 지정 리디렉션 및 사용자 지정 도메인의 간단한 구성과 같은 기능을 활용할 수 있습니다.
Amplify 앱 초기화하기
간단한 예제를 살펴보겠습니다. AWS의 음성 인식 AI 서비스인 Amazon Transcribe의 데모 웹 페이지를 배포하려고 합니다. 이미 AWS Command Line Interface(CLI) 및 AWS Amplify CLI도 설치되어 있기에샘플 코드를 복사하여 로컬 머신으로 복제합니다. 아래 데모에서는 AWS Amplify 앱에 대한 초기화 프로세스를 볼 수 있습니다. (여러분의 앱을 생성할 때는 몇 초 정도 시간이 걸릴 수 있습니다.)
이제 배포할 앱을 초기화했으므로 사용할 AWS 서비스를 추가할 수 있습니다. AWS Amplify 콘솔을 통해 몇 가지 호스팅을 추가하겠습니다. 호스팅을 위해 Amplify 콘솔을 선택한 후 git 기반 워크플로를 사용하여 지속적 배포 또는 수동 배포를 선택할 수 있습니다.
지속적 배포하기
먼저, git 리포지토리에 대한 변경이 빌드 및 배포를 트리거하도록 지속적 배포를 설정하려고 합니다.
지속적 배포를 구성하는 워크플로에는 빠른 브라우저 세션이 필요합니다. 먼저, git 제공자를 선택합니다. 복사된 리포지토리는 GitHub에 있으므로 Amplify 콘솔에 제 GitHub 계정을 사용할 권한을 부여해야 합니다.
제공자에게 권한을 부여했으면, 변경을 감시할 리포지토리와 분기를 선택합니다.
AWS Amplify 콘솔은 package.json 콘텐츠에 따라 올바른 빌드 설정을 자동으로 감지합니다.
설정을 확인하면 초기 빌드 및 배포가 시작됩니다. 그런 다음, 선택한 git 분기에 대한 변경으로 인해 추가 빌드 및 배포가 수행됩니다. 이제 CLI에서 워크플로를 완료해야 하므로, 이를 위해 새 Amplify 콘솔 앱의 ARN이 필요합니다. 브라우저의 [App Settings(앱 설정)] 및 [General(일반)] 아래에서 ARN을 복사하고 터미널에 붙여넣은 후 상태를 확인합니다.
브라우저에서 URL을 빠르게 확인하면 앱이 배포되었음을 확인할 수 있습니다.
수동 배포하기
Amplify 콘솔에서 수동 배포도 유용한 많은 기능을 제공합니다. 이제 CLI는 프론트엔드 환경을 관리할 수 있으므로, 테스트 또는 개발 환경을 쉽게 추가할 수 있습니다. 또한 URL 리디렉션 및 다시 쓰기를 추가하거나 HTTP 기본 인증을 통해 사용자 이름/암호를 쉽게 추가합니다.
수동 배포 구성은 매우 간단합니다. 환경 이름만 설정하면 됩니다. 배포할 때가 되면 프로젝트가 실행되는 초기화 중에 정의된 빌드 스크립트 및 amplify publish를 실행합니다. 그러면 생성된 아티팩트가 자동으로 업로드됩니다.
수동 배포에서는 여러 프론트엔드 환경(예: 개발 및 프로덕션)을 CLI에서 직접 설정할 수 있습니다. 새 개발 환경을 생성하려면 amplify env add(이름은 dev로 지정) 및 amplify publish를 실행합니다. 그러면 Amplify 콘솔에서 두 번째 프론트엔드 환경이 생성됩니다. 모든 프론트엔드 및 백엔드 환경을 보려면 CLI에서 amplify console을 실행하여 Amplify 콘솔 앱을 엽니다.
몇 주 전에 처음 AWS Amplify 콘솔을 사용해본 이후로는 애플리케이션, 특히 정적 사이트를 배포할 때는 이 기능을 즐겨 사용하고 있습니다. Amplify CLI로 확장된 AWS Amplify 콘솔에서 간단한 호스팅의 재미를 여러분도 느껴보시길 바랍니다.