GCP のcloud buildでNext.jsのSSGがタイムアウトした時の対策 #Next.js

Nuxt.jsとNext.jsのサイトを混在させたコンテナを
GCPのcloud buildでサイトのビルド→GKEにデプロイして公開ということを行なっていて、
サイトのボリュームの増加とともに、ビルド時間も長くなっていき、
先日ついにタイムアウトが発生した。

https://qiita.com/ko-zi/items/b5aa59ead36b74de15b5

※Cloud BuildからGKEにデプロイする手順の記事

元々、Nuxt.jsのサイトのコンテナに後からNext.jsのサイトを追加していて
それでどんどんビルド時間が伸びていって
普通はコンテナを分けると思うんだけど、
個人の検証で

GCPのcloud buildでは、マシンタイプを設定することができ、
ハイスペックのマシンを使うことで、ビルドの高速化も可能だが、
そもそもの問題として、貧弱なバックエンドサーバーがSSGで集中的にアクセスされた際に
処理が捌きキレずにタイムアウトを起こしていたので、根本的な解決にならなかった。

こればっかりはAPIサーバー側のスペックを増強の検討が必要だけど
個人の検証サイトなので、お金をあまりかけたくない。

Next.jsのサイトは、SSG＋ISRの設定をしているので、
SSGで静的コンテンツを生成せずとも
ページアクセス時にページの生成が可能なのでは？
と思い、ビルド時のSSGをスキップできないか？と考えた。

具体的には以下のようにしてみた。

Next.jsのSSG・ISRでは、getStaticPathsで静的ページを生成するパスの情報を
取得させるので、ビルドはその情報を渡さないように環境変数で分岐するようにした。


export async function getStaticPaths() {

    let paths = [];
    if(!process.env.BUILD){
        const res   = await fetch(`****`)
        const data = await res.json();

         paths = data.body.map( data => ({
            params : { id: data.id.toString() }
        }))

    }
    return {
        paths,
        fallback:true
    };
}

変数についてはCloud Buildで実行するDockerfileで以下のようにして渡した

RUN BUILD=1 npm run build

この設定を行うことでCloud Buildでタイムアウトを発生させずビルドを完了させることができて
また初回アクセス時にISRでページ生成することができることも確認できた。

GKEのポッドにアクセス

$ kubectl exec -it ****-****-bf76c97b9-ls8q4   -- /bin/sh

静的コンテンツが生成されているとお思われるディレクトリを見てみる
ビルド直後は静的なページデータがない状態

/app/*****/.next/server/pages/articles # ls -l
total 224
-rw-r--r--    1 root     root          1975 Dec 31 09:02 [id].html
-rw-r--r--    1 root     root         19843 Dec 31 09:02 [id].js
-rw-r--r--    1 root     root        204697 Dec 31 09:02 [id].js.nft.json

↓ページにアクセスすると、該当するページデータが増えて行くことを確認

/app/*****/.next/server/pages/articles # ls -l
total 292
-rw-r--r--    1 root     root         33721 Dec 31 09:27 7.html
-rw-r--r--    1 root     root         31789 Dec 31 09:27 7.json
-rw-r--r--    1 root     root          1975 Dec 31 09:02 [id].html
-rw-r--r--    1 root     root         19843 Dec 31 09:02 [id].js
-rw-r--r--    1 root     root        204697 Dec 31 09:02 [id].js.nft.json
/app/*****/.next/server/pages/articles # ls -l
total 360
-rw-r--r--    1 root     root         33989 Dec 31 09:27 197.html
-rw-r--r--    1 root     root         32055 Dec 31 09:27 197.json
-rw-r--r--    1 root     root         33721 Dec 31 09:27 7.html
-rw-r--r--    1 root     root         31789 Dec 31 09:27 7.json
-rw-r--r--    1 root     root          1975 Dec 31 09:02 [id].html
-rw-r--r--    1 root     root         19843 Dec 31 09:02 [id].js
-rw-r--r--    1 root     root        204697 Dec 31 09:02 [id].js.nft.json
/app/*****/.next/server/pages/articles # ls -l
total 432
-rw-r--r--    1 root     root         33989 Dec 31 09:27 197.html
-rw-r--r--    1 root     root         32055 Dec 31 09:27 197.json
-rw-r--r--    1 root     root         36827 Dec 31 09:28 31.html
-rw-r--r--    1 root     root         34874 Dec 31 09:28 31.json
-rw-r--r--    1 root     root         33721 Dec 31 09:27 7.html
-rw-r--r--    1 root     root         31789 Dec 31 09:27 7.json
-rw-r--r--    1 root     root          1975 Dec 31 09:02 [id].html
-rw-r--r--    1 root     root         19843 Dec 31 09:02 [id].js
-rw-r--r--    1 root     root        204697 Dec 31 09:02 [id].js.nft.json