Netlify の最大の問題点#

Netlify は GitHub にプッシュされた内容を自動でビルドして更新してくれるというスグレモノではあるものの、無料枠が 300 分しかなくそれ以上のビルドをすると料金がかかってしまう仕組みになっている。

単なるウェブサイトなら気にもならないのだが、本ページのようなブログだと誤字修正などで頻繁にプッシュするため小さなビルド時間も積み重なってかなり食ってしまう。

現時点でも 58/300 を使い切ってしまっており、このままの更新ペースを維持した場合とても無料枠に収まりきりそうにないのである。

GitHub Actions を使う#

その点、GitHub Actions であればパブリックなレポジトリに関してはビルド制限がまったくないのでこれを利用する。

::: tip うちのブログは

うちのブログは Vssue を利用しているためにブログのレポジトリにプライベートキーが載っていたりする。

そのため公開レポジトリにはできないのだが、それでも GitHub Actions なら 2000 分のビルドクレジットがあるので Netlify の実に 6 倍以上である。当分、ビルド時間に関して心配は要らなさそうだ。

:::

実装してみる#

Netlify へのデプロイをビルド時間 0 で行うための GitHub Actionsでキーの取得から設定まで載っているので利用させていただきましょう。

// キャッシュ無効
name: Netlify

on:
  push:
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    runs-on: ubuntu-18.04

    steps:
      - uses: actions/checkout@v2

      - uses: actions/setup-node@v2
        with:
          node-version: "14"

      - run: yarn install
      - run: yarn build

      - run: npx netlify-cli deploy --prod --dir=./blog/.vuepress/dist
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

せっかくなので最新の Node.js を利用するようにしたのと、Netlify にデプロイするときにプロダクションとして扱うようにしました。

これで、GitHub にプッシュするだけで自動的にビルドが行われ、ビルドされたデータが Netlify に送られて更新されるというわけです。

::: warning Netlify の設定

当たり前だが、Netlify からデプロイ時のビルドをしないように変更しておこう。

そうでないと二回ビルドされてしまって意味がない。

:::

で、これでもいいのですが、どうせならキャッシュを使って GitHub Actions のビルド時間も減らします。

// キャッシュ有効化
name: Netlify

on:
  push:
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    runs-on: ubuntu-18.04

    steps:
      - uses: actions/checkout@v2

      - uses: actions/setup-node@v2
        with:
          node-version: "14"

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - uses: actions/cache@v2
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - run: yarn install
      - run: yarn build

      - run: npx netlify-cli deploy --prod --dir=./blog/.vuepress/dist
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

初回のみ必ずキャッシュがミスヒットするので余計に時間がかかりますが、二回目以降は速くなるはずです。

一回目をやった感じだと 40 秒くらい遅い結果に。果たして二回目は？

思ったよりも速くならなかった！！！

まあでも三分以下でビルドできるということは一ヶ月に 600 回はブログを更新できるということです。一日 20 回ペースでプッシュしなければ大丈夫なので、まあ多分大丈夫でしょう。

yarnではなくnode_modules自体をキャッシュしたほうが高速化できるそう（yarn installが一秒で終わるとかなんとか）なのですが、まあそんなに変わらないので今回はパスということで。

記事は以上。