Github ActionsからNetlifyへデプロイしようとしたら詰まった話

目次

• 経緯
• 詳しい手順
• npm ci 使えば yarn より速いかも
• というわけで npm i して package-lock.json 生成
• ちなみに
• まとめ

経緯

Netlify は無料かつ高性能の最高なホスティングサービスだけど、やたらめったらビルドしまくってるとさすがに課金が発生してしまう。無料プランでは 300 分/月までビルドできるけど、300 分を超えてしまうとクレジットカードを登録していなくても自動的に課金が発生する。一回のビルドにかかる時間は大体 3 ～ 5 分程度だと思う。つまり 60 ～ 100 回くらいは無料でビルドできるわけだけど、サイトのメンテナンスだとか開発だとか記事の投稿をしているうちにどうやら僕は 300 分を超えていたらしい。メールで「もうすぐ無料範囲を超えてしまうよ」とお知らせも来るんだけど、クレジットを登録していないのにまさか自動課金処理がされるとは思わなかったのだ。多くのサービスであれば超過分についてはビルドされないとかそんな感じの処理だと思う。恐るべし Netlify。ちなみに支払いが滞ると滞納者として扱われ、滞納が続くと最終的にはサイトが消滅する。

Netlify に 7 ドル支払った話（GitHub Actions で Netlify にデプロイする）

なんだかんだ、上記記事と同じように僕も 7 ドル支払う羽目になった。それでもロリポップや XSERVER より遥かに安いわけだけど。とはいえ今後も毎月 7 ドル払うのも微妙だし Github Actions を使うことに。本来はローカルで開発したものを Github に push すると Netlify に自動的に流され、Netlify でビルドが始まる。

Github Actions を使うとビルドしたものを Netlify に流す形になる。

GithubActions でのビルドを挟めば Netlify でのビルド時間を 3 ～ 5 分から 3 秒まで削減できる。「その分のビルド時間分、Github Actions にお金を払わなければいけないのでは？」と思うかもしれないが、Github Actions ではパブリックリポジトリは完全無料。プライベートリポジトリでも 2000 分/月までビルド時間を使うことが許されていて Netlify の約 7 倍だ。最高。

詳しい手順

• Netlify へのデプロイをビルド時間 0 で行うための GitHub Actions
• Gatsby でも Netlify に Github Actions でビルドしたコードをデプロイしたい。

詳しい手順は割愛。上記二つの記事を参考に Github Actions 用の build.yml ファイルを作った。

name: Build Gatsby and deploy to Netlify

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: "12.x"
      - run: npm ci
      - run: npm run build

      - uses: netlify/actions/cli@master
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        with:
          args: deploy --dir=public --prod
          secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'

が、エラーが生じてしまった。

 Run npm ci1s
##[error]Process completed with exit code 1.
Run npm ci
npm ERR! cipm can only install packages with an existing package-lock.json or npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or later to generate it, then try again.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2020-07-01T22_43_31_196Z-debug.log
##[error]Process completed with exit code 1.

run npm ciの部分でエラーが生じてるよう。npm ciはpackage-lock.jsonファイルがないとインストールできないそう。確かに僕は yarn を使っていて yarn.lock しかない。てかそもそもnpm ciってなんだ。

npm ci 使えば yarn より速いかも

npm ci を使おう あるいはより速く yarn の二倍早い npm ci 登場。学習コスト０。ツールのインストール０

そもそもこんなものがあるの知らなかった。なんなら僕が yarn を使い始めたのが半年前程度なのにそれより前から存在していたとは。

というわけで npm i して package-lock.json 生成

package-lock.json がない状態では npm ci は使用できないので、初回はnpm installornpm iをして package-lock.json 生成。これ以降は npm ci を使えばいい。ついでに本来の問題であった Github Actions のエラーもクリアできた。0 秒ビルド万歳。

ちなみに

同じ轍を踏まないように Github Actions の使用量はこちらからチェックできる。

https://github.com/settings/billing

デフォルトでは料金の上限は$0になっており、この上限に達した後に追加で分やストレージが使われないようになっています。 デフォルトの$0 以上に料金の上限を増やすと、上限を超えた分の分やストレージに対して課金されます。これは過剰分とも呼ばれます。

https://docs.github.com/ja/github/setting-up-and-managing-billing-and-payments-on-github/managing-your-spending-limit-for-github-actions

まとめ

Netlify しかり、Github Actions しかり、Gitpot しかり、便利なのに無料なものが増えて嬉しいなぁ