GitHub ActionsでのFirebaseデプロイエラー解消法：'dist'ディレクトリが存在しない

はじめに

今回はReact×Viteで作成したアプリを、GitHub Actionsを使用してFirebaseにデプロイする際に、エラーに遭遇したので、解決方法をまとめます。

FirebaseとGithub Actionsの各種設定に関しては、本記事では説明を省きます。
なお、下記を参考に行いました。

問題

Github Actionsにてdeploy中に"Directory 'dist' for Hosting does not exist."のエラーが出ました。

解決方法

firebase.jsonを下記のように修正しました。
"public": "dist"と記載のあった部分を"source":"."に変更しました。

firebase.json

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

原因

まず、この修正箇所が何を指しているかというと、Firebase Hostingがデプロイするファイルを探す場所になります。

・"public": "dist"の場合（デフォルト設定）
publicキーがdistに設定されており、Firebase Hostingはdistディレクトリ内のファイルを探す。
（プロジェクト構造）

project_root/
|__ dist/
|   |__ index.html
|   |__ assets/
|       |__ styles.css
|       |__ script.js
|       |__ ...
|__ src/
|   |__ index.js
|   |__ ...
|__ firebase.json
|__ ...

・"source":"."の場合
sourceキーが"."に設定されており、これはプロジェクトのルートディレクトリを指す。したがって、Firebase Hostingはプロジェクトのルートディレクトリ内のファイルを探す。
（プロジェクト構造）

project_root/
|__ index.html
|__ assets/
|   |__ styles.css
|   |__ script.js
|   |__ ...
|__ src/
|   |__ index.js
|   |__ ...
|__ firebase.json
|__ ...

今回の場合、Github Action時にdistディレクトリを生成しています。
しかし、.gitignoreファイルにdistディレクトリを含んでいたため、gitによって追跡されず、リポジトリには含まれません。
一方で、"public": "dist"でFirebase Hostingがdistディレクトリを参照する設定だったため、distディレクトリが存在しないというエラーが発生していました。
従って、Firebase Hostingの設定を修正し、ビルドされたファイルがプロジェクトのルートディレクトリに配置されるようにしました。

おわりに

今回のようなパターンはそこまでないかもしれませんが、ファイルの構造によって、Firebaseの設定を手動で変更する必要があります。