새롭게 리뉴얼된 Amplify ui 변경으로 인해 다시 정리하게 되었습니다. 이번 포스팅에서는 AWS Amplify를 사용하여 Next.js 프로젝트를 배포하는 방법을 정리하겠습니다.
이전 포스팅에서도 다루었지만, 기존 amplify ui 변경으로 인해 다시 정리하게 되었습니다.
이번 포스팅에는 환경 변수 설정 및 amplify.yml 파일 수정 방법을 추가하였습니다.
AWS Amplify는 AWS에서 제공하는 서비스 중 하나로, 프론트엔드 및 백엔드 애플리케이션을 빌드, 배포 및 호스팅할 수 있는 플랫폼입니다.
Next js 사용시 배포를 위해 대표적인 방법으로는 Vercel, Netlify, AWS Amplify 등이 있습니다. 이 중에서 AWS Amplify를 사용하는 이유는 다음과 같습니다.
Amplify는 도메인 연결, SSL 인증서 발급, Github, Gitlab 등과의 CI/CD 파이프라인 설정 등을 쉽게 할 수 있습니다. 또한, 인증, 데이터베이스, 스토리지, Lambda 함수 등 다양한 AWS 서비스와 연동이 용이합니다.
이 중에서 Next.js 프로젝트를 Amplify로 배포하고 도메인을 설정하는 방법을 정리하겠습니다.
AWS 회원가입은 생략하겠습니다. 이미 AWS 계정이 있다고 가정하고 진행하겠습니다.
AWS 로그인 후 콘솔로 이동합니다.
AWS Console
리전은 AWS의 데이터 센터가 위치한 지역을 의미합니다. 서비스를 생성할 때 리전을 선택하게 되는데, 리전에 따라 서비스의 가용성과 성능이 달라집니다.
우측 상단에 있는 도시이름을을 클릭하여 리전을 확인합니다.
만약 국내 (한국) 지역에서 서비스를 한다면, 아시아 태평양 (서울)을 선택하면 됩니다.
리전 선택
리전 설정이 완료되었다면, Amplify로 이동합니다.
왼쪽 상단의 검색 창에 Amplify를 검색하여 AWS Amplify로 이동합니다.
AWS Amplify 홈 화면
홈 화면에서 Deploy an app을 클릭합니다.
다음과 같은 새 앱 생성 화면이 나타납니다.
새 앱 생성 화면
이번 포스팅 예시는 github 저장소를 연동하여 배포하는 방법을 다룹니다.
Github 저장소를 선택하고 다음 버튼을 클릭합니다.
Github 권한을 업데이트 합니다.
Github 권한 업데이트를 하고 저장소를 선택합니다.
Github 저장소 선택
다음 브렌치를 선택합니다. 보통은 main 브렌치를 선택합니다. 다음 버튼을 클릭합니다.
다음은 앱 설정화면입니다.
앱 설정 화면
프레임워크는 자동으로 감지된 것을 볼 수 있습니다.
앱 설정화면에서 앱 이름과 빌드 명령, 환경설정 등을 할 수 있습니다.
중간의 서비스 역할은 만약 IAM 역할이 있으면 사용하시되,
없다면 새 서비스 역할 생성 및 사용을 클릭합니다.
중간의 Edit YML file 버튼을 클릭하여 amplify.yml 파일을 수정할 수 있습니다.
amplify.yml 수정 화면
기본적으로 자동으로 생성된 amplify.yml 파일이 있습니다.
이 파일을 수정하여 환경 변수를 설정할 수 있습니다.
다음은 예시입니다.
Recode Logversion: 1
frontend:
phases:
preBuild:
commands:
- 'npm ci'
build:
commands:
- env | grep -e DB_HOST -e DB_USER -e DB_PASS >> .env.production
- env | grep -e NEXT_PUBLIC_ >> .env.production
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
- .next/cache/**/*위 예시 코드에서 env | grep -e DB_HOST -e DB_USER -e DB_PASS >> .env.production 부분은 환경 변수를 .env.production 파일에 저장하는 부분입니다.
환경변수 이름을 -e 옵션으로 지정하여 해당 환경 변수를 수정합니다. DB_HOST, DB_USER, DB_PASS을 대신할 환경 변수 이름을 입력합니다.
출력 예시는 다음과 같습니다.
DB_HOST=host
DB_USER=user
DB_PASS=pass더 자세한 내용은 다음 AWS 공식문서 링크를 참고하세요.
`Amplify 환경 변수 설정`이제 고급 설정에서 환경 변수를 등록해줍니다.
페이지 아래쪽으로 스크롤하면 고급 설정란이 있습니다.
환경변수에서 Add new를 클릭합니다.
환경 변수 설정
Input 칸에 key와 value를 입력합니다.
이제 앱 설정이 완료되었습니다. 하단의 다음 버튼을 클릭합니다.
검토 페이지로 이동됩니다. 그럼 모두 확인후 문제 없다면 저장 및 배포를 클릭합니다.
이제 자동으로 배포가 진행됩니다.
배포 진행 화면
배포가 완료되면 해당 화면 처럼 Deployed 상태가 나타납니다.
배포 진행중에도 위 이미지의 빨간 표시 main을 클릭하면 배포 로그 및 실시간 배포 상태를 확인할 수 있습니다.
만약 배포가 실패했다면, 이곳에서 해당 로그를 확인하여 문제를 해결합니다.
배포 완료 후 임시 도메인이 생성 됩니다.
임시 도메인은 https://[임시도메인].amplifyapp.com 형식으로 생성됩니다.
이 도메인을 클릭하여 배포된 사이트를 확인할 수 있습니다.
AWS Amplify 외부 도메인 연결하는 방법 (feat. Route53)
Next js 14+ 에서 iframe 차단하는 방법. X-Frame-Options와 Content-Security-Policy 설정