정적 호스팅 배포

이번 장에서는 리액트 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를 중심으로 배포 과정을 설명합니다.

Netlify는 무료로 시작하기 쉽고, 대부분의 리액트 앱 배포에 필요한 기능을 제공합니다.

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

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

Netlify 배포 전 준비

Netlify를 통한 배포 과정

자동 배포 (Continuous Deployment)

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

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

아래 다이어그램은 Git 푸시 이후 정적 호스팅 자동 배포가 어떤 단계를 거쳐 사용자에게 도달하는지 요약한 것입니다.

커스텀 도메인 설정

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

라우팅 문제 해결 (SPA Fallback)

리액트 SPA는 클라이언트 측 라우팅(예: React Router)을 사용합니다.

즉, 모든 경로 요청(example.com/about, example.com/products/123)이 결국 index.html 파일을 로드해야 합니다.

하지만 웹 서버는 기본적으로 요청된 경로에 해당하는 파일이 없으면 404 Not Found 에러를 반환합니다.

이 문제를 해결하기 위해 Netlify와 같은 정적 호스팅 서비스에서는 리다이렉트 규칙을 설정하여 모든 유효하지 않은 경로 요청을 index.html로 fallback 시키는 기능을 제공합니다.

Netlify에서는 프로젝트의 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 설정을 함께 사용하면 안정적으로 배포할 수 있습니다.

    {
      "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 라우팅 문제를 해결합니다.

아래 다이어그램은 정적 호스팅 서비스를 선택하고 실제 배포 전에 확인할 설정을 압축한 점검표입니다.

정적 호스팅에서는 사용자의 URL 요청이 어떤 과정을 거쳐 React Router로 넘어가는지도 함께 이해해야 합니다.

정적 호스팅 서비스 개념과 Netlify를 이용한 배포 (GitHub 연동) 흐름을 함께 정리한 보조 다이어그램입니다.

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

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

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

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