m's blog

備忘録とかメモとか

Netlify 向けデプロイテンプレートの中身を解説!

Netlify 向けデプロイテンプレートの中身を解説

今回は、前回紹介した Netlify 向けデプロイテンプレート の中身について解説していきたいと思います。

テンプレートの使い方については、前回記事を参照してください。

目次

簡単な流れ

本記事では、以下のような流れで解説を進めていきます。

  1. ディレクトリ構成の解説
  2. デプロイに使用する主なファイルの解説
  3. Netlify の「deploy-preview」機能の使用について補足
  4. まとめ

それでは、早速、Netlify 向けデプロイテンプレートの中身を解説していきたいと思います。

はじめに

ローカル環境でソースコードをチェックする場合は、以下のリポジトリをクローンしてください。

※ 主要なファイルのコードは、記事内で紹介しているので、他のファイルを見たいなど特別な理由がなければ、クローンする必要はありません。

ディレクトリ構成

ディレクトリ構成は以下の通りです。

Netlify 向けデプロイテンプレートの中身を解説

この中で、サイト公開に使用するのは、.github/workflows 以下のワークフロー設定ファイル4つと、build.shsrc/index.html の全部で7つのファイル です。

デプロイ設定のメインはワークフロー設定ファイルですが、その前に、まずは公開ページのテンプレート src/index.html とビルド用スクリプト build.sh を見ていきます。

主要ファイルの解説

src/index.html

公開ページのテンプレートファイル です。

src/index.html の中身は以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>{stage}</title>
</head>
<body>
<p>stage : {stage}</p>
<p>date : {date}</p>
</body>
</html>

{stage} の部分は環境の確認用部分で、ビルド時に環境名に置き換えます。

{date} の部分は更新の確認用部分で、ビルド時に日付に置き換えます。

build.sh

公開ページの生成スクリプト です。

build.sh の中身は以下の通りです。

stage=$1

# 公開用ディレクトリを作成
mkdir -p public

# ページテンプレートを公開ディレクトリへコピー
cp src/index.html public/index.html

# 公開ページの調整
sed -i "s/{stage}/$stage/g" public/index.html
sed -i "s/{date}/$(date)/g" public/index.html

先ほどのページテンプレート src/index.html を、public ディレクトリにコピーして、{stage}{date} 部分を書き換えています。

デプロイ用のワークフロー設定ファイル

ここからは、.github/workflows の相対パスで解説を進めていきます。

テンプレートに含まれる、デプロイ用のワークフロー設定ファイルは以下の4つです。 - production.yml - pull-req-preview.yml - staging.yml - templates/deploy-preview.yml (optional)

各ワークフロー設定ファイルの中身を個別に見ていきます。

production.yml

プロダクション環境へのデプロイ設定 です。

production.yml の中身は以下の通りです。

name: production

on:
  push:
    branches:
      - production

jobs:
  production:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: build
        run: . ./build.sh production

      - name: checkout branch for publish
        run: git checkout -b production-public

      - name: Commit files
        run: |
          echo ${{ github.ref }}
          git add public
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git commit -m "ci: Automated build push" | exit 0
      - name: push
        run: git push "https://${{github.actor}}:${{secrets.GITHUB_TOKEN}}@github.com/${{github.repository}}.git" --follow-tags -f | exit 0

以下の内容に従って、production ブランチにプッシュされたときに、上記のワークフローが実行されます。

on:
  push:
    branches:
      - production

ワークフロー中でのステップの流れは以下の通り。

  • production ブランチをチェックアウト
  • ビルド
  • プロダクション環境公開用のブランチ production-public をチェックアウト。(初回はブランチ作成)
  • ビルドファイルをコミット
  • プッシュ

ここで、ビルドファイルを production にプッシュすると、マージするときに毎回マージ元とマージ先のビルドファイルのコンフリクトがおきて面倒 なので、公開用に production-public ブランチを作成して、そっちにプッシュ しています。

staging.yml

ステージング環境へのデプロイ設定 です。

staging.yml の中身は以下の通りです。

name: staging

on:
  push:
    branches:
      - staging

jobs:
  staging:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: build
        run: . ./build.sh staging

      - name: checkout branch for publish
        run: git checkout -b staging-public

      - name: Commit files
        run: |
          echo ${{ github.ref }}
          git add public
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git commit -m "ci: Automated build push" | exit 0
      - name: push
        run: git push "https://${{github.actor}}:${{secrets.GITHUB_TOKEN}}@github.com/${{github.repository}}.git" --follow-tags -f | exit 0

内容は、production ワークフローとほぼ同じです。

起動するタイミングが staging ブランチにプッシュされたときであることと、公開用のブランチが staging-public ブランチ である事が違います。

pull-req-preview.yml

