SSRなSvelteKitアプリケーションのAWS Amplifyデプロイ

written by naoketa(Naoki Tazawa)

はじめに

• SvelteJapanOnlineMeetup#2でWebフロントエンドのモニタリングをテーマに登壇したので、登壇の背景等のメモ第二弾になります。
• 本記事では特にその中でもAmplify上のSSRなSvelteKitを構築しつて稼働させてみた所感について、発表で触れられなかった内容含めて記載しておきます。

発表資料/動画

• 資料

  • https://speakerdeck.com/naoketa/sveltejapanonlinemeetup-number-2-naoketa

• 動画

  • https://www.youtube.com/watch?v=ph617ip9Nbo

AWS AmplifyでのSSR機能をSvelteKitで試す。

• また個人ツール開発で最近よくSvelte(& SvelteKit)を触って気に入っているのですが、よく使うAWS上でSSRを行うシステム構成を考えると色々と不便なケースが多く感じていました。
  • Lamnbdaで組むと時々性能が安定しない時がある。(LambdaのJSランタイムのLLRTが合わない？？）
  • ECS/EC2で組むと個人ツールにしてはコストが高い&メンテコストが高い
• そんな中、昨年11月にAWS AmplifyがNext.js以外のSSRなJSフレームワークのSSRをサポートするような発表がありました。そこで、SSRするSvelte(& SvelteKit)のwebアプリケーションで実際にAmplify上に構築してみるという後者のテーマにつながります。
  • https://aws.amazon.com/jp/about-aws/whats-new/2023/11/aws-amplify-hosting-ssr-additional-frameworks/

テーマ自体の所感など

• 上記テーマの結果自体は資料記載の通りですが、Amplifyや今回利用したAWSサービス自体の利用してサービス提供してみた所感としては以下になります。
  • SSRで動かすAmplifyの性能や安定性が未知数（もう少し動かして見て見て見たい）
    • Next.jsのみサポートされていた、旧バージョンのAmplifyランタイムでは、公式ドキュメント内で明示的に内部的にはCloudFront + Lambda@Edge + S3の構成として記載されており、実際にコンソール上から確認もできるのですが、新バージョンのAmplifyではSSRとして起動している構成の中身が何なのかは確認できないようです。
    • 出力されたCloudWatch Logs上、2024年3月現在の私の環境ではLambdaランタイムがそのまま動いていそうなログが出ていますが、こちらはAWS側で今後も変更が入りそうです。（前述の通りLLRTのランタイムなので、いわゆるNode.jsランタイムな環境とそのまま一致するわけではない点も注意が必要です。）
    • またブラックボックスかつラップされてしまっているので、Amplifyが提供するCloudFrontの後段でLambda@Edgeを噛ませたい要件があったのですが、Amplifyとしては対応していないため、さらに前段に自前CloudFront+Lambda@Edgeを挟んで、当初のAmplifyに繋げるなどの、複雑な構成になってしまいます。
    • ライトなユースケースではAmplify側でよしなにプロビジョニング含めてやってもらえるのは楽ではあるのですが、ブラックボックスすぎてチューニングも何もあったものではないというトレードオフがついて回るので、ユースケース自体で選定を考える必要があります。

さいごに

• その他、SvelteJapanOnlineMeetupに参加させていただき、貴重な場をご提供いただき運営の方、他の登壇者の方には本当に感謝です。ありがとうございました。