Netlify でのビルド時間の合計って気にしたことありますか？ #Nuxt

はじめに

Netlify における各プランの詳細ページです。今回取り上げるのは「Build minutes」。なんやそれ...？ですが、簡単に言うと Netlify でビルド、デプロイにかかった時間の合計です。それがどないしたん...？ですが、これがわりと大切で、気をつけないと月の制限を超える場合がありますよってのがこの記事での主題になります。

何をしたら Build minutes の月の制限を超えるのか？

ぼくは JAMstack という単語を最近知り、いろいろ調べているうちに Netlify, Contentful, Nuxt.js で何か作ってみようと思い、ここ一ヶ月 Visual Studio Code を使ってキーボードをカタカタしていたわけですが、その中でいろいろ便利な機能があることを知り、さらにカタカタが勢いを増したわけですが、その結果、数日で Build minutes の月の制限の 1/3 を食い散らかしていました。

で、何が原因やねんって話しですが、いろいろ整理できてきたのでまとめてみます。

git push しすぎ問題

ぼくはバカなので、ブランチを切らずにガンガン master に commit するんですが、しかも 1 commit したらすぐ git push してしまう癖があり、その都度 Netlify 側でビルド、デプロイが走っていたわけであります。幸いなことに Netlify でのビルド、デプロイってのはものすごく賢いらしく、その結果、ビルド時間は 1 分程度で終わるんですが、これからはちゃんといろいろ考えてやりたいなと思いました。

対策としては、複数 commit してまとめて git push です。説明するのも恥ずかしいですが、です。あとはビルドに関係のない commit は commit メッセージに [skip ci] を含めてあげるとビルド、デプロイをスキップすることができるみたいです。やりましょう。はい。

Contentful の Webhook 問題

ぼくは思いの外賢いので、あることに気づきました。Contentful 側でコンテンツ追加したら Netlify 側で自動でビルド、デプロイやってくれやボケほなら便利やろがカスと。ただそれ以上に賢い Contentful 兄さんはそういう機能を初めから持ち合わせていました。それが webhook です。なんやそれ...?ですが、コンテンツに変更があると Netlify 側で自動でビルド、デプロイを走らせるってなことができるわけです。他にもいろいろできるみたいですが、今回はその設定をやっていました。

プログラマは自動化が大好きなのでついついやっちゃいますよね。
でも、それの何がいけないのか。

便利は便利なんです。ただ、まだまだ開発段階な状況である今、こういう webhook はいらないんです。だって markdown 形式でコンテンツを書いていって、それを CSS で見た目良い感じにしていってってやってると、ガンガンコンテンツに変更が入るわけです。ページネーション機能も欲しいなぁって思って、コンテンツを増やしてあーだこーだやってると、その都度、 webhook が反応して Netlify 側で自動でビルド、デプロイをやっちゃう。

結果、ぼくは数日で 100 回以上ビルドしていました。
ぼくは思いの外賢くはなかったのです。むしろバry

対策としては、コンテンツの変更を検知して自動でビルドとかの webhook は開発段階ではやめましょう。便利は便利なんです。ただ、今やることじゃない。

Auto Publishing 問題

git push したら自動でビルド、デプロイ便利ですよね。でも初期の開発段階だとガンガン変更が入ると思うので、安定してから自動化しても遅くない。

対策としては、管理画面の Deploys をクリックで現在の Auto publishing の状況が見れるので、オフりたかったらポチッとなしましょう、ということです！安定してから自動化しても遅くない！ということですっ！

プルリクレビュープレビュー問題

チームで開発する場合、俺の変更みてくれこれでええか？ってな作業が発生すると予想されますが、その場合、プルリクエストを作成してあーだこーだするとします。Netlify はすごく賢いので、プルリクエストを送ると、変更箇所を含めたやつを自動でビルド、デプロイしてプレビュー用の URL を作ってくれて、そこで確認したりできるんです。すごく便利ですよね。そこでええやんとなったら master に merge されるわけですが、ここでも当たり前ですがビルド、デプロイが頻繁に実行されるわけで、ぼくはプルリクレビュープレビューをやったことないので詳しくはわかりませんが、場合によってはかなりの Build minutes が発生する恐れがあります。

対策としては、状況によりけりですが Auto Publising の Off がここでも有効でしょうか。また管理画面の Site settings > Build & Deploy > Deploy contexts からプルリクエストによるプレビュー機能をオフにできたり、どのブランチをデプロイするかなど設定できるので、開発初期の段階でちゃんと確認してどういう構成でいくか決めておきましょう。無料プランでも甘えたらヘッショワンパンですよ！ワンパンではないけども！

npm run generate にめちゃくちゃ時間かかる問題

初期の開発段階ではなかなか見えてこない問題ではありますが、コンテンツが増えていくにつれて生成するファイルも多くなり、その分それにかかる時間も増えていきます。Netlify はすごく賢いので、良い感じに最短でビルド、デプロイしてくれますが、それでもローカルで全コンテンツを生成する時間をしっかり確認して、事前に最適化できる箇所はしっかりやっておきましょう。

ぼくは axios を使って SoundCloud の特定の音楽の id をスクレイピングで取得して (oembed でもいいけど) 良い感じなパラメーターが付いているレスポンシブな embed を markdown 形式のコンテンツから読み取って自動的に変換して貼ってやろうとか考えてたんですが、こういうことやっちゃうと (あまりやろうと思う人は少ないかもだけど！) 数によってはめっちゃ時間かかると思うんです。だからやめましょう。

(Contentful は Embedly と連携してなんか良い感じにあーだこーだできるみたいですが、まだちょっとよくわかっていない...)

対策としては、全コンテンツを生成する時間をしっかり確認して、事前に最適化できる箇所はしっかりやっておきましょう、ということです！

Build minutes の月の制限を超えたらどうなるの？

Build minutes に関する FAQ がちゃんとあるので読みましょう。わりと重要なことが書いてあります。制限超えたらツケみたいな感じになるんですかね。実際問題よくわからないので、誰か是非やらかしてみてください :)

まとめ

無料プランはありがたいけど、これからはちゃんといろいろ考えてやりたいなと思いました。

Netlify でのビルド時間の合計って気にしたことありますか？