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

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

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

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

簡単な流れ

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

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

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

はじめに

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

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

ディレクトリ構成

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

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

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

デプロイ設定のメインはワークフロー設定ファイルですが、その前に、まずは公開ページのテンプレート 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 の相対パスで解説を進めていきます。

テンプレートに含まれる、デプロイ用のワークフロー設定ファイルは以下の４つです。 - 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