[AWS Amplify] Next.js 프로젝트 배포하기

 

•  왜 AWS Amplify로 배포했나요?

 

 

전 원래 개인 프로젝트 배포할 때 간편하고 쉬운 Vercel을 사용했습니다. 그런데 배포 과정이 너무 간단하다는 것은 배포나 인프라 관련 지식을 배울 수 있는 부분이 적다는 것을 의미합니다. 한 번쯤 AWS를 사용해보고 싶었는데 다른 방식(EC2, ECS 등) 학습해야 하는 부분이 많다고 해서 AWS를 통한 배포를 가장 부담 없이 경험해 볼 수 있는 AWS Amplify를 선택했습니다. 

 

 

•  대상 독자

 

(AWS 가입 과정은 포함하지 않습니다.)

 

간단한 Next.js 프로젝트를 AWS Amplify로 배포하고자 하는 개발자. 이 과정은 "간단한 프로젝트"를 배포하는 과정입니다. (배포하는 프로젝트는 App Router 기반의 프로젝트입니다.) 

 

 

•  배포 과정

 

1. AWS Amplify의 메인 홈페이지에서 "앱 배포" 버튼을 눌러줍니다.

 

홈페이지 첫 화면이 Vercel 초기화면과 느낌이 비슷합니다. 사용자 친화적입니다.

 

 

2. code provider를 선택합니다.

 

Git Repository를 가져올 플랫폼을 선택합니다. 저는 Github로 선택하겠습니다. 

 

 

그리고 Next 버튼을 눌러주세요. 

 

 

3. 배포할 Repository와 branch를 선택합니다.

 

1. 배포할 Git Repository입니다. 

2. AWS Amplify가 Github Repository에 접근할 수 있도록 Github 권한을 업데이트할 수 있는 새로운 창이 뜹니다. 

3. 이 브랜치의 소스 코드를 기준으로 배포하게 됩니다.

 

 

만약 AWS Amplify가 처음이라면 이 과정에서 Github Repository에 접근할 수 있도록 허가해 달라는 창이 뜰 것입니다. 만약 뜨지 않는다면 2번의 Update Github permissions 버튼을 눌러서 Github 권한을 업데이트해 주세요. 

 

 

4. 배포할 앱 설정과 빌드 설정을 완료합니다. 

 

 

하나씩 설명해 드리겠습니다.

 

1. App name 

배포할 프로젝트를 관리할 AWS Amplify의 App name을 작성해 주세요.

 

2. Auto-detected frameworks

해당 Repository 코드를 기반으로 자동으로 탐지된 프레임워크입니다. (Vercel의 Framework Preset과 동일합니다.)

 

3. Frontend build command / Build output directory

제가 가져온 Repository 코드에서 자동으로 탐지된 프레임워크가 Next.js이기에 그에 맞는 빌드 명령어(npm run build)와 빌드한 결과물이 저장되는 폴더명(.next)을 지정해 준 것입니다.

 

4. Edit YML file

AWS Amplify의 빌드 세팅을 YML 파일을 수정하여 커스터마이징 할 수 있습니다. 저는 수정하지 않겠습니다. 

 

5. Password protect my site

배포된 웹사이트에 비밀번호를 추가해 접근을 제한할 수 있습니다. 이 기능 또한 당장은 선택하지 않겠습니다. 

 

6. Service Role

AWS Amplify가 빌드 및 배포를 위해 AWS 내의 다른 서비스(S3 등)에 접근할 수 있는 권한을 설정하는 부분입니다. 일반적으로는 자동으로 설정된 Service Role를 사용합니다. 즉, 별다른 이유가 없다면 변경하지 않습니다. 

 

"Amplify requires permissions to publish server side rendering(SSR) logs to your cloudwatch account"

 

이 문장은 제가 배포하려는 프로젝트가 SSR를 사용하는 Next.js 프로젝트이기 때문에 AWS Amplify가 AWS cloudwatch account에 해당 SSR 로그를 저장해야된다는 의미입니다. 즉, cloudwatch라는 AWS의 다른 서비스에도 AWS Amplify가 접근할 수 있는 권한을 부여하게 허락한다는 의미입니다. 

 

