📌 Summary

• aws Amplify에서 Nextjs를 배포합니다.

• NextJS의 주요 기능중 하나인 SSR에 대해 파악합니다.

• 배포를 위한 아키텍처를 나열하고 적합한 구조를 선정합니다.

📌 Nextjs

React 프로젝트와 차별점으로서 정적페이지를 호스팅하는것에서 벗어나
서버측에서 렌더링된 페이지를 보내주는것을 고려해야 하므로 서버가 별도로 필요합니다.

👉 Rendering

React 18 이전에는 React를 사용하여 애플리케이션을 렌더링하는 기본 방법은 전적으로 클라이언트에서 렌더링을 진행하는 것이었습니다.

Next.js는 HTML을 생성하고 클라이언트에 전송하여 hydrated 함으로써 애플리케이션을 페이지로 나누고 서버에서 pre-rendering 하는 더 쉬운 방법을 제공했습니다. 그러나 이로 인해 초기 HTML을 대화식으로 만들기 위해 클라이언트에 추가 JavaScript가 필요했습니다.

이제 서버 및 클라이언트 구성 요소를 통해 React는 클라이언트 와 서버에서 렌더링할 수 있으므로 구성 요소 수준에서 렌더링 환경을 선택할 수 있습니다.

기본적으로 APP Router는 서버 컴포넌트를 사용하므로 서버에서 구성 요소를 쉽게 렌더링하고 클라이언트로 전송되는 JavaScript의 양을 줄일 수 있습니다.

서버의 정적 및 동적 렌더링

Next.js는 정적 및 동적 렌더링을 사용하여 서버에서 렌더링을 최적화할 수 있는 옵션을 제공합니다.

정적 렌더링을 사용하면 서버 및 클라이언트 구성 요소 모두 빌드 시 서버에서 미리 렌더링할 수 있습니다 . 작업 결과는 캐시되어 후속 요청에서 재사용됩니다. 캐시된 결과는 유효성을 다시 검사 할 수도 있습니다 .

서버 및 클라이언트 구성 요소는 정적 렌더링 중에 다르게 렌더링됩니다.

• 클라이언트 구성 요소에는 HTML 및 JSON이 미리 렌더링되어 서버에 캐시되어 있습니다. 캐시된 결과는 hydration를 위해 클라이언트로 전송됩니다.
• 서버 구성 요소는 React에 의해 서버에서 렌더링되며 해당 페이로드는 HTML을 생성하는 데 사용됩니다.
  동일한 렌더링된 페이로드는 클라이언트의 구성 요소를 hydrate 하는 데에도 사용되므로 클라이언트에 JavaScript가 필요하지 않습니다.
  

동적 렌더링을 사용하면 서버 및 클라이언트 구성 요소가 모두 요청 시 서버에서 렌더링됩니다 . 

작업 결과는 캐시되지 않습니다.

👉 서버사이드 렌더링(SSR)

페이지가 서버 측 렌더링을 사용하는 경우 각 요청 에서 페이지 HTML이 생성됩니다.

페이지에 대해 Server-side Rendering을 사용하려면 getServerSideProps 함수가 필요합니다 . 

이 함수(getServerSideProps )는 모든 요청에서 서버에 의해 호출됩니다.

예를 들어 페이지에서 자주 업데이트되는 데이터(외부 API에서 가져옴)를 미리 렌더링해야 한다고 가정합니다.

getServerSideProps 를 사용하여 데이터를 가져오고 페이지에 전달할 수 있습니다.

export default function Page({ data }) {
  // Render data...
}
 
// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  // Pass data to the page via props
  return { props: { data } }
}

getServerSideProps와 getStaticProps가 유사 하지만 빌드시가 아닌 모든 요청에서 실행된다는 차이점이 있습니다.

👉 Deploying

Nextjs 프로젝트를 배포하는 다양한 방법을 소개합니다.

✅ Amplify

AWS 완전 관리형 서비스인 Amplify를 이용하여 Nextjs 어플리케이션을 배포합니다.

Nextjs의 SSR 기능을 완벽하게 지원합니다.

💡 Amplify 란?

AWS Amplify를 활용하면 풍부한 기능의 풀 스택 웹 및 모바일 앱을 개발 단계부터 배포 단계까지 그 어느 때보다 손쉽게 구축할 수 있습니다.

Amplify 장점은 다음과 같습니다.

• 빌드 및 배포 자동화 구축이 프로젝트 생성과 동시에 완성됩니다.

• Amplify 콘솔에서 도메인 연결을 비롯한 SSL 인증을 진행할 수 있습니다.

• 브랜치 생성 및 제거시 동적으로 배포를 생성하고 삭제할 수 있습니다.

• 서버리스이므로 사용한만큼 비용을 지불합니다.
  

✅ ECS (Standalone)

Node.js 또는 Docker를 사용하여 모든 기능을 지원하는 Next.js를 자체 호스팅할 수 있습니다.

