[AWS] Amplify: Next.js 앱 배포하기
Amplify는 자동화된 웹 배포 환경을 지원하는 부가서비스다.
내부적으로는 Lambda, Cloudfront를 사용해서 앱을 관리하는 것 같은데, 블랙박스 형태로 박싱해놔서 세부적인 제어는 불가능하다.
여러모로 문제가 많은데, AWS에서 통합된 채로 관리할 수 있다는게 유일한 장점이다.
옵션 설정이 끔찍하고 트러블슈팅도 구역질나게 되어있다. 여러가지 버전 호환성 문제와 엮여서 지원 수준도 처참하다. 그냥 예제코드 내려받아서 띄울 수 있는 그런 수준이 아니다.
말로는 Nest.js나 Nuxt나 다 지원한다고 되어있는데, vercel이나 cloudflare처럼 제대로 지원해주는게 아니다. 알아서 삽질하면서 해결하고 세팅해야 한다.
비용
https://aws.amazon.com/ko/amplify/pricing/
배포 시간, 저장비용, 데이터 전송, 요청 시간, 요청 횟수 등으로 비용을 뜯는다.
하지만 쓴만큼만 내는 온디맨드 요금제라서 사용량이 작은 앱이라면 적은 비용으로 쓰기도 괜찮은 편이다.
Git 레포지토리 생성하기
Amplify는 기본적으로 Git 기반의 소스기반으로 동작한다.
없이도 할 수 있긴 한데, 권장하지는 않는다.
먼저 레포를 하나 판다.
그리고 nextjs 구성을 초기화해준다. 공식문서에서 제공하는 템플릿을 가져다썼다.
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
작성일 기준으로 node18 버전 호환이다.
당연히 잘 실행이 될 것이다.
이제 하나씩 밟아나가보자
Amplify 앱 생성
AWS 콘솔에서 "웹 앱 호스팅"을 선택해서 설정 마법사로 이동한다.
코드는 깃헙으로 했다. 상황에 따라 다른걸로 해도 무방하다.
인증 적당히 설정해주고
브랜치 정하고
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*저기는 이렇게 빌드 설정을 바꿔준다.
CSR + SSR이 모두 가능한 세팅이다.
그렇게 해서 적당히 생성한다.
그럼 이렇게 생성되고 뭐가 뜰텐데...
높은 확률로 빌드가 실패하고, 배포까지 성공하더라도 페이지가 뜨지 않을 것이다.
여기가 삽질구간이었다.
추가 설정
먼저, amplify의 플랫폼타입을 WEB에서 WEB_COMPUTE로 바꿔줘야 한다.
aws amplify update-app --app-id <APP_ID> --platform WEB_COMPUTE
이건 콘솔에서는 불가능하고, 직접 api를 써야만 한다.
근데 가능 여부를 떠나서 콘솔에서는 이런게 있다는걸 보여주지도 않기 때문에 더욱 악질적이다. 나도 이걸 간신히 알아냈다.
저것만 바꾸는게 아니라 브랜치 세팅도 바꿔줘야 한다.
aws amplify update-branch --app-id d1h043wqak0v0n --branch-name master --framework 'Next.js - SSR'
이것도 콘솔에서는 이런게 있다는걸 알 수조차 없다.
public.ecr.aws/docker/library/node:18.17.0빌드이미지도 바꿔줘야 한다.
아무 설정도 하지 않는다면 16버전을 쓰기 때문에 당연히 실패하고, 노드버전만을 지정하더라도 GCC 버전 관련한 종속성 문제가 터져서 빌드가 실패한다. 그래서 이미지를 커스텀해줘야 한다.
그리고 다시 코드 push로 트리거하면 잘 뜨기 시작할 것이다.
도메인 구성
난 도메인이 Cloudflare에 있어서 좀 왔다갔다했는데, route53을 쓴다면 좀더 편할 것이다.
먼저 원하는 도메인의 형태를 이렇게 추가해준다.
그러면 cname 깔라고 알려주는데
그걸 그대로 도메인 공급자에 가서 깔아준다.
그리고 레코드 보기로
cloudfront 엔드포인트를 확인하고
그걸 최종적으로 도메인 레코드에 등록해준다.
그렇게 해서 활성화 표시도 뜨고
최종적으로 도메인으로 접근까지 되면 잘 된 것이다.
이러면 기본 구성은 끝이다.
암호 구성
Amplify는 엔드포인트에 대해서 암호를 거는 기능을 제공한다.
액세스 제어 탭으로 이동하면
이렇게 암호를 설정할 수 있는데
그러면 페이지에 접근할때마다 암호를 요구한다.
브랜치 기반 관리
amplify는 브랜치를 기반으로 해서 배포 스테이지를 나누는 기능을 제공한다.
브랜치 연결을 선택하면
다시 코드소스에서 브랜치 정보를 가져와서
앱을 생성한다.
이후의 사용법은 기본 master 브랜치와 동일하다.
그렇게 해서 별도의 엔드포인트로 뜨면 잘 된 것이다.
미리보기 기능
작업을 하다보면, 개별 작업단위가 어떤 결과를 불러오는지 명시적으로 보고 싶을 때가 많다.
이를테면, PR 단위 말이다.
미리보기 탭으로 이동해서 인증을 재활성화하고
원하는 대상에 대해 활성화를 해준다.
그럼 타겟이 저 master인 PR에 대해서 항상 미리보기 페이지를 생성해주는 것이다.
그렇게 만들면
자동으로 트리거를 타서 이렇게 페이지를 만들어준다.
이렇게 만들어진 페이지는 해당 PR이 merge되거나 닫혔을때 자동으로 내려간다.
참조
https://docs.aws.amazon.com/amplify/latest/userguide/deploy-nextjs-app.html
https://nextjs.org/learn-pages-router/basics/create-nextjs-app/setup
https://aws.amazon.com/ko/blogs/mobile/introducing-support-for-hosting-any-ssr-app-on-aws-amplify-hosting/
https://www.reddit.com/r/nextjs/comments/125zcly/amplify_404_error_when_deploying_nextjs_app/
https://github.com/aws-amplify/amplify-hosting/issues/3168