React 프로젝트 예시로 GitHub Actions을 사용하여 Netlify에 자동 배포하는 방법을 설명합니다.
코드를 GitHub에 push하면 Netlify에 자동으로 해당 프로젝트가 빌드 및 배포됩니다.
📌1. Netlify 로그인 및 빌드
1. https://www.netlify.com/ 접속 및 로그인
2. Add new site 클릭
2. Import an existing project 클릭
3. 플랫폼 선택
4. 저장소 선택
5. 필요한 환경 변수 설정 후, Deploy 버튼 클릭
🔑2. Netlify Personal Access Token 발급
1. API 토큰 생성 페이지로 이동
2. "New Access Token" 버튼 클릭
3. 토큰 이름 입력 후, "Generate token" 클릭
4. 생성된 토큰을 복사
Netlify API ID 확인
5. Netlify 대시보드에서 Site configuration 클릭
Netlify Access Token 생성
6. "Site Information" 섹션에서 "API ID" 복사
🔑 3. GitHub Secrets 설정
Netlify 배포를 위해 GitHub Secrets에 보안 정보를 추가해야 합니다.
🔹 Secrets 추가 방법
1. GitHub 저장소에서 Settings → Secrets and variables → Actions 이동
2. New repository secret 클릭
3. 다음 정보를 입력
| Secret Name | Value |
|---|---|
| NETLIFY_AUTH_TOKEN | (2-3)Netlify에서 생성한 Personal Access Token |
| NETLIFY_SITE_ID | (2-6)Netlify 사이트의 API ID |
📂 4. GitHub Actions 파일 생성
📌 파일 경로: .github/workflows/deploy.yml
(프로젝트 루트 폴더)
├── src/
├── public/
├── package.json
├── .gitignore
├── .github/
│ ├── workflows/
│ │ ├── deploy.yml 👈 [여기에 생성]🛠 5. GitHub Actions 워크플로우 파일 작성
name: Deploy to Netlify
on:
push:
branches:
- main
jobs:
build: # jobs 아래 영역에 올바른 들여쓰기 적용해야 함
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v3
- name: Install Dependencies
run: npm install
- name: Build React App
run: CI=false npm run build
- name: Deploy to Netlify
uses: nwtgck/actions-netlify@v2
with:
publish-dir: './build'
production-branch: main
github-token: ${{ secrets.GITHUB_TOKEN }}
netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
enable-pull-request-comment: false
✅ 코드 설명
📌 1) 기본 설정 (이름 & 실행 조건)
name: GitHub Actions 워크플로우 이름 (임의로 작성, 예시:Deploy React App to Netlify)on: 언제 실행할지 설정branches: main 브랜치에 코드가 푸시될 때 실행됨- develop, feature/* 브랜치 추가 가능
📌 2) 실행 환경 및 Jobs 설정
jobs: GitHub Actions에서 수행할 작업 목록build: 빌드를 수행하는 작업 이름runs-on: 최신 Linux 환경 (ubuntu-latest)에서 실행
📌 3) 실행할 작업 목록
steps: 이 build 작업에서 수행할 단계들actions/checkout@v3: GitHub에서 프로젝트 코드를 가져오는 역할
📌 4) 의존성 설치 (npm install)
npm install: package.json에 있는 패키지들을 설치
📌 5) 프로젝트 빌드 (npm run build)
npm install: package.json에 있는 패키지들을 설치
📌 6) Netlify에 배포
nwtgck/actions-netlify@v2: Netlify에 배포하는 GitHub Actionspublish-dir: 배포할 폴더React: "./build"production-branch: main 브랜치에서 실행github-token: GitHub에서 제공하는 기본 토큰netlify-auth-token: Netlify에서 생성한 Access Token (GitHub Secrets에서 설정 필요)netlify-site-id: Netlify에서 확인한 사이트 ID (GitHub Secrets에서 설정 필요)enable-pull-request-comment: false: PR이 생성될 때 Netlify 미리보기 링크 비활성화
6. GitHub Actions 실행 테스트
테스트 방법
✅ 1. 원격 저장소에 변경 사항 push
git add .
git commit -m "Setup GitHub Actions for Glitch deployment"
git push origin main2. ✅ GitHub Actions 실행 확인
GitHub 저장소 → Actions 탭 클릭
-
push를 하면 github에서 action을 실행
-
성공된 깃허브 액션
