AWS Amplify에서 Next.js 배포 및 환경변수 설정 방법
새롭게 리뉴얼된 Amplify ui 변경으로 인해 다시 정리하게 되었습니다. 이번 포스팅에서는 AWS Amplify를 사용하여 Next.js 프로젝트를 배포하는 방법을 정리하겠습니다.
AWS Amplify - Next.js 배포 및 환경설정 최종 정리
이전 포스팅에서도 다루었지만, 기존 amplify ui 변경으로 인해 다시 정리하게 되었습니다.
이번 포스팅에는 환경 변수 설정 및 amplify.yml 파일 수정 방법을 추가하였습니다.
목차
1. Amplify란?
AWS Amplify는 AWS에서 제공하는 서비스 중 하나로, 프론트엔드 및 백엔드 애플리케이션을 빌드, 배포 및 호스팅할 수 있는 플랫폼입니다.
Next js 사용시 배포를 위해 대표적인 방법으로는 Vercel, Netlify, AWS Amplify 등이 있습니다. 이 중에서 AWS Amplify를 사용하는 이유는 다음과 같습니다.
- AWS Amplify는 AWS의 다양한 서비스와 연동이 용이합니다.
Amplify는 도메인 연결, SSL 인증서 발급, Github, Gitlab 등과의 CI/CD 파이프라인 설정 등을 쉽게 할 수 있습니다. 또한, 인증, 데이터베이스, 스토리지, Lambda 함수 등 다양한 AWS 서비스와 연동이 용이합니다.
이 중에서 Next.js 프로젝트를 Amplify로 배포하고 도메인을 설정하는 방법을 정리하겠습니다.
AWS 회원가입은 생략하겠습니다. 이미 AWS 계정이 있다고 가정하고 진행하겠습니다.
AWS 로그인 후 콘솔로 이동합니다.
AWS Console
2. 리전 확인
리전은 AWS의 데이터 센터가 위치한 지역을 의미합니다. 서비스를 생성할 때 리전을 선택하게 되는데, 리전에 따라 서비스의 가용성과 성능이 달라집니다.
우측 상단에 있는 도시이름을
을 클릭하여 리전을 확인합니다.
만약 국내 (한국) 지역에서 서비스를 한다면, 아시아 태평양 (서울)
을 선택하면 됩니다.
리전 선택
리전 설정이 완료되었다면, Amplify로 이동합니다.
왼쪽 상단의 검색 창에 Amplify
를 검색하여 AWS Amplify
로 이동합니다.
AWS Amplify 홈 화면
홈 화면에서 Deploy an app
을 클릭합니다.
다음과 같은 새 앱 생성 화면이 나타납니다.
새 앱 생성 화면
3. Github 저장소 연동
이번 포스팅 예시는 github 저장소를 연동하여 배포하는 방법을 다룹니다.
Github 저장소
를 선택하고 다음
버튼을 클릭합니다.
Github 권한을 업데이트 합니다.
Github 권한 업데이트를 하고 저장소를 선택합니다.
Github 저장소 선택
다음 브렌치를 선택합니다. 보통은 main
브렌치를 선택합니다. 다음 버튼을 클릭합니다.
4. 앱 설정 & 빌드 설정
다음은 앱 설정화면입니다.
앱 설정 화면
프레임워크는 자동으로 감지된 것을 볼 수 있습니다.
앱 설정화면에서 앱 이름과 빌드 명령, 환경설정 등을 할 수 있습니다.
중간의 서비스 역할은 만약 IAM 역할이 있으면 사용하시되,
없다면 새 서비스 역할 생성 및 사용
을 클릭합니다.
5. 환경 변수 설정
중간의 Edit YML file
버튼을 클릭하여 amplify.yml
파일을 수정할 수 있습니다.
amplify.yml 수정 화면
기본적으로 자동으로 생성된 amplify.yml
파일이 있습니다.
이 파일을 수정하여 환경 변수를 설정할 수 있습니다.
다음은 예시입니다.
위 예시 코드에서 env | grep -e DB_HOST -e DB_USER -e DB_PASS >> .env.production
부분은 환경 변수를 .env.production
파일에 저장하는 부분입니다.
환경변수 이름을 -e 옵션으로 지정하여 해당 환경 변수를 수정합니다. DB_HOST
, DB_USER
, DB_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 설정