Nextjsで静的サイト(SSG)で構築する構成

こんにちは投資ロウトです。

背景

自社のHP制作などを任せられたり、webサービスを公開したいので、インフラを構築してほしいと言われることがあると思います。

その際に、様々なwebフレームワークを構築されると思いますが、インフラで構築する一例のご紹介になります。

構成図について

構成に関してですが、Route53で名前解決をし、CloudFrontにアクセスします。CloudFrontがS3に対して、静的ファイルを取得し、それを利用者のwebブラウザに返却する構成になっています。

独自ドメインを使用しているので、「Certificate Manager」も活用しています。

またs3にアップロードする際は、Nextjsでbuildとexportをして、静的ファイルを用意し、s3に配置しています。

一つの構成方法としてお役に立てますと幸いです。