48일차 AWS

정상희·2025년 5월 30일

CRA-React배포 Next.js배포 S3 Vite-React배포 aws cloudfront 오즈코딩스쿨

코딩공부

목록 보기

57/60

현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. 프로젝트 생성하기

1) CRA로 React 프로젝트 생성

a. 프로젝트 생성

터미널
npx create-react-app 프로젝트명-cra

실행
npm start

b. 빌드하기

npm run build

c. 업로드

2) Vite로 React 프로젝트 생성

a. 프로젝트 생성

터미널

npm create vite@latest {프로젝트명} -- --template react
cd {프로젝트명}
npm i
npm run dev

b. 빌드하기

npm run build

c. 업로드

3) Next.js 프로젝트 생성

a. 프로젝트 생성

터미널

npx create-next-app@latest

b. next.config.mjs 수정

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

export default nextConfig;

c. 빌드하기

npm run build

d. 업로드

2. 웹 서비스를 배포할 때 사용하는 S3, CloudFront

1) CloudFront란?

컨텐츠(파일, 동영상 등)를 빠르게 전송하게 해주는 서비스이다.
AWS(아마존 웹 서비스)에서 제공하는 콘텐츠 전송 네트워크(Content Delivery Network, CDN) 서비스. 정적 및 동적 콘텐츠를 전 세계 사용자에게 빠르고 안전하게 전달하기 위해 사용된다.

CDN (Content Delivery Network): 사용자와 가까운 서버(엣지 로케이션)를 통해 콘텐츠를 전송함으로써 지연(latency)을 줄이고 성능을 향상시키는 네트워크.
CloudFront는 AWS의 CDN 서비스로, 이미지, HTML, CSS, JavaScript, 비디오, API 응답 등 다양한 콘텐츠를 캐싱하고 배포할 수 있다.

2) CloudFront를 사용하였을 때의 이점

S3만 사용해도 웹 서비스를 배포할 수 있다.

그렇다면 CloudFront는 왜 필요한걸까?

위의 설명에 따르면 CloudFront는 컨텐츠를 전송 받는 성능을 향상시키기 위해 사용한다. 그리고 HTTPS를 적용하려면 CloudFront를 사용해야만 한다. S3에는 HTTPS를 적용시키는 기능을 제공하고 있지 않다. 이 외에도 보안을 한층 강화할 수 있다는 장점이 있다.

이러한 장점들 덕분에 S3와 CloudFront를 같이 써서 웹 서비스를 배포한다.

3) CloudFront의 작동 과정

컨텐츠(파일, 동영상)는 S3라는 곳에 저장될 것이다. 하지만 그 S3 저장소가 한국에 있다고 가정하자. 그러면 한국 사용자는 S3와 거리가 가까우므로 데이터를 빠르게 전송받을 수 있다. 하지만 미국에 있는 사용자가 S3로부터 데이터를 전송받으려면 거리가 멀어 시간이 오래 걸리게 된다.

이런 문제를 해결하기 위해 전세계 곳곳에 컨텐츠(파일, 동영상)의 복사본을 저장해놓을 수 있는 임시 저장소를 구축한다. 그러면 미국에 있는 사용자가 컨텐츠를 전송받고 싶을 때, 가장 가까운 임시 저장소에서 컨텐츠를 가져오면 훨씬 속도가 빨라진다.

이런 형태의 서비스를 보고 CDN(Content Delivery Network)이라고 부른다. 그래서 CloudFront를 CDN 서비스라고도 표현한다.