AWS amplify로 서버리스 웹 애플리케이션 구축하기

프런트엔드 개발자가 백엔드 없이 웹 애플리케이션을 만들 수 있도록 AWS Amplify로 인증, REST API, 호스팅까지 붙이는 과정을 CLI 명령 단위로 따라가는 글이다. 서버리스의 개념과 장단점부터 시작해 Figma 디자인을 React 컴포넌트로 변환하는 기능까지 다룬다. 각 단계마다 실제 CLI 대화 출력이 그대로 실려 있다.

핵심 포인트

서버리스는 서버가 없다는 뜻이 아니라 서버를 신경 쓰지 않아도 된다는 뜻이며 실행한 만큼만 비용을 낸다.
단점은 특정 업체에 락인되고 아키텍처 자체에 문제가 생기면 개발자가 손쓸 방법이 없다는 것이다.
Amplify는 CLI, 라이브러리, UI 컴포넌트, 호스팅 네 부분으로 구성된다.
amplify add auth 한 줄이면 Cognito를 구성하고 withAuthenticator로 감싸면 회원가입·로그인 화면이 붙는다.
amplify add storage는 DynamoDB를, amplify add api는 API Gateway 경로와 Lambda 함수를 만들어준다.
Amplify Studio의 Figma 연동으로 가져온 컴포넌트가 스크린샷과 동일하게 렌더링됐다.

상세 정리

서버리스의 이점 1 생산성: 작성할 코드가 줄어 완성이 빨라지고 유지보수 비용도 줄며, 인프라 전문성 없이 풀스택 개발이 가능하다.
서버리스의 이점 2 확장성: 사용량을 미리 예상해 대비할 필요가 없고 함수 실행량만큼만 비용을 낸다.
서버리스의 이점 3 안정성: 최적화된 아키텍처를 쓰므로 접속이 폭주해도 무리 없이 돌아간다. 다만 청구서는 별개라고 덧붙인다.
Amplify가 나온 이유: AWS 서비스가 워낙 많아 각각의 역할을 익히기 어려운데, Amplify는 S3나 Cognito 대신 storage나 auth 같은 이름으로 추상화해준다.
구성 1 CLI: 서버리스 아키텍처용 AWS 서비스를 만들고 고치고 지우며 무중단 배포도 가능하다.
구성 2 라이브러리: 프런트엔드에서 쓰는 JavaScript SDK로 백엔드와의 상호작용을 추상화한 API와 use-case를 제공한다.
구성 3 UI 컴포넌트: React, Angular, Vue용 컴포넌트를 제공해 인증이나 검색 같은 기능을 상태 관리 없이 붙일 수 있다.
구성 4 호스팅: git 브랜치와 연동해 백엔드와 프런트엔드 CI/CD를 돌리고 도메인 연결과 지표 모니터링을 지원한다.
초기 설정: CLI를 전역 설치하고 amplify configure로 리전을 고른 뒤 IAM 사용자를 만들어 액세스 키를 등록한다.
프로젝트 연결: amplify init을 돌리면 자격 증명용 aws-exports 파일과 아키텍처 소스가 담긴 amplify 폴더가 생긴다.
인증 구현: amplify add auth로 기본 설정을 고르면 Cognito가 구성되고, amplify push로 배포한 뒤 withAuthenticator로 App을 감싸면 화면이 완성된다. CSS 커스터마이징과 MFA, 유저 그룹 권한도 설정으로 가능하다.
데이터베이스: amplify add storage에서 NoSQL을 고르면 DynamoDB 테이블을 만들며 컬럼과 정렬 키, 보조 인덱스, Lambda 트리거 여부를 묻는다.
API 구성: amplify add api에서 REST를 고르고 경로를 지정하면 Serverless ExpressJS 템플릿의 Lambda 함수가 생성된다. 함수가 storage에 접근할 권한과 인증·게스트 사용자별 CRUD 권한도 여기서 정한다.
함수 코드: 생성된 템플릿에 DynamoDB DocumentClient로 scan하는 GET과 uuid를 붙여 put하는 POST를 넣는다. express 문법이지만 serverless-express로 래핑돼 내부적으로는 Lambda가 실행된다.
호출부: 프런트엔드에서는 aws-amplify의 API 객체로 get과 post를 부르면 된다. GraphQL API나 파일 업로드도 같은 방식으로 구성할 수 있다.
Figma 연동: 콘솔에서 Amplify Studio를 켜고 UI Library 탭에서 Figma와 동기화한 뒤 컴포넌트 프로퍼티를 매핑하고 amplify pull로 코드를 받아 쓴다.
연동 결과: 실제 디자인팀 파일에서 댓글 컴포넌트를 가져와 프로퍼티를 넘겨보니 렌더링 결과가 Figma 스크린샷과 동일했다고 밝힌다.
호스팅: amplify add hosting에서 Amplify Console을 고르면 GitHub, GitLab, Bitbucket과 연동돼 푸시할 때마다 자동 배포되고 브랜치별 환경 매핑과 도메인 연결도 된다.