Remix, Hono, AWS Lambda, Vite 検討メモ

Cloudflare上にデプロイするためのサンプルコードだったらゆーすけべーさんが公開してくれている。自分はaws-cdkを通じてAWS Lambdaにデプロイしたいのでそのために検討したことをメモっておく。

何にしてもまずはcdk init app -l typescriptでcdkプロジェクトを作っていく。何となくファイル名を整形してファイル名が記載されている箇所の修正。remixアプリはとりあえず同じ階層に作ったlambdaディレクトリに。こんな感じのファイルツリーに。

| -- bin
|       | -- main.ts 
| -- lib
|       | -- stack
|             | -- main.ts    <-- MainStack (全てのリソースを定義するスタック)
| -- lambda
        | -- my-app    <-- remixアプリ

remixのアプリは npx create-remix@latestして生成。shadcn/uiを使えるようにする。ドキュメントが更新されてないみたいだが、まずはこれを参考にtailwindcssを使えるようにする。tailwind.cssの生成はnpx shadcn-ui@latest init実行時にやるのでその前まで。

honoのセットアップは基本的にゆーすけべーさんのレポジトリを参考にする。vite.config.tsはほぼそのまま。productionとdevelopmentの切り替えがうまくいかなかったのでファイルを分けた。dev用(server.dev.ts)は同じように@hono/vite-dev-serverのdevServerを活用。prod用(server.ts)は@hono/node-serverのserveを実行しておき、Dockerfile内でaws-lambda-web-adapterを使用する。ただこれだとbasic認証がうまく動かない。aws-lambda-web-adapterの検証とかち合ってしまうんだけど、自分がよくわかってないだけかも。aws-lambda-web-adapterを使わない解決法があるような気もしなくもない。

CDK部分は特に工夫もない。最低限以下のコードでいける。

const fn = new lambda.DockerImageFunction(this, "fn", {
    code: lambda.DockerImageCode.fromImageAsset(
        path.join(__dirname, "../../lambda/ex_remix_lambda"),
    ),
    functionName: "AAA",
    timeout: cdk.Duration.minutes(10),
});
fn.addFunctionUrl({
    authType: lambda.FunctionUrlAuthType.NONE,
});

検討時のレポジトリはこれ