Github에서 뷰 프로젝트 자동 배포하는 방법

🚀 GitHub Actions로 Vue 프로젝트 자동 배포하는 법

 

📁 (참고) .github/workflows 경로는 이렇게 만든다

레포지토리명/
└── .github/
    └── workflows/
        └── deploy.yml      ← ✅ 자동 배포용 GitHub Actions 파일

💡 .github 폴더 이름 앞에 . 붙는 거 주의!

 

📁 1. .github/workflows/deploy.yml 만들기

프로젝트 루트에 .github/workflows/ 폴더를 만들고, 그 안에 deploy.yml 파일을 생성함.

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main  # 👉 main 브랜치에 push할 때만 실행됨 (필요시 'master'로 변경)

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

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

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

    - name: Install dependencies
      run: npm install

    - name: Build
      run: npm run build

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist
        publish_branch: gh-pages

---

⚙️ 2. 꼭 확인할 것

✅ vue.config.js의 publicPath:

publicPath: '/레포지토리명/'

✅ package.json에 빌드 스크립트 있는지 확인:

"scripts": {
  "build": "vue-cli-service build"
}

---

⏳ 3. 푸시하면 자동 배포 시작!

git add .
git commit -m "자동 배포 설정"
git push origin main  # 또는 master

 

GitHub에서 Actions 탭에 들어가면 자동으로 배포 로그가 뜨고,
배포 완료 후 gh-pages 브랜치가 생기고, Pages에서 사이트가 뜸.

---

💡 팁

항목내용

배포 브랜치	기본값: gh-pages
페이지 주소	https://<유저명>.github.io/<레포지토리명>/
빌드 실패 시	Vue 2인지 Vue 3인지, 또는 누락된 dependency 없는지 확인 필요