$shibayu36->blog;

株式会社はてなでエンジニアをしています。プログラミングや読書のことなどについて書いています。

Next.js利用時の静的画像配信の方法

静的な画像を使いたくなったら、基本はnext-imagesを使っておけば良い。https://github.com/zeit/next-plugins でも紹介されている。

このライブラリはNext.jsを使う時のwebpackのfile-loaderの推奨設定を書いてくれているだけの薄いライブラリ。file-loaderを使っているので、画像を使いたいところではimportして使うと良い。詳しい使い方はnext-imagesのドキュメントを参照のこと。

実装は非常に薄いので、もし静的画像の配信周りでチューニングしたければ中身を拝借して自分好みに変えると良いだろう。

production環境での配信

next-imagesを使うことで、静的画像も配信できるようになる。しかしproduction環境ではNodeのプロセスから画像を配信せず、S3に静的ファイルを配置し、CloudFrontを経由して配信したくなるだろう。その場合はS3にファイルを配置した上で、フルCDNアーキテクチャCDNドメインを分けるアーキテクチャなどのアーキテクチャに応じて配信方法を変えると良い。

S3に静的ファイルをアップロードする

next buildすると.next/以下に成果物が作成される。特に静的ファイルは.next/static/以下に生成されている。この成果物はURLとしては /_next/static/ 以下から配信されている。

  • 例1) /_next/static/mxB2bTmDn1q4LbLd4s4qP/pages/index.js
  • 例2) /_next/static/images/image1-2ae516abfafa31abf108c359ca581b8c.jpg

そのため、.next/以下のファイルをS3に配置しておくと良い。もしかしたら.next/static/以下だけで良いかもしれないが、生成されている成果物のそれぞれのディレクトリごとの役割が把握しきれていないので、一旦全部アップロードしておく。

フルCDNアーキテクチャパターンでの配信

動的なページも含めて全て一度CDN(CloudFrontなど)を通る設計となっているなら、URLのpathベースでS3にルーティングしたら良い。すなわちCloudFrontなどで

  • /_next/配下へのリクエストならS3をオリジンとする
  • それ以外ならNext.jsが動くNodeプロセスをオリジンとする

CDNドメインが、アプリケーションのドメインと別の場合での配信

例えばCDNドメインcdn.example.com で、アプリケーションのドメインexample.comの場合、静的ファイルのURLのドメインCDNドメインにする必要がある。この場合は、assetPrefixを設定することで対応できる。