프론트엔드 애플리케이션 EC2 배포 관련 질문입니다.
안녕하세요.
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를 이용한 정적 사이트 배포 - 정적 파일 배포에 관한 전략을 확인할 수 있습니다.
항상 새로운 방향과 기술에 대한 학습을 이어나가시길 바랍니다. 저도 최선을 다해 돕도록 하겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
EC2 터미널에서 docker pull
0
62
2
AWS ECR
0
57
2
FROM openjdk:17-jdk 현재 기준 dockerhub에 없습니다
1
98
2
Redis 볼륨 설정?
0
114
2
컨테이너의 IP
0
79
2
도커 이미지를 만들 때 application.yml
0
100
2
compose.yml 관리
0
86
2
ECR 리포지토리에 이미지가 3개가 보입니다.
0
76
2
액세스 키 등록하는 시점 관련 질문이 있습니다.
0
82
1
depends_on에 따른 컨테이너 실행 순서
0
75
2
실제 웹 서비스 배포 시 질문
0
80
2
도커 volume 질문
0
66
3
HTTPS로도 받고 싶으면 docker compose에 443도 쓰면 될까요?
0
71
2
sql 볼륨 폴더 지우면 데이터베이스 데이터 날라가는거 아닌가요?
0
71
2
39강 도커파일 빌드 경로 질문이 있습니다.
0
67
2
도커파일 copy
0
69
2
실무에서 docker compose up --build를 할 때
0
183
2
mysql_data 폴더 내부에 다른 파일이 있는데도 잘 되는 경우
0
83
2
도커 허브에서 postgres 버전 확인하는 법
0
127
2
보충 자료와도 관련된 추가 내용
1
81
1
현업에서 MySQL은 RDS와 도커 볼륨 중 어떤 걸 사용하나요?
0
108
2
노션 자료에 안 보이는 이미지가 있습니다
0
99
1
도커 허브에서의 latest가 가장 최신인 게 맞나요?
0
117
2
docker image ls 실행 시 나오는 내용이 다릅니다
0
86
2