standalone 기능을 사용하기 위해서는 12 이상의 nextjs 버전으로 프로젝트를 구성해야합니다.

next start 기능을 이용한 호스팅보다 이미지의 용량을 최적화하여 프로젝트를 배포할 수 있습니다.

✅ S3 + ECS

현재 호두랩스에서 사용하고 있는 방법입니다. 정적 페이지는 S3로 호스팅하고, SSR이 필요한 경우 ECS에서 서버의 역할을 담당합니다.

✅ S3 + Lambda

정적 페이지는 S3로 호스팅하고, SSR이 필요한 경우 Lambda를 이용하여 서버의 역할을 담당합니다.

📌 AWS Amplify (@Nextjs)

👉 Step 00. Getting started

Amplify를 이용하여 Nextjs를 배포하는 과정을 설명합니다.

AWS Amplify 콘솔에 접속하여 Amplify Hosting 시작하기를 클릭합니다.

프로젝트를 Github에 보관하였으므로, 저장소를 선택하고 계속 버튼을 클릭하여 리포지토리를 연결합니다.

Github에 로그인하여 Amplify와 연결합니다.

연결하고자 하는 계정을 클릭합니다.

Amplify와 연동할 repository를 선택합니다.

리포지토리 선택이 완료되면, 배포하고자 하는 브랜치를 선택할 수 있습니다.

빌드 설정
빌드 절차에 대한 내용을 현재 창에서 적용할 수 있습니다.
프로젝트의 루트경로에 amplify.yaml을 저장하여 관리할 수 있습니다.

별도의 추가적인 설정없이 저장 및 배포를 선택합니다. 추후 수정 가능합니다.

생성이 완료되었다면, amplify가 자동으로 브랜치로부터 소스를 가져와 CI/CD를 수행합니다.

배포가 완료되고, Amplify를 활용하는 방법 알아보기를 통해 추가적인 기능을 확인할 수 있습니다.

주소를 클릭하면 배포가 완료된 것을 확인할 수 있습니다.

👉 Step 01. 도메인 추가

Amplify를 이용하여 도메인 추가 및 SSL 적용을 손쉽게 구축할 수 있습니다.

좌측의 도메인 관리 탭에서 소유하고 있는 도메인을 이용하여 구성합니다.

원하는 도메인을 설정하여 저장시 자동으로 Route53에 전파됨과 동시에, SSL 적용을 수행합니다.

적용이 완료되면 아래 그림과 같이 도메인으로 배포된 어플리케이션을 확인할 수 있습니다.

👉 Step 02. 브랜치 추가

amplify 사용시 장점은 브랜치를 추가할 경우 손쉽게 어플리케이션을 구축할 수 있습니다.

dev 브랜치를 추가합니다.

Amplify 대시보드에서 브랜치 연결을 선택합니다.

새로운 브랜치를 인식하는것을 확인할 수 있습니다.

저장을 완료하면, 앞서 설정한 main 브랜치와 같이 CI/CD 파이프라인이 동작하는 것을 확인할 수 있습니다.

도메인 연결을 완료하면 아래와 같이 dev 브랜치도 손쉽게 배포 됨을 확인할 수 있습니다.

👉 Step 03. 미리보기

amplify의 미리보기 기능을 이용하면, pull request시 어플리케이션을 미리 확인할 수 있습니다.

dev 브랜치를 main으로 merge 하기 위한 pull request를 생성합니다.

amplify 미리보기 탭에서 main 브랜치에 대한 미리보기를 설정하면, 아래와 같이 미리보기 전용 어플리케이션 CI/CD가 동작하게 되며 url이 생성됩니다.

상태가 성공이 되었을때 url을 통해 pull request 요청된 작업 내용을 확인할 수 있습니다.

📌 Conclusion

AWS의 웹/앱 어플리케이션 호스팅 서비스인 Amplify를 통해 NextJS를 배포하였습니다.

Amplify를 이용하면 도메인 연결, CDN 구성, pull request 적용전 프로젝트에 대해서 미리보기 기능 등 프론트엔드 프로젝트를 개발에 편한 환경을 이용할 수 있습니다.

Amplify 단점으로는 프로젝트 비용이 증가할 수 있습니다.

• 빌드시 분당 $0.01가 청구됩니다.
• 데이터 전송량이 $0.15/GB 청구됩니다.
  CloudFront를 이용하여 배포할 경우 $0.12/GB 입니다.
• SSR 요청시 요청에 대해서 비용이 청구됩니다.

🔗 Reference

• AWS Amplify - https://docs.aws.amazon.com/ko_kr/amplify/latest/userguide/ttl.html#Instant-cache-invalidation-with-instant-deploys

• Nextjs 렌더링 - https://nextjs.org/docs/app/building-your-application/rendering

• Nextjs 배포 - https://nextjs.org/docs/pages/building-your-application/deploying

• Nextjs SSR - https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering#:~:text=side%20Rendering%20(SSR)-,Server%2Dside%20Rendering%20(SSR),-Also%20referred%20to