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

이번 장에서는 리액트 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 앱을 배포하는 과정은 매우 간단하며, 대부분의 단계가 자동화되어 있어요.

사전 준비

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: 프로젝트를 빌드하기 위한 명령어. create-react-app 기반 프로젝트는 기본값이 npm run build (또는 yarn build)입니다. Netlify가 자동으로 이 값을 채워줄 거예요.
- Publish directory: 빌드된 정적 파일이 생성되는 디렉토리. create-react-app 기반 프로젝트는 기본값이 build 입니다. Netlify가 자동으로 이 값을 채워줄 거예요.
확인: create-react-app 프로젝트의 경우, 대부분의 기본값이 정확하므로 크게 수정할 필요가 없어요.
사이트 배포 (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 폴더에 있어야 빌드 시 build 폴더로 복사됩니다.

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

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

Vercel
- Netlify와 거의 동일한 흐름으로 Git 저장소 연동 및 자동 배포를 지원합니다.
- vercel CLI 도구를 사용하면 명령줄에서도 쉽게 배포할 수 있어요. (vercel 명령 후 build 폴더를 선택).

GitHub Pages

프로젝트의 main (또는 gh-pages) 브랜치에 build 폴더의 내용을 푸시해야 해요.

CRA는 package.json에 homepage 필드를 추가하고 npm run deploy 명령어를 설정하여 GitHub Pages에 쉽게 배포할 수 있도록 지원합니다.

// package.json
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://<YOUR_GITHUB_USERNAME>.github.io/<YOUR_REPO_NAME>", // 여기에 자신의 GitHub 페이지 URL
  "dependencies": { /* ... */ },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build", // build 먼저 실행
    "deploy": "gh-pages -d build" // gh-pages 패키지 사용
  },
  "devDependencies": {
    "gh-pages": "^3.2.3" // gh-pages 패키지 설치 필요
  }
}

npm install gh-pages 후 npm run deploy 명령어로 배포할 수 있습니다.

Firebase Hosting
- Firebase CLI를 설치하고 firebase init으로 프로젝트를 초기화한 후, firebase deploy 명령어로 배포합니다.
- firebase.json 설정 파일에서 public 디렉토리를 build로, rewrites 규칙을 index.html로 설정하여 SPA 라우팅 문제를 해결해요.

요약 및 다음 단계

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

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

이제 사용자들은 여러분이 만든 웹 애플리케이션에 접근하여 상호작용할 수 있게 되었어요.

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

On this page