🎉

FirebaseCLIでGitHubActionsを作成しFirebaseHostingに自動deployする

3 min read

以下の記事によると、FirebaseCLI(Firebase Tools)でGitHubActionの設定を行えるようなので、GatsbyがFirebase Hostingに自動Deployできるか試してみました。

https://zenn.dev/watarukun/articles/8f3e318bacf97cabf879

Gatsbyプロジェクトの準備

公式のQuickstart

yarn add -g gatsby-cli # Gatsby cliインストール
gatsby new firegatsby # デフォルトのスターターでGatsbyプロジェクト作成
cd firegatsby
gatsby develop # ローカルサーバー起動と動作チェック(http://localhost:8000/)
gatsby build # production用にビルド
gatsby serve # production結果を確認 (http://localhost:9000/)

よさそう

GitHubでリポジトリ準備

GitHub.comでリポジトリ作成する。
作成したら、開発環境にて、gitの設定を行う。

git init -y # git初期化
git remote add origin git@github.com:<username>/firegatsby.git # リモート登録

Firebase toolsで設定

firebase consoleでプロジェクトを作成する。
以下はfirebase cli

firebase init hosting
# Please select an option
Use an existing project
# Select a default Firebase project for this directory
# 作成したプロジェクトを選択
# What do you want to use as your public directory?
public # そのままEnter
# Configure as a single-page app
N # GatsbyはSPAではないので`N`
# Set up automatic builds and deploys with GitHub
y # GitHub push時の自動ビルドやるか
# File public/404.html already exists. Overwrite?
N
# File public/index.html already exists. Overwrite?
N

ここまでやると、GitHubとの連携の承認画面がブラウザに表示されます。
連携を承認する。

# For which GitHub repository would you like to set up GitHub workflow?
<user/repo> # そのままEnterで、自動で設定します
# GitHubのSecretsにFirebaseのServeceKeyが登録されます
# Set up the workflow to run a build script before every deploy?
Y # Gatsbyをbuildして欲しいので`Y`
# What script should be run before every deploy?
npm ci && npm run build # そのままEnterです
# Set up automatic deployment to your site's live channel when a PR is merged?`
y # 本番サイト(Firebase Hosting)にdeployします
# What is the name of the GitHub branch associated with your site's live channel?
master

ここまでやると、プロジェクトディレクトリに.github/firebase-hosting-merge.yml.github/firebase-hosting-pull-request.ymlができます。

GitHubActionsの自動build確認

GitHubにpushすると、GitHub Actionsが登録されて、さらにbuild、deployが動きます。

git add .
git commit -m 'firstcommit'
git push origin master

GitHubのリポジトリページのActionタブに行くと、自動ビルドが動いているのが分かります。

Gatsby初期設定では.gitignoreにpublicが含まれているため、ローカルでbuildした結果の静的ファイル群(public以下すべて)はGitHubにPushされません。が、今回はgithub上で自動ビルドが走るので大丈夫、というわけです。

Firebase Hostingへのdeploy確認

Firebase ConsoleのHostingを見ると、きちんとdeployされています。

実際にサイトに飛んでみます。

うまくいきました🎉

その他

だめだったこと

Firebase cliのfirebase init hosting:githubのコマンドですが、
こいつは途中でエラーで終わってしまいました。

TypeError: Cannot read property 'predeploy' of undefined

要因は不明…。firebase toolsのupdateで治るんじゃないですかね…😥

メモ

Firebase toolsのConfigure as a single-page app

404の場合の挙動について設定してくれるようです

Gatsbyのキャッシュ設定

Gatsby公式にはfirebase hosting利用時の項目があります。

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-firebase/
キャッシュ設定を行うと良さそうです。

masterブランチ名称の廃止

firebase toolsのデフォルトのブランチ名はmainに変わっています。
昨今の表現問題への対応のためdefaultはmainという表現に変わっていくようです。

終わり

Gatsbyの自動build,deploy構成ができました。
次はGatsbyのスターター選定とレイアウトなどについて書きたいです。