[나만의 명언집 배포] NextJS(^14.1) - ① AWS Amplify 배포

포스트 목적

해당 포스트는 NextJS14.1 버전의 나만의 명언집 프로젝트를 배포하기 위해 AWS Amplify 에 배포하는 과정을 정리한 포스트 입니다.

 

해당 배포 과정은 AWS 공식 사이트  와 외국 유튜버 Program With Erik(https://www.youtube.com/watch?v=3v3Mhql630g) 의 영상을 참고하여 이루어졌습니다.

 

해당 포스트는 시리즈 형식으로 최소 3개 내지 5개 정도의 포스트로 이어질 것 같습니다. 

 

현재 포스트는 AWS Amplify 배포하기 부분으로, 다음 포스트는 구매한 도메인을 지정하는 방법에 대해 다룹니다.

 

---

Amplify 시작하기

[aws 검색창]에 amplify 라고 검색 후  AWS Amplify 를 클릭 합니다.

 

 

그 후 [시작하기]를 클릭 합니다.

 

 

그럼 아래 하단의 화면이 나오는데 여기서 우측의 Amplify Hosting 의 [시작하기]를 선택 합니다.

 

 

 

Amplify Hosting 시작하기

그 후 아래 화면이 나오면 이 중에서 본인이 형상관리를 위한 원격 저장소로 사용하고 있는 곳을 선택 후에는 해당 소스코드 저장소를 조회하기 위한 별도의 인증 절차를 거쳐야 합니다.

 

 

배포할 리포지토리 및 브랜치 선택하기

인증이 끝나면, 리포지토리 브랜치 추가 항목이 나오고 여기서 배포할 리포지토리와 브랜치를 선택하여 다음으로 넘어 갑니다.

 

 

빌드 설정 확인 및  cloudWatch SSR 사용을 위한  IAM 권한 인증받기

빌드 설정 확인

그 다음에 볼 수 있는 화면은 빌드 설정 부분 입니다.  여기서 Amplify 는 해당 앱이 어떤 빌드 프로세스를 가지는지 자동으로 캐치하고 다음과 같이 설정 빌드를 보여주고 있습니다.

 

[중요] Next 14 버전 이상 이라면, 추가 설정이 필요하다(+ 환경변수 설정)

현재 amplify 는 13 버전에 대한 자동 빌드 설정이 되므로 최신 빌드 컨테이너를 사용자가 직접 지정해주어야 리눅스 컨테이너가 Next14 버전을 정상적으로 인식하여 처리할 수 있게 해줘야 합니다.

[빌드 이미지]에 amplify:al2023 이라 입력하면 최신 버전의 빌드 컨테이너를 빌드 시 사용하게 됩니다.

 

그리고 현재 앱에서 환경변수를 사용하고 있다면, 사용하는 환경변수의 키와 값을 모두 입력해줘야 합니다. 없으면 그냥 넘어가면 됩니다.

 

 

 

 

IAM 지정하기

그 다음 해애 할 것은 IAM 역할을 지정하는 겁니다. 여기서는 두 가지 선택지가 있는데,  만일 기존 서비스 역할이 있다면 그걸 선택하고, 신규라면 새 서비스 역할 생성 및 사용을 클릭하고 다음으로 넘어 갑니다.

 

만일 직접 IAM 을 사용자 정의하고자 한다면 아래 설명과 같이 IAM 콘솔로 가서 별도로 생성 후에 사용하면 됩니다. 이 부분은 여기 사이트를 방문해 보세요. 정말 자세하게 쉽게 설명해줍니다.

 

 

배포 과정 지켜보기

앞서 과정을 끝나고 나니 Amplify 에서 자동으로 프로비저닝 및 빌드, 배포 까지 해주네요. 고로 이젠 그 과정을 기다리기만 하면 됩니다.

 

 

 

빌드에 문제가 없다면 정상적으로 배포된 화면을 볼 수 있습니다.

 

 

 

포스트 마무리와 다음 포스트 소개

이제 배포 하는 부분은 모두 끝났습니다. 하나하나 해보면서 정리하다보니 약간 흐름이 이상할 수도 있습니다. 그래도 해당 포스트를 참고하시는 분이 있다면, 여기 까지는 잘 따라오셨을 거라 봅니다.

 

다음은 사용자의 지정 도메인을 설정하는 법에 대한 포스트를 작성합니다. 저 같은 경우에는 aws route 53 을 통해 발급 받은 도메인을 amplify 에서 등록하는 방법에 대한 정리가 될 것 같습니다.

 

---

[다음 포스트]  도메인 설정하기

다음 포스트는 도메인 설정에 대한 부분입니다.

[나만의 명언집 프로젝트] NextJS(^14.1) - ② Amplify 배포 | 도메인 설정