Netlifyへのデプロイがタイムアウト

最近は仕事から趣味まで作ったもの（主にフロントエンド関連）のデプロイが簡単にNetlifyにできてしまうので多用しています。

直近ではVue.jsのコンポーネントをStorybookで公開しようとしたのですが、単純なタスクなはずが思いの外ハマってしまったので対処法をシェアしようと思います。

TL;DR

問題

npm run build のようなビルドタスクが30分以上かかってしまってNetlify側でタイムアウトしてしまう

解決方法

ビルド時のログの出力量に注意！特にwebpackのようにビルド時に大量にログを出力するツールを使う場合は、出力しないオプションを付加しましょう

発生していた問題とは、Netlifyがタイムアウトするというものです。

f:id:kenev:20190708214549p:plain

上の画面はVue.jsのStorybookをビルドしている最中のものです。静止画だけで伝えられないのですが、ビルドの進捗がものすごく遅いんです。このときは開始したのが12:45ごろだったので、およそ30分くらいこの調子でちょっとずつ%が上がるだけで、そのあと静かにデプロイが失敗します。

Netlifyはエラー文言も無しに静かに失敗し、ローカルではなんの問題もなくサクッとStorybookを開始できるのでお手上げでした。ということでサポートに問い合わせしてみることにしました。デプロイに失敗すると簡単にサポートに連絡できるようにリンクが用意されています。

ここから問い合わせフォームが下のように入力できるようになっていて、Netlify側もデバッグしやすいようにリンクも自動で貼り付けてあるので、送信するだけです。

f:id:kenev:20190708215808p:plain

僕の場合、送信してから半日くらいでサポートから返事がきました。

内容を要約すると

「ビルドのログが多すぎて、Netlifyの Log Serviceが問題を起こしていた。Storybookのビルドするなら —quiet オプション付加してみて」

ってことでした。

なるほど、確かにログの表示が変に空白が多かったりしてましたね。

ということでbuild-storybookに—quietオプションをつけることにしました。公式サイトでもドキュメントされています。

更新して再度デプロイしてみると、サクッと終わってサクッとNetlify上でStorybookが公開されました！

変に長時間悩み続けることなく、サポートに問い合わせてみてよかったです！

調べても同じ問題に遭遇している人を見つけられなかったので、この記事が誰かの助けになればと思います。