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

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

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-firebase/

# 概要
#### 前提条件
Firebaseアカウントを取得していること
Dockerが使える環境であること
#### 手順
Docker環境構築
Gatsby.js プロジェクト作成
Firebase Hosting にデプロイ


# Docker環境構築
docker-composeを使用してコンテナを作成します。
```dockerfile: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
```
```yaml: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から接続できるように書き換える。
```json: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との接続設定をする。公式に書いてある通りに進める。

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-firebase/
```
cd  /app/gatsby
firebase login --no-localhost
プロジェクトがある場合は選択し、ない場合は作成する。
firebase init
(y/N)のところはNoで問題ない。最後にHostingを選択する。Hostingが二つ存在するが、上のほうを選択する。
```
作成されたfirebase.jsonを編集する
```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にアクセスすると
![Screenshot 2022-07-17 at 04-20-05 Home Page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2639110/8b0e9f68-9cd9-df55-4863-c2eb51e5e10b.png)
デプロイされたことが確認できる

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