Serverless Frameworkを使わず、Nuxt3でSSR構成（CloudFront + Lambda + S3）をする方法

対象者

• 自分と同じAWS初心者
• 「俺たちは感覚でAWSを触っている」状態の人
• バックエンドなんもわからんけどAWSへのデプロイを控えている人
• Next全盛の今NuxtのSSRで頑張っている人

なぜやろうと思ったか？

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

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

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

前提

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

今回作成する構成

Nuxt側対応

Nuxtのプロジェクトをビルドする

プロジェクト直下で

npm run build

してください。

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

serverをzipファイル化

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

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

AWS側対応

S3（静的コンテンツ）

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

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

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

Lambda

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

• Node.js
  • v20.x
• アーキテクチャ
  • x86_64

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

Lambda：コードソース設定

コードタブ内のコードソースの右側にあるアップロード元指定をzipファイルにし、先ほど作成したserver.zipをアップロードします。

Lambda：ランタイム設定

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

Lambda：一般設定

設定タブ内にある一般設定項目を編集します。
メモリがデフォルトだと少なすぎるので増やしておきましょう。
そのほかの設定はお好みで変更してください。

Lambda：関数URL

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

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

Lambda:環境変数

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

CloudFront

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

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

CloudFront：オリジン設定（S3）

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

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

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

CloudFront：ビヘイビアの作成

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

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

確認

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

参考文献

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