인프런 커뮤니티 질문&답변
작성한 질문수
프론트엔드 애플리케이션 EC2 배포 관련 질문입니다.
해결된 질문
작성
·
66
0
안녕하세요.
EC2 강의를 듣던 중, 프론트엔드 애플리케이션은 주로 CDN을 통해 배포하고, 백엔드 API 서버는 EC2에 배포한다고 설명해주셨는데 이와 관련해 궁금한 점이 있습니다.
만약 CSR 기반의 프론트엔드 프로젝트라면, 빌드 후 생성된 정적 파일을 S3에 업로드하고 CloudFront 같은 CDN을 통해 배포하는 방식이 충분하다고 생각합니다.
하지만 최근에는 React에서 Server Actions 같은 서버 기능이 도입되고, Next.js 역시 SSR, API Routes 등을 포함하면서 정적 파일만으로 구성되지 않는 경우가 많아지고 있습니다.
이런 경우, 프론트엔드 애플리케이션은 어떤 방식으로 어디에 배포하는 것이 적절할까요? CDN만으로는 어려워 보이는데, EC2나 다른 대안이 있는지도 궁금합니다.
감사합니다.
답변 2
0
안녕하세요 민기님! 질문 잘 해주셨습니다~~
말씀해주신 대로 최근에는 Next.js와 같이 SSR을 많이 활용하는 추세이고,
SSR은 CDN, Cloudfront로 배포가 어렵습니다.
그러다보니 최근 SSR을 배포할 때는 EC2(또는 ECS, EKS 등) 또는 Vercel을 많이 활용합니다.
그 중에서도 프레임워크를 Next.js는 Vercel와 궁합이 좋기 때문에
배포할 때에 Vercel을 많이 사용하는 걸로 알고 있습니다!
이 외로 또 궁금한 점 있으시면 질문 남겨주세요~~
0
안녕하세요, 인프런 AI 인턴입니다. 김민기님.
현재의 웹 애플리케이션 환경에서는 SSR 및 동적 기능을 구현하기 위해 다양한 방식의 배포가 필요합니다. 이에 대한 전반적인 설명을 아래에 정리하였습니다.
프론트엔드 애플리케이션 배포 방법
CSR (Client-Side Rendering):
- CSR 방식은 정적 파일을 S3에 저장하고, CloudFront 같은 CDN을 통해 전 세계에 배포하는 방식이 가장 효율적입니다. 이 방법은 낮은 비용과 신속한 콘텐츠 제공을 위해 적합합니다.
- CSR 방식은 정적 파일을 S3에 저장하고, CloudFront 같은 CDN을 통해 전 세계에 배포하는 방식이 가장 효율적입니다. 이 방법은 낮은 비용과 신속한 콘텐츠 제공을 위해 적합합니다.
SSR (Server-Side Rendering) 및 양방향 통신:
- Next.js와 같은 SSR 기반 프레임워크를 사용할 경우, 단순히 정적 파일만으로 서비스가 이루어지지 않습니다. Next.js의 경우 Vercel을 통해 호스팅하거나, AWS에서는 Amplify를 통해 손쉽게 배포할 수 있습니다. 이 방법들은 AWS EC2보다 더 관리가 용이하고, CI/CD가 내장되어 있어 편리합니다.
- EC2를 사용할 경우, Node.js 환경을 EC2 인스턴스에 구축하여 SSR 기능을 제공하고, 각종 API 경로를 설정하여 배포할 수도 있습니다.
- Next.js와 같은 SSR 기반 프레임워크를 사용할 경우, 단순히 정적 파일만으로 서비스가 이루어지지 않습니다. Next.js의 경우 Vercel을 통해 호스팅하거나, AWS에서는 Amplify를 통해 손쉽게 배포할 수 있습니다. 이 방법들은 AWS EC2보다 더 관리가 용이하고, CI/CD가 내장되어 있어 편리합니다.
API Routes 및 Server Actions:
- Next.js의 API Routes 기능을 사용하면 백엔드 API 서버를 별도로 두지 않고도 함수를 Cloud Function처럼 사용할 수 있습니다. 이럴 경우 Vercel과 같은 호스팅 서비스가 상당히 유용합니다.
- Next.js의 API Routes 기능을 사용하면 백엔드 API 서버를 별도로 두지 않고도 함수를 Cloud Function처럼 사용할 수 있습니다. 이럴 경우 Vercel과 같은 호스팅 서비스가 상당히 유용합니다.
CDN 조합:
- 기본적으로 모든 정적 파일은 CDN으로 서빙하고, SSR 및 API 관련 요청은 EC2나 Vercel 등의 서버에서 처리하는 하이브리드 구조를 구현하는 것이 트렌드입니다.
- 기본적으로 모든 정적 파일은 CDN으로 서빙하고, SSR 및 API 관련 요청은 EC2나 Vercel 등의 서버에서 처리하는 하이브리드 구조를 구현하는 것이 트렌드입니다.
아래는 관련 질문에 대한 유사한 답변을 확인할 수 있는 링크입니다:
- Next.js SSR 및 API Routes 배포 - Next.js 애플리케이션의 다양한 배포 옵션에 대해 다루고 있습니다.
- S3와 CloudFront를 이용한 정적 사이트 배포 - 정적 파일 배포에 관한 전략을 확인할 수 있습니다.
항상 새로운 방향과 기술에 대한 학습을 이어나가시길 바랍니다. 저도 최선을 다해 돕도록 하겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.