AWS Amplify로 Gatsby 사이트 배포하기 3가지 방법

October 26, 2020

AWS Amplify는 AWS의 다양한 클라우드 서비스를 결합하여 모바일 및 웹 애플리케이션 개발을 쉽게 처리할 수 있게 해주는 서버리스(Serverless) 프레임워크입니다. AWS에서는 다음과 같이 소개하고 있죠.

모바일 및 프런트 엔드 웹 개발자가 AWS에서 구동되는 안전하고 확장 가능한 풀 스택 애플리케이션을 구축 및 배포하도록 지원하는 엔드 투 엔드 솔루션입니다. Amplify를 활용하면 앱 백엔드를 몇 분 만에 구성하여 단 몇 줄의 코드로 앱에 연결하고 정적 웹 앱을 3개의 단계로 배포할 수 있습니다.

이 AWS Amplify를 이용하면 리액트 기반의 프론트엔드 앱을 간단하게 만들고 배포할 수 있습니다. 물론 Gatsby도 마찬가지구요.

AWS Amplify는 크게 다음 2가지 용도로 사용 가능합니다(둘 중 하나만 사용해도 되고 둘 다 쓸 수도 있겠죠).

  1. 웹/앱 개발: AWS Amplify Framework을 사용하면 내 앱에 인증, 데이터베이스, 스토리지, API(REST/GraphQL) 기능을 간단하게 붙일 수 있습니다.
  1. 웹앱 호스팅: SPA나 Jamstack 기반 웹 애플리케이션을 호스팅할 수 있습니다.

이 글에서는 그 중 두 번째, 즉 AWS Amplify를 사용하여 Gatsby 사이트를 배포하는 방법을 소개합니다.

첫 번째 방법: Git-기반 배포

가장 일반적인 방법으로, Git 저장소를 연결하여 지속적 배포가 가능하게끔 처리하는 방법입니다.

사용법도 간단합니다. 우선 AWS Amplify Console에 접속합니다.

그런 다음, 내가 배포할 앱이 저장되어 있는 Git 저장소를 선택하여 연결하기만 하면 됩니다. 예를 들어, 다음은 GitHub 저장소에 연결하는 예입니다.

저장소(리포지토리)와 브랜치를 지정하고 앱 빌드 설정을 완료한 다음, “저장 및 배포” 버튼을 클릭하면 다음과 같이 빌드가 진행됩니다.

빌드가 끌날 때까지 잠시 기다리면 이제 배포가 완료되고, 임의의 URL이 할당되어 사이트에 접속할 수 있게 되죠.

기타 커스텀 도메인 설정이라든지 환경 변수의 셋팅, 액세스 제어 등은 AWS Amplify Console의 “앱 설정” 메뉴를 통해 바로바로 처리하면 됩니다.

두 번째 방법: AWS Amplify CLI로 배포(로컬 프로젝트 배포)

AWS Amplify CLI를 이용하면 터미널에서 바로 AWS에 내 Gatsby 사이트를 배포할 수 있습니다. AWS Amplify CLI는 명령행에서 AWS Amplify의 모든 기능을 사용할 수 있도록 해주는 CLI 툴이며, 다음과 같이 설치하면 됩니다.

$ npm install -g @aws-amplify/cli

이제 AWS Amplify CLI가 설치된 상태라는 전제 하에, 내 Gatsby 사이트에 다음 명령을 입력합니다.

$ amplify init
$ amplify add hosting
$ amplify publish

첫 번째 명령(amplify init)은 내 Gatsby 프로젝트를 AWS Amplify와 연결하는 명령이며, 두 번째 amplify add hosting 명령은 Amplify 리소스(기능) 중 하나인 호스팅 기능을 추가하는 명령입니다.

그리고 마지막 세 번째 명령(amplify publish)은 제목에서도 알 수 있듯이 사이트를 AWS에 퍼브리시하는 명령입니다.

이 CLI 방식을 사용하면 별도 Git 저장소 없이도 내 로컬 PC 상의 프로젝트를 AWS Amplify로 간단하게 호스팅할 수 있습니다.

AWS Amplify CLI를 이용한 호스팅에 관한 더 자세한 내용은 AWS Amplify CLI Hosting 문서를 참고하세요!

세 번째 방법: From Fullstack Samples

AWS Amplify에서는 몇몇 샘플 앱들을 제공하며, 샘플 코드에서 바로 앱을 배포할 수 있게 해 줍니다. 일종의 “스타터(Starter)”인 셈이죠.

그 중 “Gatsby Fulltasck”이라는 이름의 샘플도 제공합니다.

AWS Amplify Console에서 이 샘플을 선택한 다음 “Deploy app” 버튼을 클릭하면 AWS Amplify 프레임워크가 반영된 Gatsby Sample 앱을 바로 배포할 수가 있습니다.

물론 그 밖에도 다른 방법들이 있을 것입니다. 예를 들면, S3와 클라우드프론트(CloudFront)를 활용한 전통적인 배포 방법을 쓸 수도 있겠죠. 여기서는 AWS Amplify를 이용한 배포 방법만을 따로 한번 알아 보았습니다. 😊