7. Advanced Settings

고급 환경 설정입니다. 빌드 환경 이미지 설정, 환경 변수 추가, 캐시 설정 등이 가능합니다. 저는 간단한 포트폴리오를 배포하는 것이기에 이또한 넘어가겠습니다.

 

 

5. 최종 배포 설정을 확인합니다. 

 

...그런데 이 시점에서 조금 의아한 현상을 목격했습니다. 이전 단계의 캡처를 보시면 분명 화면에 영어와 한국어가 섞여있었습니다. 근데 지금 화면을 보시죠. 

 

 

 

갑자기 모든 텍스트가 한국어로만 보이기 시작했습니다. 실시간 구글 번역을 해봐도 이전과는 다르게 보였고, AWS 내의 언어 설정으로도 이전과 같은 화면은 보이지 않았습니다. AWS 설정의 언어는 브라우저 기본값으로 되어있었는데 이를 영어로 바꾸면 모든 텍스트가 영어로 나왔고, 한국어로 바꾸면 모든 텍스트가 한국어로 나왔습니다. 왜일까요? 하지만 이는 배포에 관련된 중요한 문제는 아니기에 그냥 넘어가겠습니다. 

 

사실 이 단계의 진짜 문제는 갑자기 영어가 한국어로 보이게 된 것이 아닙니다. 위 캡처 이미지를 보세요. 저 편집 버튼을 눌러도 아무런 변화가 생기지 않는다는 것이 더 문제입니다. 아직 구현이 안 된 것일까요? (25.04.18 현 시간 기준입니다. 조만간 업데이트가 되지 않을까요?) 아무튼 다음 단계를 위해 저장 및 배포 버튼을 누르겠습니다. 

 

 

6. 배포 시작

 

 

멋진 화면이네요. 이 이미지가 지나가면 로딩 스피너가 뜹니다. 

 

 

7. 배포 완료

 

다음 화면에서도 배포는 이어집니다(?)

 

 

 

배포 완료!

 

 

 

8. 배포된 도메인 

 

 

 

•  AWS Amplify 요금

 

아, 당연하게도 AWS Amplify는 유료입니다. 물론 AWS를 가입한 지 12개월이 지나지 않았다면 프리티어를 통해 거의 무료로 이용할 수 있을 것입니다. 특히 제가 만든 포트폴리오 프로젝트처럼 가벼운 프로젝트라면 더더욱 그렇습니다. 다만 저는 예전에 싸피 방학(?) 미션으로 AWS로 EC2 인스턴스 생성하기를 선택해서 해버렸기 때문에....🥲 프리티어 혜택을 지금 받을 수는 없겠습니다. 새로 AWS 아이디를 만들 수도 있겠지만 지금 당장 그럴 필요는 없을 것 같습니다. 규정상으로도 정당한 행위는 아니죠. 

 

 

 

저는 제 개인 포트폴리오를 AWS Amplify로 오전 7시쯤 배포하고 그날 오후, 그러니까 저녁이 되기 전에 배포를 중단했습니다. 그리고 3일이 지난 지금 확인해보니 Amplify 사용으로 인해 발생한 요금은 이러했습니다.  

 

 

아주 간단한 개인 프론트엔드 포트폴리오를 AWS Amplify로 배포하면 반나절에 약 99원이라는 요금이 발생합니다! (이건 제 프로젝트 기준이고 프로젝트 규모나 빌드 시간, 데이터 전송량, 방문자 수 등의 여러 변수가 달라지면 요금은 사람마다 천차만별일 수 있습니다.)

 

전 이 비용을 감당할 수 없어서 Vercel로 회귀하겠습니다.😉

 

 

•  마무리

 

Vercel 배포가 너무 간편해서 AWS Amplify로 배포를 시도해 본 것이었는데, Vercel로 배포하는 과정과 거의 똑같았습니다. 그렇다면.. 다음은 정해져 있겠군요.