🐕

firebase vue CD

に公開
Firebase
Vue.js
tech

はじめに

リンター、テストの箇所は、一旦おいておく
firebase における自動 CD を構築するまでを記述しておく

下準備

環境

git：github
docker-image：node:24.7-bookworm-slim
vue：3.5.18

リポジトリ作成

github で作成

プライベートリポジトリにする、と github actions でお金かかる(使いすぎると)のでとりあえず public

リポジトリをクローンして、プロジェクト作成

npm create vite@latest

Need to install the following packages:
create-vue@3.18.0
Ok to proceed? (y) y


> npx
> "create-vue"

┌  Vue.js - The Progressive JavaScript Framework
│
◇  Project name (target directory):
│  front
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  TypeScript, Router (SPA development), Pinia (state management)
│
◇  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  none
│
◇  Skip all example code and start with a blank Vue project?
│  No

firebase

firebase CLI インストール

ログインしたりプロジェクト作成したりするため

npm install firebase-tools

ログイン

実行するとブラウザに飛び、ログインが求められるため、流れに沿いログインする

firebase login

hosting service の設定

firebase init hosting

プロジェクトを選択する


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

今回は、既にプロジェクトを作成していたので、そのプロジェクトを選択

✔ Please select an option: Use an existing project
✔ Select a default Firebase project for this directory: {ホスティングしたいプロジェクト名}

ホスティングの設定

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

公開するディレクトリを選択
vue を vite でビルドした際、/dist にビルド物が出力されるため dist を選択

✔ What do you want to use as your public directory? dist

vue は、SPA なので yes

✔ Configure as a single-page app (rewrite all urls to /index.html)? Yes

一つずつ設定してみたかったので、とりあえず No

✔ Set up automatic builds and deploys with GitHub? No

index.html を作成しようとしているがもう既にビルドしていたので、上書きしない

✔ File dist/index.html already exists. Overwrite? No
i Skipping write of dist/index.html

✔ Wrote configuration info to firebase.json
✔ Wrote project information to .firebaserc

✔ Firebase initialization complete!

プロジェクトに作成された firebase.json と .firebasercについて

firebaserc

  • Firebase プロジェクトとの対応付け情報を保持
  • CLI で firebase deploy や firebase serve をしたときに、どの Firebase プロジェクトへ操作するかを決める(開発と本番を分けれる)

firebase.json

  • Firebase プロジェクトの設定ファイル
  • Hosting・Functions・Database・Emulators など、Firebase のサービスごとの設定を書ける

デプロイ

ビルド

npm run build

hosting へデプロイ

firebase deploy --only hosting

デリバリー

デプロイの自動化

github 連携

PR 用と main マージ用の 2 つの GitHub Actions が自動生成

firebase init hosting:github

ワークフロー

  • .github/workflows/firebase-hosting-pull-request.yml（PR 用）
  • .github/workflows/firebase-hosting-merge.yml（main マージ用）

プロジェクト設定（PR 用）

自動生成されたファイルに少し付け加え

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

# Actions 画面に表示されるジョブの名前
name: Deploy to Firebase Hosting on PR
# PR（Pull Request）が作成/更新/再オープンされたときに実行
on: pull_request
# GitHub トークンの権限設定
permissions:
  # チェック結果（成功/失敗）を書き込める
  checks: write
  # リポジトリの内容を読み込める
  contents: read
  # Pull Request にコメントを書き込める
  pull-requests: write
  # ジョブ定義
jobs:
  # ジョブ名
  build_and_preview:
    # PR の作成元が同じリポジトリのときだけ実行
    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
    # 実行環境(ランナー)
    runs-on: ubuntu-latest
    # ステップ定義
    steps:
      # リポジトリのソースコードをランナーへチェックアウト(取得)
      - name: Checkout code
        uses: actions/checkout@v4
      # GitHub Actions（CI 環境）で Node.js プロジェクトの依存をインストール
      - name: Install dependencies
        run: npm ci
        working-directory: front
      # front ディレクトリで npm run build を実行
      - name: Build project
        run: npm run build
        working-directory: front # front/にpackage.jsonがあるため
      # Firebase Hosting へデプロイ
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        # action-hosting-deploy の設定
        with:
          # GitHub トークン
          repoToken: GitHub トークン
          # Firebase サービスアカウントの秘密鍵
          firebaseServiceAccount: Firebase サービスアカウントの秘密鍵
          # デプロイするチャネル（channelId: pr-<PR番号> はプレビュー環境）
          channelId: pr-${{ github.event.pull_request.number }}
          # Firebase プロジェクト ID
          projectId: projectId
          # デプロイするディレクトリ
          entryPoint: ./front

プロジェクト設定（main マージ用）

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

# Actions 画面に表示されるジョブの名前
name: Deploy to Firebase Hosting on merge
# main ブランチへ push（マージ）されたときに実行
on:
  push:
    branches:
      - main
permissions:
  # チェック結果（成功/失敗）を書き込める
  checks: write
  # リポジトリの内容を読み込める
  contents: read
  # Pull Request にコメントを書き込める
  pull-requests: write
jobs:
  # ジョブ名
  build_and_deploy:
    # 実行環境(ランナー)
    runs-on: ubuntu-latest
    # ステップ定義
    steps:
      # リポジトリのソースコードをランナーへチェックアウト(取得)
      - name: Checkout code
        uses: actions/checkout@v4
        # GitHub Actions（CI 環境）で Node.js プロジェクトの依存をインストール
      - name: Install dependencies
        run: npm ci
        working-directory: front
      # front ディレクトリで npm run build を実行
      - name: Build project
        run: npm run build
        working-directory: front # front/にpackage.jsonがあるため
      # Firebase Hosting へデプロイ
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          # GitHub トークン
          repoToken: GitHub トークン
          # Firebase サービスアカウントの秘密鍵
          firebaseServiceAccount: Firebase サービスアカウントの秘密鍵
          # デプロイするチャネル（channelId: live は本番環境）
          channelId: live
          # Firebase プロジェクト ID
          projectId: projectId
          # デプロイするディレクトリ
          entryPoint: ./front

GitHub Actions のワークフロー YAML

uses:

  • 意味：既存の「アクション（再利用できる処理パッケージ）」を呼び出す
  • 場所：steps: の中で使う

例：

- uses: actions/checkout@v4

これは「GitHub が提供する checkout アクションの v4 を実行する」という意味。
このアクションは、リポジトリのソースコードを runner（実行環境）にチェックアウト（コピー）する。

ほかの例：

- uses: actions/setup-node@v4

Node.js の環境を準備するアクションを呼び出している。

run:

  • 意味：シェルコマンドをそのまま実行する
  • 場所：steps: の中で使う

例：

- run: npm ci
  working-directory: front

👉 runner のシェルで npm ci を実行。working-directory: front があるので front/ ディレクトリで実行される。

with:

  • 意味：uses: で呼び出したアクションに 引数（設定値） を渡す
  • 場所：uses: の直下に書く

例：

- uses: actions/setup-node@v4
  with:
    node-version: "20"
    cache: "npm"

setup-node アクションに「Node のバージョンは 20」「npm のキャッシュを使う」という設定を渡している。

もう 1 つ例：

- uses: FirebaseExtended/action-hosting-deploy@v0
  with:
    repoToken: ${{ secrets.GITHUB_TOKEN }}
    firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
    projectId: ci-cd-test-79507
GitHubで編集を提案

Discussion