GatsbyJS 프로젝트를 CI/CD로 자동 배포하기 (GitHub Actions, Netlify, Vercel 활용)

GatsbyJS 프로젝트를 CI/CD로 자동 배포하기 (GitHub Actions, Netlify, Vercel 활용)

GatsbyJS 프로젝트는 정적 사이트이기 때문에 CI/CD 파이프라인을 구축하면 변경 사항을 자동으로 배포할 수 있습니다.
이번 글에서는 GitHub Actions, Netlify, Vercel을 활용해 GatsbyJS를 자동으로 빌드하고 배포하는 방법을 단계별로 소개하겠습니다. 🚀

---

1. 자동 배포가 필요한 이유

✅ CI/CD 적용 시 장점

항목 설명

자동화된 배포	코드 푸시 시 자동으로 빌드 및 배포 진행
일관된 배포 프로세스	수동 오류 방지 및 신뢰성 향상
버전 관리	Git 커밋 기준으로 변경 이력 추적
협업에 유리	여러 명이 개발해도 안정적인 배포 유지

🚀 정적 사이트인 Gatsby는 자동 빌드 환경과 매우 궁합이 좋습니다.

---

2. Netlify를 활용한 자동 배포

반응형

✅ Netlify 프로젝트 생성

1. Netlify 접속 후 GitHub 연동
2. New Site from Git 클릭 → Gatsby 프로젝트 선택
3. Build Command: gatsby build
4. Publish Directory: public
5. "Deploy site" 클릭

Netlify는 자동으로 브랜치 변경을 감지하여 배포합니다.
✅ 환경변수 설정은 Site Settings > Build & Deploy > Environment에서 가능

🚀 가장 쉬운 자동 배포 방법입니다.

---

3. Vercel을 활용한 자동 배포

✅ Vercel 프로젝트 생성

1. Vercel 접속 → GitHub 연동
2. Gatsby 프로젝트 가져오기
3. 설정 자동 감지됨 (Framework: Gatsby)
4. "Deploy" 클릭

📌 기본 Build Command: 자동 설정됨
📌 기본 Output Directory: public

🚀 Netlify와 마찬가지로 푸시 시 자동으로 빌드 및 배포됩니다.

---

4. GitHub Actions로 직접 CI/CD 파이프라인 구축하기

✅ .github/workflows/deploy.yml 파일 생성

name: Gatsby CI/CD

on:
  push:
    branches: [main]

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Git Checkout
        uses: actions/checkout@v3

      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install Dependencies
        run: npm install

      - name: Build Gatsby
        run: npm run build

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2
        with:
          publish-dir: "./public"
          production-deploy: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

✅ GitHub Secrets 설정

1. Settings > Secrets > Actions로 이동
2. NETLIFY_AUTH_TOKEN, NETLIFY_SITE_ID 추가
   • Netlify Access Token 생성하기
   • 사이트 ID는 Netlify Admin에서 확인 가능

🚀 코드 푸시만으로 자동 빌드 & 배포가 완료됩니다!

---

5. 환경 변수 관리하기

Gatsby는 .env 파일을 활용하며, 빌드시 환경 변수도 함께 제공해야 합니다.

📌 예시: .env.production

GATSBY_API_URL=https://api.example.com
GATSBY_SITE_NAME=MyGatsbySite

🔐 GitHub Actions에서는 secrets로 제공
🔐 Netlify/Vercel에서는 "Environment Variables" 섹션에서 직접 추가

---

6. 배포 상태 알림 연동 (슬랙, 디스코드)

GitHub Actions에 알림을 추가하면 배포 성공/실패를 팀과 공유할 수 있습니다.

📌 Slack 알림 예시:

- name: Slack Notification
  uses: 8398a7/action-slack@v3
  with:
    status: ${{ job.status }}
  env:
    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}

📌 Discord도 Webhook 방식 동일

🚀 배포 자동화 + 알림 연동까지 하면 완성된 CI/CD 파이프라인!

---

7. 결론

이번 글에서는 GatsbyJS 프로젝트를 자동으로 배포하기 위한 다양한 방법을 살펴봤습니다.

✔ Netlify / Vercel을 통한 자동 배포 환경 구성
✔ GitHub Actions를 이용한 커스텀 배포 파이프라인 작성
✔ 환경 변수 관리 및 Webhook 알림까지 포함한 완성형 배포 시스템 구성

🚀 다음 글에서는 Gatsby와 CMS(Contentful, Strapi 등) 연동하여 콘텐츠를 관리하는 방법을 다룹니다!

 

💡Tip: CI/CD 설정은 개발뿐 아니라 콘텐츠 운영과 SEO 관리에도 큰 역할을 합니다. 빠르게 배포하고 관리하세요!