개발자

Next.js 배포 어떻게 해야할까요?

2023년 07월 08일조회 1,743

안녕하세요 프론트엔드 취준생입니다. 사이드프로젝트를 vercel로 배포해두었는데 많은 이미지를 처리하다보니 vercel 측에서 제공하는 이미지 최적화 무료횟수를 초과하여 배포가 중단이 되버렸습니다 ㅠ 그래서 이번기회에 새로운 배포방법을 배워볼려하는데 어떤조합으로 해야할까요? S3는 정적배포이기때문에 next의 서버함수들을 사용하지못한다고 알고있습니다

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 4

인기 답변

김하림님의 프로필 사진

저도 최근에 배포가 필요해서 리서치를 했었는데, 비용 관점에서 보면 아래 옵션들이 괜찮아 보였습니다. 1. fly.io (https://fly.io/docs/languages-and-frameworks/nextjs/) Heroku의 뒤를 이을 경쟁자로 언급되는 플랫폼입니다. 도커파일 기반으로 배포가 가능하며, 도커에 대한 지식이 조금 필요합니다. 다만, fly.io 역시 다음과 같은 무료 이용량 제한이 존재합니다. - Up to 3 shared-cpu-1x 256mb VMs† - 3GB persistent volume storage (total) - 160GB outbound data transfer 2. Cloudflare Pages (https://github.com/cloudflare/next-on-pages) Cloudflare 팀에서 Next.js 최신 버전을 따라가면서 꾸준히 유지보수를 하고 있는 프로젝트인데, 다들 잘 모르시더라구요. 저는 모노레포 지원이 미비해서 포기했지만, 일반적인 배포 환경이라면 시도해 볼만한 것 같습니다. 다만, 이미지 최적화 API를 제공하지 않는 등 조금 삽질이 있을수도 있습니다. (링크: https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#statically-imported-images-on-pages) 만약 이미지 최적화만 끄고 싶다면, Next.js 설정의 unoptimized 옵션을 활성화하는 방법도 있습니다. (링크: https://nextjs.org/docs/pages/api-reference/components/image#unoptimized)

강수호님의 프로필 사진

작성자님에게 발생한 문제 같은 경우에는 이미지들을 cdn에 업로드 함으로써 해결할 수있을 것 같아요. 구조가 정확히 어떻게 되있는지는 모르겠지만 이미지들을 s3에 업로드하고 같은 aws 서비스인 cloudfront(cdn서비스)에 올려 서빙하는 방식을 찾아보면 도움이 될것 같아요. 추가로 nextjs는 하나의 서버를 띄우는거라 s3만으로는 해결하기 힘들구요. aws ec2로 배포하는걸 추천드립니다. 처음에는 어렵지만 배포과정에서 배울게 많으실것 같아요.

권혁진님의 프로필 사진

S3 는 클라우드 스토리지로 알고있어서 S3에 정적인 리소스들을 올려놓고 Ec2 나 lightsail 서버세팅을 하고 Cloudfront 로 캐싱을 하시면 될것 같아요

커리어리 AI 봇님의 프로필 사진

Next.js 프로젝트를 배포하는 방법에는 여러 가지가 있습니다. 다음은 일부 방법을 소개합니다: 1. AWS Elastic Beanstalk: Elastic Beanstalk는 AWS에서 제공하는 플랫폼 서비스로, 웹 애플리케이션을 쉽게 배포하고 관리할 수 있습니다. 이 서비스는 Next.js 애플리케이션에 대한 환경 설정과 배포를 자동화하며, 수동 관리가 필요한 부분을 최소화합니다. 이 방법을 사용하면 S3를 정적 웹 호스팅으로 사용하되, Elastic Beanstalk에서는 Next.js의 서버 기능을 사용할 수 있습니다. 2. Docker with AWS Fargate or EC2: Docker는 애플리케이션을 컨테이너화하여 이식성을 높이고 환경에 구애받지 않게 합니다. Docker로 Next.js 애플리케이션을 패키지화한 후, AWS Fargate나 EC2 인스턴스에 배포할 수 있습니다. 이 방법 역시 Next.js의 서버 기능을 활용할 수 있습니다. 3. Vercel에 Custom Image Optimizer 설정: 이미지 최적화에 대한 요구가 높다면, Vercel의 이미지 최적화 기능 대신에 직접 이미지 최적화 서버를 구축하는 것을 고려해볼 수 있습니다. 이를 위해서는 Next.js의 `next.config.js`에서 `images` 설정을 수정해야 합니다. `loader`를 `custom`으로 설정하고 `path` 옵션에 이미지 최적화 API 엔드포인트를 설정하면 됩니다. 이 엔드포인트는 예를 들어, 별도로 구축한 Node.js 서버나 AWS Lambda 함수 등이 될 수 있습니다. 위의 방법들 중에서 적절한 방법을 선택하시는데 참고하시기 바랍니다. 각각의 방법은 다른 세부 구성이 필요하므로, 선택한 방법에 대해 더 깊이 이해하고 적용해 보시는 것이 중요합니다. 또한, 비용, 유지 보수, 확장성 등을 고려하시는 것도 중요합니다.

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!