두 번이나 이 거지같은 next.js 배포에 떨어지다니

next.js 프로젝트 배포 중에서도 SSR 관련해서 헤맨 지 어느덧 2주차 되어가고 있습니다.
스스로에 대한 한계와 멘토의 부재, 그리고 도무지 완벽하게 파악할 수 없는 AWS 미로 속에서
Amplify 까지 오기 전에 시도해본 방법으로는,

1. docker image build (ecr, ecs 활용 목적)
2. 람다 엣지 어쩌구 설정해서 cloudFront 배포

였습니다만,
결과적으로는 모두 실패하고 여기까지 왔습니당 🥲✨

 

신이 나를 버리지 않았으므로,

너무나 다행히도 (?)

 

Amplify 에서는 next.js 의 ssg 그리고 ssr 까지 커버할 수 있는 서비스를 제공하기 시작했다. (오열)

** 참고 : 공식 문서

Amplify를 사용하여 Next.js SSR 앱 배포하기 - AWS Amplify호스팅

 

그러나,

Amplify console 로 아주 간단하게 작업하더라도 여러 오류에 직면하게 된다.

구글링 해보면 Amplify 및 next.js 배포와 관련된 정말 다양한 접근 방식 혹은 일괄적인 설명을 찾아볼 수 있다.

물론, SSR 호스팅 서비스는 업데이트가 비교적 최근이라 자료가 생각보다 부족할 수도 있다.

 

그러므로 이 글에서는 이런 저런 기본적인 과정들은 접어두고, 배포 완료에 이르기까지 겪었던 여정을 큼직하게 리스트업 해보려고 한다.

 

들어가기에 앞서,

✅ Amplify 를 선택한 이유

SSR 배포가 용이하다. -> 더 이상 할 말이 있을까? 없다고 봄..

그러나 한 마디 더 하자면 (?)

Git repo 와 연동이 손 쉽게 되며, env 설정도 브랜치 별로 가능하다.

배포 진행 시 로그를 통해 에러를 한 눈에 확인할 수 있고 도메인 설정도 Route 53 을 기존에 설정해뒀다면 너무나 쉽게 가능하다.

 

1. amplify.yml  빌드 설정

Amplify console 로 호스팅을 기본 세팅하게 되면 해당 파일은 자동으로 설정된다.

공식 문서를 보면 github 연결 및 앱 세팅을 하면 Amplify 가 해당 앱이 SSG 인지 SSR 인지 판단하여

baseDirectory 부분을 .next 로 할지 혹은 dist 나 out (이전 글 참조 : next export 할 경우 out 파일로 추출됨) 으로 할지를 자동으로 세팅해준다고 한다. (세상은 나보다 더 빨리 발전하는 중.. 흑..)

 

나의 경우 getServerSideProps 때문에 export 가 안 되었고 Amplify 정책에 따라 baseDirectory 는 .next 로 설정되었다.

다만, npm run build 할 때 빌드 부분에서 에러가 났는데,

 

npm private repository 때문이었다.

해당 레포 접근은 공식 문서에서도 언급하고 있다. 참조

빌드 설정 구성 - AWS Amplify호스팅

 

공식 문서

 

나는 기존에 github actions 에서 작성해둔 코드가 있어서 그 코드를 사용했고 build 까지 잘 진행되었다.

phases:
    preBuild:
      commands:
        - echo "//registry.npmjs.org/:_authToken={NPM_TOKEN}" > ~/.npmrc
        - npm install

 

2. Redirect 설정

다시 쓰기 및 리디렉션 설정에서 SSR 배포 시 주의해야 할 점 혹은 유의해야 할 점은

 

📌 .next 폴더에는 index.html 이 절대적으로 없다는 사실이다. 이 사실을 간과하고 접근하면 라우팅 문제가 생길 수 있다.

 

📌 백엔드 환경을 Amplify 에서 자체 구성하지 않고 따로 api 로 호출해서 사용하고 있기 때문에 도메인 설정 후 네트워크 헤더 또는 CORS 관련 부분을 백엔드 쪽에서도 필수적으로 확인해야 한다. (참고로 Amplify 는 풀스택 호스팅을 지향하고 있는 것 같다 🤔)

 

📌 나의 경우 기본으로 세팅되는

 

다시 쓰기 및 리디렉션 편집창

 

이 규칙도 제거했다.

 

** 참고 문서

AWS Amplify Console을 이용한 프론트엔드 배포자동화 시스템 구축하기

 

 

쓰다 보니 별 거 아닌 일에 너무 많은 시간과 스트레스를 쏟은 거 아닌 가 싶기도 하고..

생각나거나 앞으로 더 마주하게 될 문제 상황은 이후에 기록해야겠다. 끝 ✨