icon안동민 개발노트

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

 빌드된 React 애플리케이션을 배포하는 가장 쉽고 효율적인 방법 중 하나는 정적 호스팅 서비스를 이용하는 것입니다.

 이 절에서는 Netlify와 Vercel을 중심으로 배포 과정을 살펴보겠습니다.

Netlify와 Vercel 비교

 Netlify

 장점

  • 간편한 사용자 인터페이스
  • 강력한 CI/CD 파이프라인
  • 폼 처리, 서버리스 함수 등 부가 기능

 단점

  • 일부 고급 기능의 경우 유료 플랜 필요

 Vercel

 장점

  • Next.js와의 완벽한 통합
  • 글로벌 CDN과 에지 네트워크
  • 실시간 미리보기 기능

 단점

  • 일부 기능이 Next.js에 최적화되어 있음

Netlify 배포 과정

  1. Netlify 계정 생성 및 로그인
  2. "New site from Git" 선택
  3. GitHub 저장소 연결
  4. 빌드 설정
  • Build command : npm run build
  • Publish directory : build
  1. 고급 설정 (환경 변수 등) 구성
  2. 배포 시작

Vercel 배포 과정

  1. Vercel 계정 생성 및 로그인
  2. "Import Project" 선택
  3. GitHub 저장소 선택
  4. 프로젝트 설정
  • Framework Prese : Create React App
  • Build Comman : npm run build
  • Output Director : build
  1. 환경 변수 설정
  2. 배포 시작

GitHub 저장소와 자동 배포 연동

 두 서비스 모두 GitHub와의 연동을 통해 자동 배포를 지원합니다.

  1. GitHub 저장소의 특정 브랜치에 변경사항이 푸시되면 자동으로 빌드 및 배포가 시작됩니다.
  2. Pull Request에 대한 미리보기 배포도 지원합니다.

 설정 예 (Netlify의 netlify.toml 파일)

[build]
  command = "npm run build"
  publish = "build"
 
[context.branch-deploy]
  command = "npm run build -- -D"

환경 변수 관리

 1.Netlify

  • 사이트 설정 → Build & deploy → Environment → Environment variables
  • UI에서 직접 추가 또는 netlify.toml 파일에 정의
  1. Vercel
  • 프로젝트 설정 → Environment Variables
    • UI에서 추가 또는 .env 파일 사용

 주의 : 민감한 정보는 반드시 환경 변수로 관리하고, 소스 코드에 직접 포함시키지 않습니다.

커스텀 도메인 설정

  1. Netlify
  • 사이트 설정 → Domain management → Add custom domain
  • DNS 설정 변경 또는 Netlify의 DNS 서비스 사용
  1. Vercel
  • 프로젝트 설정 → Domains → Add Domain
  • DNS 설정 변경 지침 제공

 두 서비스 모두 SSL 인증서를 자동으로 제공하고 관리합니다.

성능 모니터링과 오류 추적

  1. Netlify
  • 기본적인 배포 로그 및 함수 로그 제공
  • Netlify Analytics로 트래픽 및 성능 모니터링 (유료)
  1. Vercel
  • 실시간 성능 메트릭스 제공
  • 통합된 오류 로깅 및 알림 시스템

 추가적인 모니터링을 위해 Google Analytics나 Sentry 같은 외부 서비스를 통합할 수 있습니다.

배포 후 주의사항

  1. HTTPS 사용 확인
  2. 캐시 설정 최적화
  3. 리다이렉트 규칙 설정 (SPA 라우팅을 위해)

 예시 (netlify.toml)

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

고급 배포 기능

  1. 스테이징 환경
  • Netlify : Branch deploys
  • Vercel : Preview deployments
  1. A/B 테스팅
  • Netlify : Split Testing 기능
  • Vercel : A/B Testing with edge functions
  1. 서버리스 함수
  • Netlify : Netlify Functions
  • Vercel : Serverless Functions

배포 성능 최적화 팁

  1. 빌드 캐시 활용
  2. 대형 의존성 최소화
  3. 코드 분할 및 지연 로딩 구현
  4. 이미지 최적화

문제 해결

  1. 빌드 실패
  • 로그 확인
  • 로컬에서 빌드 테스트
  • 환경 변수 확인
  1. 라우팅 문제
  • 리다이렉트 규칙 확인
  • 404 페이지 설정
  1. 성능 이슈
  • 네트워크 탭 분석
  • Lighthouse 검사 수행

Netlify vs Vercel 선택 가이드

  1. Netlify 선택 시기
  • 간단한 정적 사이트 배포
  • 폼 처리 등 부가 기능 필요 시
  • 팀 협업 기능 중요 시
  1. Vercel 선택 시기
  • Next.js 프로젝트
  • 서버리스 API와 통합 필요 시
  • 글로벌 에지 네트워크 활용 필요 시

 정적 호스팅 서비스를 이용한 React 애플리케이션 배포는 개발자의 작업 흐름을 크게 개선합니다. GitHub와의 연동을 통한 자동 배포, 환경 변수 관리, 커스텀 도메인 설정 등의 기능은 배포 프로세스를 간소화하고 효율적으로 만듭니다.

 Netlify와 Vercel 모두 우수한 서비스를 제공하며, 프로젝트의 요구사항에 따라 적절한 서비스를 선택할 수 있습니다. 두 서비스 모두 무료 티어를 제공하므로, 소규모 프로젝트나 개인 프로젝트에 부담 없이 사용할 수 있습니다.

 배포 후에는 지속적인 모니터링과 성능 최적화가 중요합니다. 제공되는 분석 도구를 활용하여 사이트의 성능을 추적하고, 필요에 따라 최적화를 진행해야 합니다. 또한, 보안 업데이트와 의존성 관리에도 주의를 기울여야 합니다.

 마지막으로, CI/CD 파이프라인을 잘 활용하면 개발부터 배포까지의 전체 과정을 자동화할 수 있습니다. 이는 개발 생산성을 높이고 휴먼 에러를 줄이는 데 큰 도움이 됩니다. 정적 호스팅 서비스의 이러한 기능들을 잘 활용하면, 더 효율적이고 안정적인 React 애플리케이션 운영이 가능해집니다.

리액트 앱 빌드하기CI/CD 기초 개념 소개