🐷

Firebase Hosting + GatsbyJSでWebサイトを作る

2022/04/09に公開

Firebase

Gatsby.js

tech

※最初に書いた記事が適当すぎて見返してみたらやばかったのでいろいろ編集しました。

Firebase はGoogleのアカウントがあれば使えます。
Firebaseを使うとなんかいろんなことができるらしい（適当）のですが、
とりあえず、Firebaseが提供している (Googleが提供している？) Hostingサービスを使って
Webサイトを作ります。

まずfirebaseに登録

・firebaseへの登録のしかた

これに従えばfirebaseに登録できます。
Google Analyticsは設定しておきます。
トラッキングid「G-(10桁くらいのアルファベット)」はメモしておきます。
登録後、コンソールに移動すると、以下のようなプロジェクトページができています。

ターミナルでfirebase loginと打って、ログインだけしておきます。
まだinitもdeployもしません。
firebaseに関してはとりあえずこれでひと段落です。

Gatsby

GatsbyJSはなんかReactベースの静的サイトジェネレーターなのですが、なんか適当にReactとかで調べてたら激推ししてる人が多かった (たとえばこの記事とか) のでとりあえず使ってみようと思いました。

・Gatsbyのインストール
上のリンクの通りにやると gatsbyを一通りインストールすることができます。

一通りインストールしたら、ターミナルで

gatsby new

と叩きます。そうすると
What would you like to call your site?
と言われるので、適当に (my gatsby siteなど) 名前を決めます。
What would you like to name the folder where your site will be created?
と言われるのでenterキーかreturnキーかを適当に押せば、
*/my gatsby site
みたいなフォルダができてます。
Will you be using JavaScript or TypeScript?
に対しては好きな方を選び、、その後適当に使うアプリを選択したりします。
Google Analyticsを設定するときは、先ほどのトラッキングid「G-(10桁くらいのアルファベット)」を入力します。
その後は作ったフォルダにcdで移動し、ターミナルで

npm install gatsby-plugin-firebase

と打ちます。

gatsby-config.jsを編集

次にgatsby-plugin-firebaseの説明ページに従ってgatsby-config.jsを編集します。
作ったフォルダの中にgatsby-config.jsというファイルがあるので、それを開きます。
色々と設定が書いてあると思うのですが、そこにfirebaseの設定を追加します。

gatsby-config.js

module.exports = {
  ...,
  plugins: [
    ...,
  ]
}

ここの中にいろいろ書いていきます。
Google Analyticsを設定している場合は、ここにGoogle Analyticsの設定が入っていることがわかると思います。
ブラウザでfirebaseでプロジェクトのページを開きます。

ここで「+アプリを追加」の隣にある「</> hoge」をクリックして、設定ページにいきます。
設定ページの一番下に次のようなことが書いてあると思います：

これをgatsby-config.jsに書いていきます。

gatsby-config.js

module.exports = {
  ...,
  plugins: [
    ...,
    , {
      resolve: "gatsby-plugin-firebase",
      options: {
        credentials: {
          apiKey: "***************************************",
          authDomain: "*********************************",
          projectId: "*********************************",
          storageBucket: "*********************************",
          messagingSenderId: "*********************************",
          appId: "******************************************"
        }
      }
    }
  ]
}

*****の部分に、先ほどの設定ページで確認したkeyなどを打ち込みます。
以上でgatsby-config.jsの設定が完了します！

gatsby-browser.js と gatsby-ssr.js を作成

次に、gatsby-config.jsというファイルがあるフォルダと同じフォルダにgatsby-browser.jsとgatsby-ssr.jsというファイルを作り (すでに存在する場合は以下を追加) 、その中に

gatsby-browser.js and gatsby-ssr.js

import "firebase/auth"
import "firebase/functions"
import "firebase/analytics"

と打ち込みます。とりあえず。

デプロイ

移動後にターミナルで

firebase init

と打ちます。
何かを選択しろと言われるので、
Hosting
を選択します。(Hostingが二つあるのですが、上を選んでおけばokです。選び方は、矢印キーで移動してスペースキーで選択してreturnキーで決定です）
What do you want to use as your public directory?
に対してはpublicでokです（脳死でreturnキーを押しても勝手にpublicと入力されます）。
404やindexがalready existsだと言われるので、上書きしないために最後までNoと言い続けます。
そうするととりあえず設定が終了します。

その後、

gatsby build

とコマンドを打ち、gatsby newしてできた初期ファイルをコンパイルします。
もしこのbuildがしばらく経っても終わらなければ、一度ターミナルを閉じて、もう一度ターミナルで同じフォルダに行き、

npm add -D cross-env

と打ちます。
何かがインストールされるので、その後もう一度gatsby buildと打ちます。
buildが終了したら、

firebase deploy

と打ちます。
そうすると
Hosting URL:"なんかURL"
と表示されるので、そのURLをブラウザに入力してみます。
すると、とりあえず以下のようなページができます。

あとはindex.jsを編集するだけです！