AWS에서 NextJS SSR를 사용하여 React 앱을 구축하는 가장 저렴한 방법?
Nextjs는 서버 기능을 필요로 하는 노드 프레임워크이므로 서버 측 렌더링에 사용하는 것은 S3에서만 호스트할 수 없습니다.하지만, 이는 애플리케이션 전체를 EC2에서 호스팅하는 것(매우 비싼 것)만이 유일한 대안이라는 것을 의미합니까?아니면 다른 중간 솔루션이 있을까요?
Next.js SSR + 서버리스 프레임워크 + AWS Lambda
24시간 365일 실행되는 전체 AWS EC2 인스턴스를 관리하고 실행하는 기존 방식을 따르지 않고 Next.js SSR App을 배포합니다.AWS lambda와 Serverless 프레임워크를 사용하는 비용 효율적이고 현대적인 접근법이 하나 더 있습니다.
Q. AWS lamda란 무엇입니까?
AWS Lambda를 사용하면 서버를 프로비저닝하거나 관리하지 않고도 코드를 실행할 수 있습니다.소비하는 컴퓨팅 시간만큼만 지불하면 됩니다.
Q. 서버리스 프레임워크란 무엇입니까?
Serverless Framework Open Source: AWS Lambda, Azure Functions, Google Cloud Functions.
Q. 서버리스 Next.js란 무엇입니까?
이것은 Next.js 앱을 전개하기 위해 구축된 서버리스 컴포넌트입니다.또한 정적 폴더 또는 공용 폴더에 있는 모든 자산이 S3에 업로드되고 CloudFront에서 자동으로 제공되므로, 이것이 바로 고객이 원하는 것이라고 생각합니다.
아래는 사용자에게 앱을 제공하는 방법을 설명하는 아키텍처입니다.
서버리스 프레임워크가 처음인 경우 프런트엔드 개발자를 위한 서버리스라고 하는 서버리스 커뮤니티의 무료 코스를 수강할 것을 권장합니다.
편집: 2021년 3월 3일
@super7egazi는 아래의 코멘트에서 진정한 우려를 표명했다.다행히 람다 기능을 따뜻하게 유지하는 방법은 몇 가지 있습니다.이는 일정된 ping 이벤트를 함수에 전송하여 요청을 처리할 수 있는 활성 및 유휴 상태를 유지하는 동작입니다.
구글에서 "How to keep lambda functions?"를 검색하면 이를 위한 다양한 방법과 플러그인을 찾을 수 있습니다.
아래 링크를 참고용으로 첨부합니다.
AWS Next.js Terraform 모듈
이 사용 사례에서는 서버리스 프레임워크의 저비용 대안으로 오픈 소스 테라폼 모듈을 만들었습니다.모든 SSR 작업에 Lambda@Edge에만 의존하는 것이 아니라 라우팅에만 Lambda@Edge를 사용하고(일종의 역프록시로), API 게이트웨이를 통해 요청을 지역 Lambda로 내부적으로 리디렉션합니다.
에 대부분의 은 CloudFront에 대해 ._next/static/*CSS, js는 Lambda@Edge를 사용합니다.
따라서 요청당 비용은 루트마다 다릅니다.
정적 자산 요구: css, js, 이미지
CloudFront 및 S3 비용만 적용됩니다(CloudFront에서 누락 시).
HTML 요구: 사전 렌더링된HTML 루트 또는 서버 사이드 렌더링(SSR)이 필요한 루트
Cloudfront, Lambda@Edge(프록시, 1ms 단계로 미터링) 비용이 적용됩니다.
CloudFront Edge 캐싱을 기반으로 한 신속한 서비스를 제공하는 사이트를 사용하는 반면, 이 모델에서 수천 건의 요청에 대한 총 비용은 일반적으로 월 0.50달러보다 훨씬 낮습니다.
GitHub repo에 대한 자세한 내용은http://https://github.com/dealmore/terraform-aws-next-js 를 참조해 주세요.
Next JS + Serverless는 무료가 아닙니다.
NextJS + Serverless는 현재 무료가 아닌 Lambda Edge에 배포되어 있습니다.람다(Lambda@Edge가 아님)의 프리티어를 즐기지 않습니다.
Vercel + NextJs 무료
트래픽이 적은 Web 사이트를 사용하고 있는 경우는, 백엔드의 Lambda(AWS Network)를 사용하는 Vercel.com 를 사용해 전개하는 것을 추천합니다.
* 취미 버전은 무료이며 AWS Lambda Free 계층에 버금가는 넉넉한 무료 트래픽과 호출을 제공합니다.
NextJS 앱의 도입은 GitHub 통합으로 GitHub+Vercel의 자동 도입에 업로드하는 것만큼이나 간단합니다.S3, 호스팅 또는 정적 파일에 대해 걱정할 필요가 없습니다. Github에 푸시하는 순간 모든 것이 Vercel에서 호스팅됩니다.개발에만 집중하면 됩니다.
요건이 높아지면(Hobby 패키지를 넘어 Pro 패키지를 넘어), Serverless@Edge에 도입하는 것이 비용 효율이 높아집니다.
그때까지는 도메인을 전환하기만 하면 됩니다.
업데이트: VPS에 도입하기만 하면 됩니다.
서버리스(Serverless)는 좋은 개념이며, 다양한 플랫폼에서 웹 사이트를 무료로 시작할 수 있는 것은 장점입니다.
그러나 방문자에게 페이지를 로드하는 데 3~4초가 걸릴 수 있으므로 콜드 스타트는 큰 문제가 될 수 있습니다.
스태틱 또는 스태틱 증분 생성을 수행하는 경우에는 이 문제가 크게 발생하지 않습니다.getServerSideProps에는 전혀 도움이 되지 않습니다.
콜드 스타트 때문에 어려움을 겪고 있다면 저를 믿고 VPS로 넘어가세요.5달러짜리 VPS는 사이트를 꽤 잘 운영할 수 있다.
AWS Lightsail을 사용할 수 있습니다.https://aws.amazon.com/lightsail/
제 경험으로는nextjs클라우드 기능은 대규모 애플리케이션을 도입하기에 적합하지 않으므로 다음과 같은 옵션을 선택할 수 있습니다.
- 앱이 매우 작아서 절대 확장되지 않을 경우에만 클라우드 기능을 사용하십시오.클라우드 기능에는 파일 크기, 종속성, 번들 크기 등에 제한이 있습니다.
- AWS Lightsail: https://aws.amazon.com/lightsail/ 및 Nginx 및 노드를 사용하여 셀프 셋업할 수 있는 작은 VPS.한 달에 5달러 정도 하고 크레딧을 사용할 수 있어요.
- 1번과 같지만 디지털 오션에서요
- AWS Ec2
Amazon에서 호스팅해야 하는 요건이 있는지 여부는 확실하지 않지만, Digital Ocean에서 호스팅할 수 있습니다.또한 Amazon으로 이행하고 싶다고 확신하실 때까지 Heroku의 무료 계층에서 호스팅할 수 있습니다.나중에 보다 고가의 솔루션과 EC2 호스트:
- Digital Ocean을 통해 1GB 메모리 - 25GB SSD - 1TB 전송 시 월 $5
- Heroku 메모리는 512MB, Web은 1개, Worker Dyno는 1개 무료로 제공되며, 비용을 지불해도 저렴한 가격으로 Heroku가 관리 서비스를 제공하므로 모든 것을 처리할 수 있으므로 아무것도 설정할 필요가 없습니다.
더 비싼 솔루션을 구입하기 전에 먼저 시작하는 것이 좋습니다.
그리고 당신의 질문에 대한 답변: 네, EC2는 Amazon과 Elastic beanstalk에서 가장 저렴합니다. 만약 당신이 Amazon 내에서 더 관리된 솔루션을 원한다면.
nextJs 웹사이트를 도입하기 위해 AWS lambda: https://github.com/serverless-nextjs/serverless-next.js를 사용해 왔습니다.사용은 놀라울 정도로 간단했습니다.불행히도 페이지 로드가 매우 느리기도 했다.2초에서 7초까지였어요.구글 검색 콘솔에서도 확인되었습니다.
우리는 이 문제를 깊이 파고들 방법을 찾을 수 없었고, 어떻게 해결할 수 있었는지도 몰랐지만, 냉랭한 출발이 의심됩니다.AWS는 몇 가지 조사를 거쳐 이론적으로 동시 해결이 가능했다.
하지만 Lambda@Edge인데다 가격도 비싸서 제대로 할 수가 없었어요!
http://nachonacho.com에서는 SEO에 중점을 두고 있기 때문에 페이지를 로드하는 시간이 가장 큰 고민이었습니다.
우리는 마침내 단순한 AWS EC2로 옮기기로 결정했다.
여기 비교가 있습니다.
출처 : https://www.site24x7.com/
- 하늘색 : EC2
- 다크 블루: 람다 이미지
출처 : https://www.dareboost.com/
언급URL : https://stackoverflow.com/questions/61433306/cheapest-way-to-deploy-a-react-app-using-nextjs-ssr-on-aws
'programing' 카테고리의 다른 글
| WooCommerce를 구매하려면 등록이 필요합니다. (0) | 2023.03.05 |
|---|---|
| 'React Owner만 참조할 수 있다'는 것은 무슨 뜻입니까? (0) | 2023.03.05 |
| MongoDb: 존재하지 않는 경우 요소를 배열에 추가합니다. (0) | 2023.03.05 |
| php 스크립트에 대한 Ajax 호출이 404 오류를 반환합니다. (0) | 2023.03.05 |
| Google Analytics - 리디렉션에 의한 아웃바운드 링크 추적 (0) | 2023.03.05 |