github actionsでError: Directory './dist' for Hosting does not exist.が出た

はじめに

どうもこんにちは！僕は現在1ヵ月本気の技術力向上を目指している現役高校生1年生(@shunii )です！今回はReactのアプリケーションのパイプラインをgithub actionsで構築している際にエラーが出たのでその対処法をまとめます。

問題

以下のようなエラーが出ました。

Error: Directory './dist' for Hosting does not exist.

現状

vite + Reactのアプリをfirebaseへ自動デプロイしてくれるようにパイプラインを構築している最中です。
こちらが、github actionsのymlファイルになります。

main.yml

name: cicd

on:
  push:

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      - name: Install dependencies
        run: npm install
      - name: Run build
        run: npm run build

  test:
    name: test
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js and cache
        uses: actions/setup-node@v2
        with:
          node-version: "18"
          cache: "npm"
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test

  deploy:
    name: deploy
    runs-on: ubuntu-latest
    needs: test
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js and cache
        uses: actions/setup-node@v2
        with:
          node-version: "18"
          cache: "npm"
      - name: Install firebase-tools
        run: npm install --save-dev firebase-tools
      - name: Decode Firebase service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
          echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV
      - name: change space
        run: ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}
      - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          FIREBASE_CLI_EXPERIMENTS: webframeworks

      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

原因

エラーコードを見ればわかる通り、npm run buildで生成されるdistディレクトリが存在していないのが原因でした。
こちらはこのプロジェクトのfirebase.jsonなのですが

firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

distをpublicに設定しています。firebase.jsonのpublicの部分でホスティングするディレクトリを指定しているのですが、distディレクトリが存在しないことでエラーが吐かれているようです。

解決策

1. firebase.jsonを変更する
以下のようにfirebase.jsonを変更しました。これにより、おそらくルートディレクトリ配下のindex.htmlをデプロイすることになります。

firebase.json

{
  "hosting": {
    "source":".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

2. main.ymlを編集する
僕の場合では、buildとdeployでjobを分けていたのでbuild時に生成されるdistファイルがdeployを実行するリモートマシンの環境には存在しなかったようです。
よって以下のようにymlファイルを編集してdeployのjobにビルドの流れも導入してあげるとdistディレクトリが生成され、うまく実行できます。

main.yml

name: cicd

on:
  push:

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      - name: Install dependencies
        run: npm install
      - name: Run build
        run: npm run build

  test:
    name: test
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js and cache
        uses: actions/setup-node@v2
        with:
          node-version: "18"
          cache: "npm"
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test

  deploy:
    name: deploy
    runs-on: ubuntu-latest
    needs: test
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js and cache
        uses: actions/setup-node@v2
        with:
          node-version: "18"
          cache: "npm"
      - name: Install dependencies #追記
        run: npm install #追記
      - name: Run build #追記
        run: npm run build #追記
      - name: Install firebase-tools
        run: npm install --save-dev firebase-tools
      - name: Decode Firebase service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
          echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV
      - name: change space
        run: ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}
      - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          FIREBASE_CLI_EXPERIMENTS: webframeworks

      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

終わりに

解決策自体は見つけることが出来たのですが、1番目の解決策がどのような理由でうまくいっているのか理解しきれていないのが少し心残りです。
もし詳しくわかる方いましたらコメントお待ちしています！

About Me

• X(Twitter)

参考