前回記事まででSSGでJamstackなサイトを作成してみるまでをまとめておりましたが、今回は番外編としてビルド時のエラー対応についてもいくつかメモとして残しておきたいと思います。初めて作成するときに実際にハマったポイントなど、慣れていなかったり、設計や実装方法に無理があると上手く進まないことも多々あります。実装の注意点として事前に把握しておきたいところですね。また、過去の作成まとめ記事などは下記をご参考ください。   （過去記事） ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃5：静的サイトのビルド ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃4：動的ページ（投稿詳細）の実装 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃3：動的ページ（投稿一覧）の実装 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃2：フロントエンドでのサイト制作 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃1：ヘッドレスCMSの構築  

コンポーネントやスクリプトファイルのパスが参照できない

ローカルサーバーでの開発時にはエラーが発生していないのに、なぜかganerateでのビルドの時にimportしているページコンポーネントやstore内のスクリプトの参照エラーが発生してしまいました。

Module not found: Error: Can't resolve ******

  どうやらnode_modulesをシンボリックリンクで使っていたことが原因、、勉強用に使っていた別のプロジェクトで使っていたものをそのまま共用する形になっていました。ですので、改めてルートディレクトリにnpm installでnode_modulesをインストールすることで解決しました。（おそらく通常はこのようなことはないと思われますが、、）  

APIサーバーの504エラー

ブログページなどの動的ルーティングが大量にある場合、APIサーバーへの通信も増えるため、やり方がまずいとサーバーに負荷がかかりダウンしてしまいます。そうなるとビルドも完了することができません。今回のケースではganerate中にnginxで504 timeout error が発生しており、コントロールパネルのリソース状況を確認してみるとAPI用のサーバーが高負荷になっている状態になっていました。そのためビルドが完了できない状況ということに、、グラフにも顕著に表れていました。   エラーログを見ても下記の通り、APIへの通信がかなり負担をかけた様子、、大量の記事があるので仕方ないのと、もしかしたら処理の方法に問題があるのかも、、とサーバー周りから見直してみることに。

upstream timed out (110: Connection timed out) while reading response header from upstream.....

  まずは、nginxの504タイムアウトエラー対策として、設定を下記に変更、サーバーダウンを防ぐためにタイムアウトの時間を延ばします。 【/etc/nginx/nginx.conf】

.......
http {
  .......
  keepalive_timeout 180;
  send_timeout 180;
  proxy_connect_timeout 180;
  proxy_read_timeout 180;
  proxy_send_timeout 180;
  .......
}

  nginxの場合には設定ファイルの構文チェックと再読み込みを忘れず行います。

# nginx -t
# nginx -s reload

  そしてその上で、nuxt.config.jsのファイルでgenerateの中にあるintervalの設定を変更し、APIヘの通信の間隔を伸ばすことに。 【nuxt.config.js】

export default {
  .....
  generate: {
    interval: 3000,
    .....
  },
  .....
}

  実際にはここまで伸ばさなくても良いケースがほとんどだと思いますが、伸ばしすぎるとビルドの時間もそれだけ増えてしまいます。今回は余裕を持って設定してみまして、改めてgenerateを実行してみると、、

✔ Generated route "/media/post/****"
✔ Generated route "/media/post/****"
✔ Generated route "/media/post/****"
......

  問題なくビルドを進めることが確認できました。ただ、build時間がものすごくかかってしまいました。。今回は大体800記事ほどのボリュームで、なんとbuildにかかった時間が59分でした。その上、distディレクトリの容量も3.4GBとかなり巨大なものになってしまっていました、、   上記のintervalの設定もかなり影響しているようでしたが、そもそも詳細記事内に過去記事の抜粋コンテンツを表示させるために、全記事取得してフロント側でデータをトリミングして表示させるなど、見直しが必要な部分が多々あったので、改めて改修することに。（参考記事「ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃5：静的サイトのビルド」）   ちなみに、上記のエラー以外にも下記のようなWarningも表示されていることもあったのですが、同時に解消されているようでした。サーバーに負荷がかかることで通信時の処理がスムーズに行われていなかったのも影響していたのかもしれません。

Cannot stringify a function transformRequest 
Cannot stringify a function transformResponse
Cannot stringify a function httpAdapter
Cannot stringify a function validateStatus 
Cannot stringify arbitrary non-POJOs ClientRequest 
Cannot stringify a function toJSON

 

---

  まだまだ勉強中ですが、今後Jamstackの構成で作成されるケースも増えてくることも予想されるので、API通信を使う場合には是非頭の片隅に置いておきたいところですね。サイト自体はフロントエンド側での開発がメインとなりますが、APIを作成するなどサーバーやバックエンド側の開発をする場合には、この辺りも考慮しておくことが重要ですね。   （過去記事） ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃5：静的サイトのビルド ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃4：動的ページ（投稿詳細）の実装 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃3：動的ページ（投稿一覧）の実装 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃2：フロントエンドでのサイト制作 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃1：ヘッドレスCMSの構築