S3로도 배포가 가능하구나
C 서비스의 개발서버 배포를 하면서 S3로 배포되는 과정을 알게되었다.
EC2로만 배포를 진행했었는데 S3 버킷을 사용하여 배포가 가능하다. 단, 정적 페이지만 배포가 가능하다.
그 과정과 사용 이유를 알아보자.
package.json 파일을 보면 다음과 같은 명령어가 있었다.
"C-dev-publish": "yarn C-build:dev && aws s3 sync --delete ./build s3://dev.admin.C.me && aws cloudfront create-invalidation --distribution-id E13LWR6T2W0PJU --paths \"/*\""
먼저 하나씩 명령어를 살펴보면
C-dev-publish는 명령어의 이름
C-build:dev를 실행하고
aws s3 sync --delete ./build s3://dev.admin.C.me -> s3 버킷에 존재하는 최신 빌드 파일을 업로드하고 --delete 옵션으로 불필요한 파일을 정리
aws cloudfront create-invalidation --distribution-id E13LWR6T2W0PJU --paths ->
cloudfront에서 캐시 무효화 후 최신 파일이 적용되도록 강제 업데이트
사실 이 부분에서 먼저 알아야 할 부분은 S3에 빌드 파일을 올린다는 점이다.
S3를 이미지로 사용해본 경험이 있을 것이다. S3의 주소/imagename으로 접근을 해서 파일을 열 수 있다.
이와 동일하다.
S3 버킷은 URL로 파일에 접근할 수 있다.
그래서 build 파일에도 접근이 가능하다. index.html을 열 수 있으면 되니까
build 된 index.html 파일은
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
<link rel="stylesheet" href="/static/css/main.[hash].css" />
</head>
<body>
<div id="root"></div> <!-- React 앱이 렌더링될 DOM 요소 -->
<script src="/static/js/main.[hash].js"></script> <!-- React 앱의 JS 번들 -->
</body>
</html>다음과 같다. 그럼 main.[hash].js파일을 통해 동작시키는 모든 코드를 실행시킬 수 있다.
정리하면 S3 bucket에 build를 넣어두면 해당 index.html 파일에 접근하여
index.html+js+css+image 등 정적인 파일을 가지고 브라우저에서 그려줄 수 있다.
그럼 S3는 왜 동적인 작업을 할 수 없을까?
S3는 뇌가 없어..🧠
S3는 단순한 파일 서버이다. 서버 로직이나 동적 처리를 하지는 않는다. EC2는 가능하지(뇌 있음)
그렇기 때문에 단순한 서빙은 가능하지만 뭔가 로직처리를 할 수는 없다.
React 동적 페이지를 만들지 않아?
React는 페이지가 동적이지만 빌드/배포 방식이 동적이지는 않다. 즉, 서버에서 따로 처리해주는 것이 아닌 브라우저에서 js를 가지고 동적으로 그려주기 때문에 React 역시 S3로 배포가 가능하다.
React로 만든 서비스가 동적인거지 배포과정은 정적이다.
결국 React를 배포하면 index.html+js+css+정적 파일들
이고 이를 기반으로 브라우저에서 호출하기 때문에 결국 복잡한 로직(데이터 페칭) 등에 관여하는 건 사용자의 PC이다.
만약 Next는?
Next는 React의 프레임워크이다. 대신 SSR을 제공한다. SSR로 서버에서 요청할 때 마다 js를 사용하여 그려주게 된다면 S3는 그러한 로직 처리를 할 수 없기 때문에 사용이 불가능하다..
대신 SSG의 용도로 사용한다면 Next도 배포가 가능하다.
S3 + CloudFront = 가성비 📈
CloudFront ?
AWS에서 제공하는 캐싱 서버의 개념이다. 이를 사용하면 S3까지 요청이 가지 않고 CloudFront에 캐싱된 데이터가 있다면 요청 횟수를 줄일 수 있는 것이다.
이렇게 S3 + CloudFront를 사용하면 서버 비용을 줄일 수 있다고 백엔드 개발자분께서 알려주셨다.
EC2를 사용하는 이유?
EC2는 동적/정적 모두 서빙이 가능하고 데이터를 추적가능
사용자가 많은 경우 autoscaling도 가능
웹 서버, 데이터베이스 서버 등을 설치하고 운영 가능
네트워크 보안 제어 가능 등
배포 환경에 최적화 되어있기 때문에 자율성과 확장성을 가지고 배포가 가능하다.
S3로 배포하는 방법도 알게 되었다 나이스 🐱👓
