GatsbyJS 배포 및 호스팅: Netlify, Vercel, GitHub Pages 활용하기

GatsbyJS 배포 및 호스팅: Netlify, Vercel, GitHub Pages 활용하기

GatsbyJS는 **정적 사이트 생성기(SSG)**이므로 빌드된 정적 파일을 손쉽게 배포할 수 있습니다.
이번 글에서는 Gatsby 프로젝트를 Netlify, Vercel, GitHub Pages에 배포하는 방법을 설명하겠습니다.

---

1. Gatsby 배포 개요

Gatsby는 정적 HTML, CSS, JavaScript 파일을 생성하므로 서버가 필요하지 않습니다.
✅ Gatsby 배포 방식

배포 플랫폼 특징

Netlify	간편한 연동, 자동 빌드, 서버리스 기능 지원
Vercel	빠른 CDN, Git 연동, 서버리스 함수 지원
GitHub Pages	무료 배포 가능, 간단한 정적 사이트 배포

🚀 배포를 위해 Gatsby 프로젝트를 먼저 빌드해야 합니다.

gatsby build

위 명령어를 실행하면 public/ 폴더가 생성되고, 이 폴더의 파일을 배포하면 됩니다.

---

2. Netlify를 활용한 Gatsby 배포

반응형

✅ Netlify CLI 설치 및 로그인

npm install -g netlify-cli
netlify login

✅ Netlify 프로젝트 초기화 및 배포

netlify init
netlify deploy --prod

🚀 Netlify가 public/ 폴더를 배포하며, 배포 완료 후 URL이 제공됩니다.

✅ 자동 배포 설정 (GitHub 연동)

1. **Netlify 공식 사이트**에서 로그인
2. "New Site from Git"을 선택하고 GitHub 저장소 연결
3. Gatsby 프로젝트 선택 후 "Deploy" 클릭

✅ Netlify는 GitHub에서 코드가 변경될 때마다 자동으로 배포됩니다.

---

3. Vercel을 활용한 Gatsby 배포

✅ Vercel CLI 설치 및 로그인

npm install -g vercel
vercel login

✅ Vercel 배포 실행

vercel

🚀 Vercel이 자동으로 프로젝트를 감지하고 배포를 완료합니다.

✅ 자동 배포 설정 (GitHub 연동)

1. **Vercel 공식 사이트**에서 로그인
2. "New Project" 클릭 후 GitHub 저장소 연결
3. Gatsby 프로젝트 선택 후 "Deploy" 클릭

✅ Vercel은 자동으로 Gatsby 프로젝트를 빌드하고 배포합니다.

---

4. GitHub Pages를 활용한 Gatsby 배포

✅ GitHub Pages 플러그인 설치

npm install gh-pages --save-dev

✅ package.json에 배포 스크립트 추가

"scripts": {
  "deploy": "gatsby build && gh-pages -d public"
}

✅ GitHub Pages에 배포 실행

npm run deploy

🚀 GitHub Pages에 Gatsby 프로젝트가 배포됩니다.

✅ GitHub Pages URL: https://your-username.github.io/repository-name/

---

5. 배포 후 Gatsby 캐시 무효화 (Cache Busting)

배포 후 변경 사항이 반영되지 않는 경우, Gatsby 캐시를 무효화해야 합니다.

✅ 캐시 삭제 후 다시 빌드

gatsby clean
gatsby build
gatsby serve

✅ 이제 변경 사항이 올바르게 반영됩니다.

---

6. 결론

이번 글에서는 GatsbyJS 프로젝트를 Netlify, Vercel, GitHub Pages에 배포하는 방법을 배웠습니다.
✔ Netlify: GitHub 연동으로 자동 배포 지원
✔ Vercel: 빠른 CDN 및 서버리스 지원
✔ GitHub Pages: 무료 정적 사이트 배포 가능

🚀 다음 글에서는 Gatsby에서 다크 모드 및 UI 최적화를 적용하는 방법을 다루겠습니다!