Vercel을 활용한 Astro Starlight 기반 Vue.js 문서 사이트 배포 가이드

핵심 기술

이 글은 Astro Starlight를 사용하여 Vue.js 문서 사이트를 구축하고, GitHub Pages의 한계를 극복하며 Vercel을 통해 빠르고 간편하게 배포하는 과정을 상세히 설명합니다.

기술적 세부사항

• 프로젝트 목표: Vue.js 문서 사이트를 Astro Starlight로 정적이며 접근 가능하게 구축.
• 기술 스택: Astro Starlight (정적 사이트 생성기), Vercel (배포 플랫폼), Vue.js (문서 대상).
• Vercel 선택 이유:
  • 인스턴트 GitHub 통합 (CLI 불필요)
  • 전역 CDN 제공으로 인한 빠른 성능
  • 간편한 커스텀 도메인 설정 및 자동 HTTPS
  • 자동 배포 프리뷰 (브랜치/PR별 실시간 확인)
  • 제로-컨픽 설정 (프레임워크 자동 감지)
  • 개인 프로젝트 및 실험에 이상적인 무료 티어 제공.
• GitHub Pages 대비 Vercel 장점:
  • dist/ 폴더 수동 빌드 및 gh-pages 브랜치 푸시 불필요.
  • 라우팅 문제 해결 (예: _redirects 미지원).
  • Astro 및 Starlight 프로젝트를 위한 추가 설정 간소화.
• Vercel 배포 단계:
  1. vercel.com/dashboard 접속.
  2. "Add New Project" 클릭.
  3. GitHub 리포지토리 선택 (Vercel이 Astro 프레임워크 자동 감지).
  4. 빌드 명령(astro build) 및 출력 디렉토리(dist/) 확인.
  5. "Deploy" 버튼 클릭.
• 추가 Vercel 기능 활용:
  • .gitignore에 .vercel/ 추가.
  • 환경 변수 관리.
  • 분석 기능 (유료 플랜).
  • 협업을 위한 프리뷰 배포.
• 커스텀 도메인 설정:
  • 프로젝트 대시보드의 "Domains" 탭에서 도메인 연결.
  • 도메인 DNS 설정을 Vercel 서버로 변경.
  • Let's Encrypt를 통한 자동 HTTPS 활성화.

개발 임팩트

• 개발자는 복잡한 DevOps 설정 없이 빠르고 효율적으로 정적 사이트를 배포할 수 있습니다.
• 전역 CDN을 통해 사용자에게 최적화된 로딩 속도를 제공합니다.
• 자동화된 배포 프로세스와 프리뷰 기능으로 개발 및 협업 생산성을 높입니다.

커뮤니티 반응

글쓴이는 GitHub Pages 사용 시 겪었던 라우팅 문제와 수동 빌드 과정을 언급하며 Vercel 사용으로 이러한 번거로움이 사라졌다고 강조합니다. 독자들에게 Vercel 사용 경험이나 GitHub Pages 사용 시의 어려움에 대한 질문을 던지며 참여를 유도하고 있습니다.