정적 호스팅 서비스에 배포하기

이번 장에서는 리액트 SPA(Single Page Application) 배포에서 가장 흔히 쓰는 방식 중 하나인 정적 호스팅 서비스(Static Hosting Service) 배포 흐름을 정리합니다.

정적 호스팅 서비스란?

정적 호스팅 서비스는 HTML, CSS, JavaScript, 이미지 등과 같은 정적인 파일(Static Files)을 저장하고 웹을 통해 제공하는 서비스입니다. 리액트와 같은 SPA는 빌드 과정을 거치면 결과적으로 이러한 정적 파일들의 집합이 되기 때문에, 정적 호스팅 서비스에 배포하기에 매우 적합합니다.

정적 호스팅 서비스의 장점

간편한 배포: 대부분 Git 저장소(GitHub, GitLab, Bitbucket 등)와 연동하여 자동 배포(CI/CD)를 쉽게 설정할 수 있습니다.
저렴하거나 무료: 많은 서비스가 무료 티어를 제공하며, 유료 플랜도 비교적 저렴합니다.
빠른 로딩 속도: CDN(Content Delivery Network)을 사용하여 사용자에게 가장 가까운 서버에서 파일을 제공하므로 로딩 속도가 빠릅니다.
안정성: 서버리스(Serverless) 형태로 운영되어 트래픽 급증에도 안정적입니다.
확장성: 별도의 서버 관리 없이도 쉽게 확장 가능합니다.

정적 호스팅 서비스의 종류

다양한 정적 호스팅 서비스가 있지만, 리액트 개발자들에게 인기 있는 몇 가지를 소개합니다.

Netlify (가장 인기 있고 강력)

Git 통합을 통한 자동 배포, 커스텀 도메인, SSL 인증서, 서버리스 함수(Lambda Functions), 폼 처리 등 다양한 기능을 무료로 제공합니다.
초보자에게 가장 추천하는 서비스입니다.

Vercel (Next.js 개발사가 만든 서비스)

Netlify와 유사하게 강력한 기능을 제공하며, Next.js 프로젝트에 특히 최적화되어 있습니다.
직관적인 UI와 빠른 배포 속도가 장점입니다.

GitHub Pages

GitHub 저장소에 있는 정적 파일을 무료로 호스팅할 수 있습니다. 매우 간단하지만, CI/CD 설정은 직접 해야 합니다.
개인 프로젝트나 포트폴리오 사이트에 적합합니다.

Firebase Hosting

Google의 Firebase 플랫폼에서 제공하는 서비스로, 빠르고 안전한 웹 호스팅을 제공합니다.
Firebase의 다른 서비스(인증, 데이터베이스 등)와 연동해 사용하기 좋습니다.

AWS S3 + CloudFront

클라우드 서비스에 대한 이해가 있다면 AWS S3에 정적 파일을 저장하고, CloudFront를 통해 CDN을 구성하여 배포할 수 있습니다.
가장 강력하고 유연하지만, 설정이 복잡하고 비용 관리가 필요합니다.

이 장에서는 Netlify를 중심으로 배포 과정을 설명합니다. Netlify는 무료로 시작하기 쉽고, 대부분의 리액트 앱 배포에 필요한 기능을 제공합니다.

Netlify를 이용한 배포 (GitHub 연동)

Netlify를 사용하여 React 앱을 배포하는 과정은 매우 간단하며, 대부분의 단계가 자동화되어 있습니다.

Netlify 배포 전 준비

Git 저장소에 코드 푸시: 리액트 프로젝트 코드가 GitHub, GitLab, 또는 Bitbucket과 같은 Git 원격 저장소에 푸시되어 있어야 합니다. (이전 장에서 만들었던 build 폴더는 .gitignore에 의해 Git에 추적되지 않으므로 별도 처리하지 않아도 됩니다.)

