はじめに
SvelteKitで作成したSSR(サーバーサイドレンダリング)のアプリケーションをVercelではなく、AWS上にデプロイしたく、試行錯誤した時の記録をここにメモとして投稿します。
1. SSRの仕組みを調べた。
SSR(サーバーサイドレンダリング)とは、サーバー再度でレンダリング(HTMLを生成)し、レスポンスを返すこと。
AWSでやる場合はlambdaに処理を持たせて、API Gateway経由でHTMLを表示させる。
2. SvelteKitのデプロイ方法を探る
nextjsやnuxtjsと同じようにbuildの形をいい感じに変えることができ、
標準では@sveltejs/adapter-autoというアダプターによりデプロイ用のアウトプットファイルを生成している。
標準の@sveltejs/adapter-autoでは、
- Cloudflare Pages
- Netlify
- Vercel
にはデプロイ可能。
AWSにデプロイするためにはどうしたらいいんだ～～
3. 一回諦めてSPAに妥協した
SPA用のアダプターとして、'@sveltejs/adapter-static'というものがあったので、そちらで試してみる。
yarnインストール
yarn add '@sveltejs/adapter-static'
アダプターを設定
import { adapter } from '@sveltejs/adapter-static'
build実行
yarn build
何かよく分からないエラー再び...
prerenderがなんとかかんとか...
4. prerenderを+layout.tsでtrueにすればよいらしい
[id].svelteではprerenderできないというエラー
prerenderをtrueにすると、事前にレンダリングをしておくことができるというもの。
確かに[id]のようなページでは事前にレンダリングしておくことはできないですね...
(やる方法もありそうでしたが、よくわかりませんでした..)
SPAでデプロイするのは諦めて、SSRに戻ります。
AWS用のアダプターを発見！
https://github.com/MikeBild/sveltekit-adapter-aws
こちらを使ってみる。
- yarn add sveltekit-adapter-aws
- svelte.config.js編集
// svelte.config.js
import { adapter } from 'sveltekit-adapter-aws'
・・・省略
adapter: adapter({
autoDeploy: true,
}),
・・・省略
ビルドの後に自動でデプロイされるようにしました。
結果。。。
CloudFrontでnameエラー。
400エラーで何かの名前に使えない文字があるらしい。。。
なぜ...
この後しばらく放置しました...w
原因 ⇒ 修正 ⇒ 成功！
失敗しているCloudFormationのテンプレートを確認すると、CloudFrontの箇所に違和感が...
・・・省略
'??.png'
・・・省略
ん？なんだこれは
ソースコードを確認すると、
|- static
|- ロゴ.png
これかもしれない...！
ということでロゴ.pngをlogo.pngに変更したところ無事デプロイ完了！ヤッター！