FirebaseCLIでGitHubActionsを作成しFirebaseHostingに自動deployする
以下の記事によると、FirebaseCLI(Firebase Tools)でGitHubActionの設定を行えるようなので、GatsbyがFirebase Hostingに自動Deployできるか試してみました。
Gatsbyプロジェクトの準備
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タブに行くと、自動ビルドが動いているのが分かります。
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
Gatsbyのキャッシュ設定
Gatsby公式にはfirebase hosting利用時の項目があります。 キャッシュ設定を行うと良さそうです。
masterブランチ名称の廃止
firebase toolsのデフォルトのブランチ名はmainに変わっています。
昨今の表現問題への対応のためdefaultはmainという表現に変わっていくようです。
終わり
Gatsbyの自動build,deploy構成ができました。
次はGatsbyのスターター選定とレイアウトなどについて書きたいです。
Discussion