Gatsby + Firebase Hostingでプロフィールサイトを構築する

·2 分で読めます
GatsbyFirebase

GatsbyとFirebase Hostingを使って自分のプロフィールサイトを構築したのでそのメモ。

前提

  • サイトの中身はGitHubリポジトリで管理
  • https://github.com/santosfrancisco/gatsby-starter-cvがプロフィールサイト向けだったのでこれを使った
  • GitHub Actionsでmasterブランチにpushされたら自動的にFirebase Hostingに反映されるようにした
  • 今回は一つのGitHubリポジトリで複数のサイトをホスティングしたかったので、サブディレクトリを作成した。以下のような構成になっている。
    • lampetty-net-sites (リポジトリルート)
      • www (今回構築するプロフィールサイト)
      • xyz (別のサイト)

準備

  • GitHubリポジトリを作っておく
  • NodeJSをインストールしておく

Quick Start | Gatsbyに沿って以下を実行する。

(on repository root)
npm install -g gatsby-cli
gatsby new www https://github.com/santosfrancisco/gatsby-starter-cv

これで www ディレクトリ配下にサイトの静的ファイルが生成される。次にこれをFirebase Hostingにデプロイする。

Firebase Hostingのセットアップ

(on repository root)
npm install -g firebase-tools
firebase login
firebase init

今回は一つのリポジトリと一つのFirebaseプロジェクトで複数のサイトのファイルをホスティングしたかったので、以下のファイルを作成した。

https://firebase.google.com/docs/hosting/multisites に沿ってFirebaseの設定を行い、以下のようなファイルを作成した。

firebase target:apply hosting www lampetty-net-sites

firebase.json

{
  "hosting": [
    {
      "target": "www",
      "public": "www/public",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ]
    }
  ]
}

.firebaserc

{
  "projects": {
    "default": "<PROJECT_NAME>"
  },
  "targets": {
    "<RESOURCE_NAME>": {
      "hosting": {
        "www": [
          "<RESOURCE_NAME>"
        ]
      }
    }
  }
}

最終的にデプロイは以下のように行う。

firebase deploy --only hosting:www

GitHub Actionsの設定

以下のような感じでnode_modules配下をキャッシュすることでビルド時間を短縮している。

まとめ

静的サイトを構築するのは簡単

Firebaseによるサーバーレスシングルページアプリケーション (技術の泉シリーズ（NextPublishing）)

Firebaseによるサーバーレスシングルページアプリケーション (技術の泉シリーズ（NextPublishing）)

  • 作者:小島 佑一
  • 発売日: 2019/05/24
  • メディア: Kindle版

共有

X Facebook LinkedIn Bluesky