AWS Amplify로 Next.js 배포하기

AWS Amplify로 Next.js 배포하기

1. AWS Amplify

  • 프론트엔드 웹 및 모바일 개발자가 AWS에 풀 스택 애플리케이션을 손쉽게 배포, 호스팅할 수 있도록 도와주는 솔루션
  • Next.js를 사용할 때 좀 더 편리하다
  • 기존 Vercel에 배포했지만 도메인을 따로 연결하기 위해 사용함

1) Amplify에 Next.js 앱 배포

  1. 첫번째로 Amplify console 로 들어서 웹 앱 호스팅

  1. github에 배포했기 때문에 github 클릭

3. Github 권한 부여를 하면 repository를 선택 할 수 있다 ( 선택한 repository만 권한 부여를 하게되면 선택한것만 업데이트 가능)

  1. 권한 부여가 끝나면 해당 배포할 branch 선택 ( main 선택하고 이 후에 브랜치 선택해도 상관없음)

  2. 설정 빌드 및 테스트는 그대로 둔다 ( 중요한건 고급 설정에서 node 버전 pakage 설정을 해줘야하는데 본인 사항에 맞는 node 패키지 버전을 설정한다

  3. 다음 버튼을 클릭하고 저장 및 배포를 시작하면 해당 Repository의 배포를 시작한다

혹시나 이러한 버전 에러가 발생하면 빌드 설정탭에서 Edit로 Docker 빌드 이미지를 설정해주면 된다

image8

이제 기다리면 배포가 완료된다

2) 도메인 설정

  • 사용할 도메인을 구입
  • 나는 Godday 여기서 원하는 도메인을 구입함
  1. 도메인 관리 탭에 들어가서 하위 도메인을 추가하고 내가 구매한 도메인이 dongnyeong.world면 그대로 입력해준다

  1. 해당 도메인을 설정하면 SSL 생성을 시작하고 SSL을 구성해줘야한다. 나타난대로 도메인 소유권을 확인하려면 해당 CNAME에 해당하는 DNS를 확인해야 사용 가능하다

  2. **AWS Route 53에 들어가서 호스팅 영역의 탭을 클릭해서 호스팅 영역 생성을 한다 기존에 Route 53에 생성했다면 안해도 있을 것이다**

  3. 호스팅 영역의 세부 정보를 클릭하면 네임 서버(이름 서버)의 정보들이 나타난다

나의 도메인 서비스가 관리되는 곳에서 해당하는 네임 서버들을 하나씩 그대로 넣어준다

  1. 나는 이대로 선택해서 도메인 설정이 끝났다

  2. 하지만 SSL 구성을 DNS로 확인해줘야하는 경우는 해당 도메인 사이트에서 DNS 설정에서 타입과 값을 입력해주면된다

  3. SSL 구성을 마치고 소유권 확인이 끝나면 도메인이 활성화된다

  4. 도메인 활성화가 끝나면 도메인 연결까지 끝난다