BLOG
AWS Amplify 와 AWS Amplify Console 을 사용해 보신 적 있나요? 이는 AWS에서 아이디어부터 프로토타입까지 새로운 웹 애플리케이션을 만드는 가장 빠른 방법 중 하나입니다. 더 자세히 설명해 드리자면 AWS Amplify는 인증(Amazon Cognito를 통한), 스토리지(Amazon S3(Simple Storage Service)를 통한), GraphQL API와 같은 서비스를 명령줄 인터페이스를 통해 쉽게 추가할 수 있는 있는 툴체인을 갖춘 현대적 애플리케이션 구축용으로 평가된 프레임 워크입니다. AWS Amplify 콘솔을 사용하면 최신 웹 애플리케이션을 편리하게 지속적으로 배포하고 호스팅할 수 있습니다. 또한 React, Angular, Vue.js, Ionic 및 Ember를 포함한 단일 페이지 앱 (SPA) 프레임 워크에 대한 프론트엔드 및 백엔드 에셋 호스팅을 지원하며, Gatsby, Eleventy, Hugo, VuePress 및 Jekyll과 같은 정적 사이트 생성기도 지원합니다.
AWS Amplify CLI 이 제공하는 호스팅 옵션은 S3 및 Amazon CloudFront 외에도 Amplify Console을 포함합니다. Amplify Console을 사용하면 연속 배포, 즉시 캐시 무효화, 사용자 지정 리디렉션 및 사용자 지정 도메인의 간단한 구성과 같은 기능을 활용할 수 있습니다.
Amplify 앱 초기화
Amazon Transcribe 정적 사이트 데모를 배포하려는 상황을 예로 들어보겠습니다. 우선 미리 설치된 AWS Command Line Interface (CLI) 와AWS Amplify CLI를 준비해두었습니다. 이를 나눈 다음 로컬 컴퓨터에 샘플 코드를 복제했습니다.
다음 gif에서 AWS Amplify 앱 의 초기화 프로세스를 볼 수 있습니다. (해당 gif는 신속히 보여드리기 위해 작업을 빨리 진행했습니다. 여러분이 앱을 생성하실 때는 이보다 시간이 더 소요될 수 있습니다.)
이제 앱을 초기화했으므로 서비스를 추가할 수 있습니다. AWS Amplify Console을 통해 호스팅을 추가하겠습니다. 호스팅을 위해 Amplify Console 을 선택한 후 git 기반 워크플로우를 사용하여 수동 배포 또는 연속 배포를 선택할 수 있습니다.
지속적인 배포
먼저 git repo를 변경하면 빌드 및 배포가 시작되도록 지속적인 배포를 설정하겠습니다.
지속적인 배포 구성을 위한 워크플로에는 빠른 브라우저 세션이 필요합니다. 먼저 git provider를 선택합니다. 분기 저장소는 GitHub에 있으므로 GitHub 계정을 사용하려면 Amplify Console에 권한을 부여해야 합니다.
제공자가 승인되면 변경 사항을 확인할 레포 및 지점을 선택합니다.
AWS Amplify Console은 package.json 내용을 바탕으로 올바른 빌드 설정을 자동 감지했습니다.
설정을 확인하면 초기 빌드 및 배포가 시작됩니다. 그런 다음 선택한 git 브랜치를 변경하면 추가 빌드 및 배포를 하게 됩니다. 이제 CLI에서 워크플로우를 완료해야 하며, 이를 위해 새로운 Amplify Console 앱의 ARN이 필요합니다. 브라우저의 앱 설정 및 일반에서 ARN을 복사한 후 터미널에 붙여 넣고 상태를 확인합니다.
브라우저에서 URL을 점검함으로써 앱이 성공적으로 배포되었는지 확인합니다.
수동 배포
Amplify Console을 사용한 수동 배포에도 유용한 기능이 많이 있습니다. CLI는 이제 프런트 엔드 환경을 관리할 수 있어 테스트 또는 개발 환경을 쉽게 추가할 수 있습니다. 또한, URL 리디렉션 및 재작성을 쉽게 추가하거나 HTTP 기본 인증을 통해 사용자 이름/암호를 추가할 수 있습니다.
수동 배포 구성은 간단합니다. 우선 환경 이름을 설정하세요. 배포할 때 amplify publish를 실행하고 프로젝트 초기화 중에 정의된 빌드 스크립트가 실행됩니다. 그런 다음 생성된 아티팩트가 자동으로 업로드됩니다.
수동 배포를 사용하면 CLI에서 직접 여러 프런트 엔드 환경(예: dev 및 prod)을 설정할 수 있습니다. 새로운 개발 환경을 생성하기 위해서는 amplify env add(dev으로 이름을 설정하세요)와 amplify publish를 실행하세요. 이렇게 하면 Amplify Console에서 두 번째 프런트엔드 환경이 만들어집니다. 모든 프런트엔드 및 백엔드 환경을 보려면 CLI에서 amplify console 를 실행하여 Amplify Console 앱을 엽니다.
몇 주 전에 AWS Amplify Console을 처음 사용한 이후로 이는 애플리케이션, 특히 정적 사이트를 배포할 때 애용하는 방법이 되었습니다. 간단하게 AWS Amplify Console을 Amplify CLI로 확장하여 호스팅하는 방법을 통해 이 글을 읽고 계시는 여러분 모두 즐거운 Building을 하시길 바라겠습니다!
** 메가존 클라우드 TechBlog는 AWS BLOG 영문 게재 글 중에서 한국 사용자들에게 유용한 정보 및 콘텐츠를 우선적으로 번역하여 내부 엔지니어 검수를 받아서, 정기적으로 게재하고 있습니다. 추가로 번역 및 게재를 희망하는 글에 대해서 관리자에게 메일 또는 SNS 페이지에 댓글을 남겨주시면, 우선적으로 번역해서 전달해드리도록 하겠습니다.