GitHub Actions를 이용한 Vue 프로젝트 Firebase Hosting 자동 배포

🚀 GitHub Actions를 이용한 Vue 프로젝트 Firebase Hosting 자동 배포

firebase hosting

개요

이 글에서는 GitHub Actions를 활용하여 main 브랜치에 코드를 push하면 자동으로 Vue 프로젝트가 Firebase Hosting에 배포되도록 구성하는 방법을 설명합니다. CI/CD를 통해 반복적인 배포 작업을 자동화하고, 안정적인 배포 흐름을 구축할 수 있습니다.

📄 workflow/firebase-hosting.yaml

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main

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

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

    - name: Install Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '21.5.0'  # 프로젝트 Node 버전에 맞게 수정

    - name: Install and Build admin app
      working-directory: firebase/admin
      run: |
        npm install
        npm run build

    - name: Write Firebase service account key
      run: |
        echo '${{ secrets.GOOGLE_APPLICATION_CREDENTIALS_JSON }}' > ${HOME}/firebase-key.json
        echo "GOOGLE_APPLICATION_CREDENTIALS=${HOME}/firebase-key.json" >> $GITHUB_ENV

    - name: Deploy to Firebase Hosting (admin)
      working-directory: firebase
      run: |
        npm install -g firebase-tools
        firebase deploy --only hosting:admin

 

1. Workflow 개요

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main

• 동작 조건: main 브랜치에 push가 발생하면 워크플로우가 실행됩니다.
• 목표: firebase/admin 디렉토리의 Vue 앱을 빌드하고, hosting:admin으로 Firebase에 배포합니다.

---

2. Job 정의 및 빌드 환경 설정

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

• GitHub Actions의 Ubuntu 최신 버전 환경에서 Job이 실행됩니다.
• 단일 Job(build-and-deploy) 내에서 모든 빌드 및 배포가 처리됩니다.

---

3. Step별 설명

🔐 Github Secrets
GitHub 저장소의 Secrets에 아래 항목을 추가해야 합니다:

• GOOGLE_APPLICATION_CREDENTIALS_JSON
  • Firebase 서비스 계정 JSON 전체를 문자열로 복사해 저장
  • Firebase 콘솔 > 프로젝트 설정 > 서비스 계정 > 새 비공개 키 발급

 

✅ 소스코드 체크아웃

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

• 현재 리포지토리의 코드를 GitHub Actions 실행 환경으로 가져옵니다.

🔧 Node.js 설치

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

 

• 해당 Node 버전(21.5.0)으로 설정합니다. 프로젝트에 맞는 버전으로 변경해야 합니다.

🏗️ Vue 프로젝트 설치 및 빌드

- name: Install and Build admin app
  working-directory: firebase/admin
  run: |
    npm install
    npm run build

• firebase/admin 경로에서 Vue 앱을 설치(npm install)하고 빌드(npm run build)합니다.
• 이때 dist 폴더가 생성되고, 해당 폴더가 Firebase Hosting에 배포됩니다.

🔐 Firebase 인증 키 작성

- name: Write Firebase service account key
  run: |
    echo '${{ secrets.GOOGLE_APPLICATION_CREDENTIALS_JSON }}' > ${HOME}/firebase-key.json
    echo "GOOGLE_APPLICATION_CREDENTIALS=${HOME}/firebase-key.json" >> $GITHUB_ENV

• GitHub Secrets에 저장된 Firebase 서비스 계정 키 JSON을 파일로 저장하고, 환경변수로 등록합니다.
• 환경변수 GOOGLE_APPLICATION_CREDENTIALS에 해당 키 파일 경로를 설정하여 Firebase CLI에서 인증에 사용할 수 있게 합니다.

🚀 Firebase Hosting 배포

- name: Deploy to Firebase Hosting (admin)
  working-directory: firebase
  run: |
    npm install -g firebase-tools
    firebase deploy --only hosting:admin

• Firebase CLI를 설치하고, hosting:admin에만 배포를 실행합니다.
• Firebase 프로젝트 설정의 firebase.json에서 hosting에 target: "admin" 설정이 되어 있어야 합니다.

---

4. Firebase Hosting 타겟 설정 예시

firebase.json 예시:

{
  "hosting": [
    {
      "target": "admin",
      "public": "admin/dist",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
    }
  ]
}

.firebaserc 예시:

{
  "projects": {
    "default": "your-firebase-project-id"
  },
  "targets": {
    "your-firebase-project-id": {
      "hosting": {
        "admin": ["your-site-id"]
      }
    }
  }
}

 

---

🔚 마무리

이제 main 브랜치에 코드를 push하면 GitHub Actions가 자동으로 Vue 앱을 빌드하고 Firebase에 배포합니다.

이를 통해 반복적인 개발-테스트-배포 과정을 수동으로 작업하지 않고, 빠르고 안정적인 배포 환경을 구축할 수 있습니다.