プルリクレビュー用のデプロイ設定 です。

※ Netlify の deploy-preview 機能とは異なります。

pull-req-preview.yml の中身は以下の通りです。

name: pull-req-preview

on:
  pull_request:
    branches:
      - staging

jobs:
  pull-req-preview:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: build
        run: . ./build.sh pull-req-preview

      - name: checkout branch for publish
        run: git checkout -b pull-req-preview-public

      - name: Commit files
        run: |
          echo ${{ github.ref }}
          git add public
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git commit -m "ci: Automated build push" | exit 0
      - name: push
        run: git push "https://${{github.actor}}:${{secrets.GITHUB_TOKEN}}@github.com/${{github.repository}}.git" --follow-tags -f | exit 0

こちらも、production ワークフローとほぼ同じ内容です。

起動するタイミングが staging ブランチに向けたプルリク時 であることと、公開用のブランチが pull-req-preview-public ブランチ である事が違います。

templates/deploy-preview.yml (optional)

Netlify の「 deploy-preview 」機能を使用する場合のデプロイ設定 です。

デフォルトの配置では、ワークフローは起動しません。

「 deploy-preview 」機能を使用する場合は、deploy-preview.yml.github/workflows 直下に移動してください。

※ 「 deploy-preview 」機能を使用する場合、プッシュ時に、毎回、ワークフローで生成されたファイルのマージが必要 となります。

templates/deploy-preview.yml の中身は以下の通りです。

name: deploy-preview

on:
  pull_request:
    branches:
      - staging

jobs:
  deploy-preview:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: build
        run: . ./build.sh deploy-preview

      - name: Commit files
        run: |
          echo ${{ github.ref }}
          git add public
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git commit -m "ci: Automated build push" -a | exit 0
      - name: push
        run: git push "https://${{github.actor}}:${{secrets.GITHUB_TOKEN}}@github.com/${{github.repository}}.git" --follow-tags -f | exit 0

「 deploy-preview 」は、ここまで紹介したワークフロー設定とは少しだけ内容が異なります。

起動タイミングについては、「 pull-req-preview 」と同様で、staging ブランチに向けたプルリク時にワークフローが実行されます

「 deploy-preview 」では、プルリク元のブランチの内容が Netlify へデプロイ・公開されるため、プルリク元にビルドファイルをプッシュ しています。

このため、先述の通り、Netlify の「 deploy-preview 」機能を使う場合は、プッシュ時に毎回、自動ビルドされたファイルのマージが必要 になります。

Netlify「 deploy-preview 」機能の使用について

試したこと、あれこれ (またはカスタム用メモ)

pre-commit

「 deploy-preview 」機能用に pre-commit を使ってローカルでビルド することも可能です。

ただ、コミット時に毎回ビルドされるので、ビルド処理が重い場合はつらい気がします(*´Д`;)

pre-push

結果を先に書くと、これは うまく行きませんでした

コミット時は面倒だけど、「プッシュ時なら!」と考えたのですが、pre-push 中でコミットした内容はプッシュされず、次回のプッシュにおあずけとなりました。

手動ビルド

「 deploy-preview 」機能を使いたい場合は、これが一番無難かもしれません。

「自動」ではないですが、他の場合と比べて 面倒なことが少ない です。

ローカルビルドをリモート環境でもチェックする、チェックしたい時にビルド&プッシュするくらいがいいかもしれません。

最終兵器「使わない」

前述の手動ビルドでも良さそうですが、過去のデプロイを見ても、いつのビルドかわからないとなると、ちょっと混乱しそうです。

「 deploy-preview 」機能のメリットの1つは、ビルドの「履歴」が確認できる事ですが、そこが微妙だとすると、残るメリットは「プルリク時のチェック」です。

プルリク時のチェックだけなら、プルリク時の確認に用意してある「 pull-req-preview 」でも問題ないので、手動ビルドをするくらいなら「使わない」ほうがいいのかも。。。

結論

  • ビルドが軽い => pre-commit
  • プッシュ時のマージは気にしない => 「 deploy-preview 」ワークフロー
  • 面倒事はお断り => 使わない

その他のメモ

「 deploy-preview 」機能が動作するには、マージ先が Netlify の設定の「 Production branch 」か「 Branch deploys 」に入ってないとだめっぽい です。

例えば、作業用ブランチのプルリクマージ先を staging ブランチにする場合は、「 Branch deploys 」に staging ブランチを追加する必要があります。

まとめ

今回は、前回紹介した Netlify 向けのデプロイテンプレートの中身を解説してみました。

シンプルな内容なので、自分の環境に合わせてカスタムして使ってください。

改善点や、ここがまずいみたいなところがあったら、コメントしてもらえるとありがたいです(*´▽`*)/