AWS / S3, Cloudfront를 활용해 배포하기

 

Vite로 프로젝트 배포

 

1. Vite로 프로젝트 생성

npm create vite@latest 250527-vite -- --template react

 

2. 빌드하기

npm run build

 

dist 폴더가 생성됨

 

빌드해 생성된 dist 폴더를 객체로 업로드할 것이다

 

3. 버킷 업로드

기존 객체는 삭제하고 dist 폴더 내 파일들을 드래그해 업로드한다.

 

업로드 후 속성탭의 맨 아래 웹사이트 엔드포인트로 들어가보면 바뀐 파일들로 잘 배포되어있는 것을 확인할 수 있다!

 

 

 

 

Next 프로젝트 배포

1. 프로젝트 생성

npx create-next-app@latest

 

이후 나오는 prompt는 뭐 프로젝트를 구현하고자 하는게 아니기 때문에 그냥 기본설정대로 체크하고 넘어간다

 

2. 빌드하기

NextJS의 정적, 동적 두 가지 방식으로 웹페이지를 배포할 수 있다

 

1) 정적(static) 방식

• 페이지가 빌드 타임에 미리 생성되어 HTML로 배포됨
• S3 + CloudFront 같은 정적 호스팅 환경에 배포가 가능하다
• + CRA, Vite로 만든 프로젝트도 모두 정적인 웹페이지

2) 동적(dynamic) 방식

• 페이지 요청 시 동적으로 비즈니스 로직을 처리하면서 html 파일을 생성
• 동적 방법으로는  s3으로 배포가 불가능함 (vercel, node.js같은 별도의 서버 환경이 필요)

 

즉 정적인 방식으로 처리한다

 

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
};

export default nextConfig;

 

그리고 터미널에 빌드 명령어 입력

npm run build

 

out 폴더 생성

이제 out폴더 내의 파일들을 버킷에 업로드하면 된다

 

3. 버킷 업로드

위와 같으니 생략

 

 

 

---

 

 

 

CloudFront

CDN

• Content Delivery Network의 약어
• Edge Location(전세계 곳곳에 컨텐츠의 복사본을 저장해놓을 수 있는 임시 저장소)를 구축하는 서비스로, 해당 컨텐츠에 대한 요청이 들어오면 캐싱해둔 컨텐츠를 제공하는 방식

CloudFront

• 컨텐츠를 빠르게 전송하게 해주는 서비스
• 기본 보안 기능도 제공함

CloudFront의 작동 과정

• s3에는 컨텐츠가 저장되어있음

1. 사용자 요청 발생
2. Edge Location 확인
3. CloudFront는 사용자와 가장 가까운 Edge Location에 요청해 컨텐츠를 받아옴 ⇒ 속도가 빨라짐

CloudFront를 사용하였을 때의 이점

• 컨텐츠를 더 빠르게 전송할 수 있음
• 기존 s3에는 HTTPS를 적용시키는 기능이 없음 ⇒ CloudFront를 사용해 보안을 더 강화할 수 있음

CloudFront를 사용한 아키텍쳐 구성

[사용자] ⇒ [CloudFront] ⇒ [S3]

 

 

 

실습

cloudFront 서비스 페이지 : https://us-east-1.console.aws.amazon.com/cloudfront/v4/home?region=ap-northeast-2#/welcome

 

1. 배포 생성

위 사이트로 들어가서 CloudFront 배포 생성 버튼 클릭

origin domain에서 생성한 버킷 선택 후 '웹 사이트 엔드포인트 사용' 클릭

나머지는 모두 기본설정...

 

기본 캐시 동작에서 '뷰어 프로토콜 정책'에서 Redirect HTTP to HTTPS로 체크(* HTTP로 요청해도 HTTPS로 바꿔 응답하는 정책)

실습이니까 가격 분류를 아시아에서 사용 체크

그리고 기본값 루트 객체로 index.html 작성 후 배포 생성 클릭

 

 

 

배포가 완료되면 이제 도메인을 발급받는데,

배포된 사이트를 확인하려면 2~3분 정도는 걸린다고한다...

아무튼 기다렸다가 배포 도메인 이름을 복사해 페이지를 열어보면 우측 이미지처럼 잘 배포된 것을 확인할 수 있다.