対象者

なぜやろうと思ったか？

「Nuxt3 SSR AWS」で検索するとAmplifyを使うパターンか、Serverless Frameworkを使うパターンしか検索結果に引っかからないからです。

Amplifyは融通が効かない部分があるため今回は使いたくないし、
かといってServerless Frameworkはv4から有料になるしv3は２０２４年でサポート終了するらしいし...

ということで、自前で一からCloudFront + Lambda + S3構成を作ってみたのですが、
できるまで丸二日間スタックしたので皆さんが同様の状況にならないようにまとめました。

Nuxt SSR構成でビルドできる状態であること
調べればすぐ出てくるようなデプロイ用の設定は終わっていること
1. nuxt.config.tsのnitroの設定にpreset:aws-lambdaが設定されているとか
AWSの権限が適切であること
（任意）AWS CLIがインストールされていること

プロジェクト直下で

npm run build

してください。

エラーが出ず、.outputフォルダ内にpublicとserverの二つのフォルダができていれば多分OKです。

serverディレクトリ内まで移動してserverフォルダ全体をzipファイル化しましょう。
（macじゃない人はコマンド違うと思うので各々で調べたり手動でやるなりしてください。）

cd ./server
zip -r server.zip ./

.output/publicフォルダ内の静的コンテンツを格納するためのS3を作成します。
S3のバケットを作成からデフォルト設定でぽちぽちしていけばOKです。

終わったら手動で.output/publicフォルダをアップロードするか、
下記コマンドでアップロードしてください。

aws s3 sync .output/public s3://{バケット名}

Lambdaの関数の作成からLambdaを作成します。
基本的にデフォルト設定で、

であればOKです。（アーキテクチャはどちらでも良いかもしれませんが念の為）

コードタブの下の方にランタイム設定があるので、ハンドラを指定しましょう。
index.handlerと入力すればOKです。
（各々のパスによって変わるのでindex.mjsがある場所を確認してください。）

同じく設定タブ内の関数URLを設定します。

今回はシンプルにアクセスできれば良いため認証設定はNoneで作成しました。

設定タブ内の環境変数から編集します。
.envファイル内の設定を持ってきましょう。
詳細は割愛します。

ディストリビューションを作成から作成を進めます。

オリジンドメインにLambdaで作成した関数URLを指定する以外はデフォルト設定でOKです。

静的コンテンツを格納したS3にアクセスできるようにオリジン設定を行います。
オリジンタブのオリジンを作成からオリジンドメインに作成したS3を指定します。

S3を指定すると自動でオリジンアクセス項目が表示されるのでOACに変更して今回のS3のための新たなOACを作成して設定してください。

作成後にS3用のポリシーが生成されるので、S3バケットアクセス許可に移動リンクから、S3側に戻ってポリシーを更新しておきましょう。

特定のパスの際にS3内のコンテンツへのアクセスができるようにするため、ビヘイビアで振り分けを作成します。

ビヘイビアを作成から、
/_nuxt/*と/*.*の2パターンのパスのビヘイビアをそれぞれ作成してください。
オリジンとオリジングループの指定はともに静的コンテンツのS3です。

ここまで対応できたら、CloudFrontのドメインにアクセスしてみましょう。
作成したサイトが確認できればOKです！

今回の内容をServerless Frameworkベースで対応したパターンです。
大変参考になりました。