Cycle 2: React 프론트엔드 배포

프론트엔드 배포란?

프론트엔드 앱은 결국 HTML, CSS, JavaScript 파일입니다. 이 정적 파일들을 서버에 올려 누구나 접근할 수 있게 만드는 것이 배포입니다.

정적 사이트

서버 없이 HTML/CSS/JS 파일만으로 동작

예: 블로그, 포트폴리오, 문서 사이트

SPA (Single Page App)

JavaScript로 페이지 전환, API와 통신

예: React, Vue, Angular 앱

CDN과 엣지 배포

Cloudflare Pages는 전 세계 300개 이상의 데이터센터에 파일을 복제합니다. 사용자와 가장 가까운 서버에서 파일을 제공하므로 빠릅니다.

사용자

→

CDN 엣지

→

빠른 응답

빌드 프로세스

React 소스 코드는 브라우저가 직접 실행할 수 없습니다. 빌드 과정을 통해 브라우저가 이해하는 형태로 변환합니다.

터미널

# React 프로젝트 빌드
npm run build

# 결과: dist/ 또는 build/ 폴더 생성

빌드 결과물 (dist/)

폴더 구조

dist/
├── index.html          # 진입점 HTML
├── assets/
│   ├── index-abc123.js  # 번들된 JavaScript
│   ├── index-def456.css # 번들된 CSS
│   └── logo.svg         # 정적 에셋
└── favicon.ico

abc123 같은 해시는 캐시 무효화를 위한 것입니다. 파일이 변경되면 해시도 바뀌어 사용자가 새 버전을 받습니다.

Cloudflare Pages 배포

1 GitHub 저장소 연결

1. Cloudflare 대시보드 접속
2. Workers & Pages → Create application
3. Pages 탭 → Connect to Git
4. GitHub 계정 연결 및 저장소 선택

2 빌드 설정

Framework preset	Create React App / Vite
Build command	`npm run build`
Build output directory	`dist` (Vite) / `build` (CRA)
Root directory	(비워두기 또는 프론트엔드 폴더명)

3 환경 변수 설정

Settings → Environment variables에서 설정합니다.

환경 변수

# 예시 환경 변수
VITE_API_URL=https://api.myapp.com
VITE_APP_NAME=MyApp

Vite: VITE_ 접두사 필수
CRA: REACT_APP_ 접두사 필수

SPA 라우팅 문제 해결

404 에러가 발생한다면?

SPA에서 /about 같은 경로로 직접 접속하면 404가 발생합니다. 서버에는 index.html만 있기 때문입니다.

해결: _redirects 파일

public/_redirects 파일을 생성합니다. 모든 요청을 index.html로 보내고, React Router가 클라이언트에서 라우팅을 처리합니다.

public/_redirects

/* /index.html 200

이 한 줄이 모든 경로를 index.html로 리다이렉트합니다. 200 상태 코드로 응답하므로 새로고침해도 정상 동작합니다.

다음 단계

프론트엔드 배포가 완료되었다면, 이제 백엔드 API를 배포해봅시다. Cycle 3: Backend 배포에서 FastAPI를 Cloud Run에 배포하는 방법을 배웁니다.

Frontend 배포