Netlify 계정 생성: Netlify 웹사이트(https://www.netlify.com/)에 접속하여 GitHub 계정 등으로 회원가입하고 로그인합니다.

Netlify를 통한 배포 과정

Netlify 대시보드에서 새로운 사이트 추가

로그인 후 Netlify 대시보드(Dashboard)로 이동합니다.
Add new site 또는 New site from Git 버튼을 클릭합니다.

Git 공급자 연결

GitHub, GitLab, Bitbucket 중 여러분의 프로젝트가 있는 Git 저장소 공급자를 선택하고 연결합니다. (최초 연결 시 권한 요청이 있을 수 있습니다.)

저장소 선택

연결된 Git 저장소 목록에서 배포하고자 하는 리액트 프로젝트의 저장소를 선택합니다.

빌드 설정 (Build settings) 구성

Netlify는 자동으로 리액트 프로젝트임을 감지하고 적절한 설정을 제안합니다.
Owner: 프로젝트를 소유한 Git 계정/조직
Branch to deploy: 배포할 Git 브랜치 (일반적으로 main 또는 master)
Base directory: 빌드 명령어를 실행할 디렉토리 (보통 프로젝트 루트이므로 비워둡니다).
Build command: 프로젝트를 빌드하기 위한 명령어. Vite 기반 프로젝트는 기본값이 npm run build (또는 yarn build)입니다.
Publish directory: 빌드된 정적 파일이 생성되는 디렉토리. Vite 기반 프로젝트는 기본값이 dist입니다.

확인: Vite 프로젝트는 Build command=npm run build, Publish directory=dist로 설정하면 대부분 바로 배포됩니다.

사이트 배포 (Deploy site)

모든 설정을 확인한 후 Deploy site 버튼을 클릭합니다.

배포 진행 및 확인

Netlify는 이제 여러분의 Git 저장소에서 코드를 가져와서 설정된 빌드 명령어를 실행하고, publish directory의 내용을 CDN에 배포합니다.
배포 진행 상황은 Netlify 대시보드에서 실시간으로 확인할 수 있습니다.
배포가 완료되면 임의의 URL(예: https://your-random-name.netlify.app/)이 생성되며, 이 URL을 통해 여러분의 리액트 앱에 접속할 수 있습니다.

자동 배포 (Continuous Deployment)

Netlify의 가장 큰 장점 중 하나는 자동 배포(Continuous Deployment) 기능이에요.

한번 설정해두면, 여러분이 지정한 브랜치(main 등)에 코드를 푸시할 때마다 Netlify가 이를 감지하여 자동으로 빌드하고 배포를 시작합니다.
이로 인해 개발자는 배포 과정에 신경 쓸 필요 없이 코드 작성에만 집중할 수 있습니다.

커스텀 도메인 설정

임의의 Netlify URL 대신 자체 도메인(예: www.myawesomeapp.com)을 연결할 수 있습니다.

Netlify 대시보드에서 해당 사이트를 선택합니다.

Domain settings 탭으로 이동합니다.

Add custom domain 버튼을 클릭하고, 여러분이 소유한 도메인 이름을 입력합니다.

Netlify가 제시하는 DNS 설정(CNAME 또는 A 레코드)을 여러분의 도메인 등록 업체(가비아, GoDaddy 등)에서 적용합니다.

설정이 반영되면 Netlify가 자동으로 무료 SSL 인증서(Let's Encrypt)를 발급해 HTTPS를 적용합니다.

라우팅 문제 해결 (SPA Fallback)

리액트 SPA는 클라이언트 측 라우팅(예: React Router)을 사용합니다. 즉, 모든 경로 요청(example.com/about, example.com/products/123)이 결국 index.html 파일을 로드해야 합니다.

하지만 웹 서버는 기본적으로 요청된 경로에 해당하는 파일이 없으면 404 Not Found 에러를 반환합니다. 이 문제를 해결하기 위해 Netlify와 같은 정적 호스팅 서비스에서는 리다이렉트 규칙을 설정하여 모든 유효하지 않은 경로 요청을 index.html로 fallback 시키는 기능을 제공합니다.

Netlify에서는 프로젝트의 public 폴더 안에 _redirects 파일을 생성하여 이 규칙을 추가할 수 있습니다.

public/_redirects 파일 생성 (필수)

/* /index.html   200

이 한 줄은 "모든 경로(/*)로 들어오는 요청을 /index.html로 보내고, HTTP 상태 코드 200(OK)을 반환하라"는 의미입니다. 이렇게 하면 React Router가 경로를 처리할 수 있게 됩니다.

주의: 이 파일은 public 폴더에 있어야 빌드 시 dist 폴더로 복사됩니다.

기타 정적 호스팅 서비스의 배포 (간략)

다른 주요 정적 호스팅 서비스들도 Netlify와 유사한 배포 과정을 가집니다.

Vercel
- Netlify와 거의 동일한 흐름으로 Git 저장소 연동 및 자동 배포를 지원합니다.
- vercel CLI 도구를 사용하면 명령줄에서도 쉽게 배포할 수 있습니다. (vercel 명령 후 dist 폴더를 선택).
GitHub Pages
- 프로젝트의 main (또는 gh-pages) 브랜치에 dist 폴더의 내용을 배포합니다.
- Vite 프로젝트는 gh-pages 패키지와 vite.config의 base 설정을 함께 사용하면 안정적으로 배포할 수 있습니다.
```
// package.json
{
  "name": "my-react-app",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "devDependencies": {
    "gh-pages": "^6.3.0"
  }
}
```
  vite.config.ts에서 base: '/<YOUR_REPO_NAME>/'를 설정한 뒤 npm run deploy를 실행하면 됩니다.
Firebase Hosting
- Firebase CLI를 설치하고 firebase init으로 프로젝트를 초기화한 후, firebase deploy 명령어로 배포합니다.
- firebase.json 설정 파일에서 public 디렉토리를 dist로, rewrites 규칙을 index.html로 설정하여 SPA 라우팅 문제를 해결합니다.

배포 절차 정리와 다음 학습 포인트

이제 여러분은 React 앱을 빌드하고, Netlify와 같은 강력하고 편리한 정적 호스팅 서비스를 사용하여 전 세계 사용자에게 배포하는 방법을 익히셨습니다.

정적 호스팅 서비스는 React SPA 배포에 가장 적합한 옵션 중 하나입니다.
Netlify는 Git 통합, 자동 배포, 무료 SSL, 커스텀 도메인 등 강력한 기능을 무료로 제공하여 초보자에게 특히 추천됩니다.
_redirects 파일 설정을 통해 SPA 라우팅 문제를 해결하는 것이 중요합니다.

이제 사용자는 배포된 웹 애플리케이션에 접근해 상호작용할 수 있습니다.

정적 호스팅 서비스에 배포하기

목차