AWS amplify로 어플리케이션 배포하기

npx create-next-app으로 가장 기본적인 next 환경을 갖추고 amplify를 사용해서 배포까지 해보자. Next.js에서 공식적으로 운영하는 github.com/vercel/next.js/tree/canary/examples에서 기본 골격을 받아서 시작할 수도 있다.

 

여기서는 배포하는 환경까지 만들어 보고 다음에는 auth, api, function 등 backend까지 amplify로 다뤄 볼 예정이다.

npm install -g @aws-amplify/cli로 amplify cli를 먼저 설치한다.

amplify init

자동으로 생성된 amplify 폴더

amplify init으로 amplify 설정을 초기화한다. 위와 같은 파일들이 생성되며 amplify console에서도 방금 생성한 app을 볼 수 있다.

 

초기화하는 과정에서 aws profile도 설정할 수 있다. 여러 계정을 profile로 분리해서 사용하고 있다면 코드로 인프라를 프로비저닝까지 하기 때문에 매우 주의해야한다. 현재 로컬에서 실행할때 사용할 계정은 ./amplify/.config/local-aws-info.json에서 확인할 수 있다. 이 파일은 물론 개인 환경이라서 .gitignore로 git에는 관리되지 않는다. 

 

 

amplify add hosting

amplify hosting plugin에서 Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)를 선택하면 s3, cloudfront까지 amplify가 관리해준다. 

 

다음 선택 사항으로 Continuous deployment를 Git-based deployments로 설정하면 중간에 amplify console 화면이 뜬다. 여기서 직접github같은 repository와 연결시킨다. 인증 과정을 거치면 빌드, 테스트, 배포를 amplify.yml 설정파일로 정의할 수 있다.

 

console에서 제시해주는 amplify.yml 샘플이 있어서 그대로 다운로드받아 repo의 최상단에 옮기면 자동으로 연동된다. build할때 따로 distribution 폴더를 지정했으면 amplify.yml의 baseDirectory 부분에도 같이 수정해주어야 한다.

 

예를 들어 package.json의 scripts에 "build": "next build && next export -o build/" 와 같이 설정했다면 amplify.yml의 artifacts의 속성에 baseDirectory: build 라고 적어주어야 한다. 그렇지 않으면 배포하고 접속했을 때 403 Access Denied 창을 보게 될 것이다.

 

이렇게 연동시킨 후 지정한 브랜치에 push가 발생하면 amplify가 Provision -> Build -> Test -> Deploy -> Verify 순서대로 진행한다.

• Provision: 빌드하기 위한 도커 이미지를 프로비저닝한다.
• Build: amplify.yml에 작성한 스펙대로 빌드한다.
• Test: amplify.yml에 작성한 스펙대로 테스트한다.
• Deploy: amplify에 hosting을 등록할 때 생성된 AppId로 s3에 배포한다.
• Veirfy: headless chrome으로 여러 디바이스에서 스크린샷을 찍은 결과를 보여준다.

 

managed로 생성된 도메인으로 접속해보면 방금 작성한 next app을 확인할 수 있다. 임의로 생성되어 보기 어려우니 나중에 custom domain으로 연결시키면 완성된다.