Gatsby.js を Firebase Hosting にデプロイするDocker環境構築

はじめに

gatsbyjsの公式サイトにFirestore Hostingへのデプロイ方法が書いてあるので参考にして、環境を構築する。

概要

前提条件

Firebaseアカウントを取得していること
Dockerが使える環境であること

手順

Docker環境構築
Gatsby.js プロジェクト作成
Firebase Hosting にデプロイ

Docker環境構築

docker-composeを使用してコンテナを作成します。

Dockerfile

FROM node:16-alpine

ENV APP_HOME /app
WORKDIR $APP_HOME
COPY . ./

RUN apk update && \
    apk upgrade && \
    apk add git && \
    npm install -g firebase-tools && \
    npm install -g gatsby-cli

docker-compose.yml

version: '3'
services:
  node:
    build: .
    working_dir: "/app"
    volumes:
      - .:/app
    ports:
      - "8000:8000"
    # command: sh -c "cd gatsby && npm run start"
    environment:
      - NODE_ENV=development
      - WATCHPACK_POLLING=true
    tty: true

Dockerfileとdocker-compose.ymlを同じフォルダーに作成し、コンテナを作成する。
一度Gatsby.js プロジェクト作成を作成したら、commandのコメントアウトを外すことで自動起動するようになる。

docker-compose build
docker-compose up -d

Gatsby.js プロジェクト作成

今回はTypeScriptでプロジェクトを作成する。設定は任意で、自分の目的に合ったものを選択する。

Dockerのコンテナ内に入りコマンドを実行

cd /app 
プロジェクト作成コマンド
npm init gatsby

プロジェクトの設定
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?
  app/ gatsby
Will you be using JavaScript or TypeScript?
  TypeScript
Will you be using a CMS?
  No (or I'll add it later)
Would you like to install a styling system?
  No (or I'll add it later)
Would you like to install additional features with other plugins?
  Add responsive images

インストールが終了したら、Docker環境で起動する。
package.jsonでscriptsのstartコマンドをローカルのPCから接続できるように書き換える。

package.json

{
...
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop -H 0.0.0.0",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "typecheck": "tsc --noEmit"
  },
...
}

起動コマンド

cd  /app/gatsby
npm run start

http://localhost:8000/ に接続できるようになる。

Firebase Hosting にデプロイ

Dockerのコンテナ内に入り、Firebaseとの接続設定をする。公式に書いてある通りに進める。

cd  /app/gatsby
firebase login --no-localhost
プロジェクトがある場合は選択し、ない場合は作成する。
firebase init
(y/N)のところはNoで問題ない。最後にHostingを選択する。Hostingが二つ存在するが、上のほうを選択する。

作成されたfirebase.jsonを編集する

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**/*",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "static/**",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.@(css|js)",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "page-data/**",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      }
    ]
  }
}

プロジェクトをビルドしてデプロイする

cd  /app/gatsby

プロジェクトのビルド
npm run build

デプロイ先の確認
firebase use
デプロイ
firebase deploy --only hosting

Hosting URLにアクセスすると

デプロイされたことが確認できる

参考

https://www.gatsbyjs.com/
https://firebase.google.com/docs/hosting?hl=ja