【環境構築】Gatsby.js × Firebase × GitHubActionsで自動デプロイ【CICD】

「個人開発するならGatsby.jsいいかも！！」と思い始めている木村です。

Gatsby.jsでとても高速に開発できるので、この際CICDのパイプラインも構築してリリースも爆速で終わらせ最高の生産性を実現させたいと考えました。

今回は備忘録的にまとめた感じなので非常にライトなメモになりますが、参考にしていただけたら嬉しいです。

環境準備

Gatsbyプロジェクトの設定
GitHubでリポジトリ準備
Firebaseの設定

自動デプロイの手順

環境準備

以下の順番に環境を作成していきます。

Gatsbyプロジェクトの設定
GitHubでリポジトリ準備
Firebaseの設定

Gatsbyプロジェクトの設定

yarn add -g gatsby-cli
gatsby new firegatsby 
cd firegatsby
gatsby develop 
gatsby build 
gatsby serve

GitHubでリポジトリ準備

今回はmainブランチとdevブランチを作成します。
GitHubでリポジトリを作成後以下を実行してください。

mainブランチへの追加

git init
git add *
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/kimuson/<プロジェクト名>.git
git push -u origin main

devブランチの作成

git branch dev
git checkout dev
git add *
git commit -m "first commit"
git push origin dev

Firebaseの設定

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 
# Configure as a single-page app
N 
# Set up automatic builds and deploys with GitHub
y 
# 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?
<githubのuser/repoを入力する>
# Set up the workflow to run a build script before every deploy?
Y 
# What script should be run before every deploy?
npm ci && npm run build 
# Set up automatic deployment to your site's live channel when a PR is merged?`
y 
# What is the name of the GitHub branch associated with your site's live channel?
main