CloudFront OAC × Lambda Function URLs で作る認証付き簡易サイト / Simple Authenticated Website Built with CloudFront OAC and Lambda Function URLs

Transcript

1. CloudFront OAC × AWS Lambda Function URLs で作る認証付き簡易サイト 2026/02/20 TECH BATON in 東京 LT 髙橋俊⼀ a.k.a. shuntaka 1
2. ⾃⼰紹介 2 shuntaka/髙橋俊⼀ 🧳 TypeScript/AWS/Backend/RAG ❤ Neovim, Nix, CLI⾃作 📝 ⾦融情報ベンダー → クラスメソッド 製造ビジネステクノロジー部 最近はtmuxのセッション管理ツールをTAURI 作っています。Apple Developerになりまし た。(- ¥12800) shuntaka.dev/who @shuntaka_jp
3. ぼくとLambda 3 個⼈ブログ(shuntaka.dev)をLambdaで6年くらい運⽤しています！ 旧構成 (ver 2020) 新構成 (ver2026) 詳しくは https://shuntaka.dev/shuntaka/articles/20260108-shuntaka-blog-rearchitecture
4. ブログ 4 https://github.com/shuntaka9576/shuntaka-dev Rustのビルドが重くSelf-Hosted Runner(Mac mini)を利⽤中...
5. マイクロフロントエンド ‧業務SaaS ‧複数の会社で構築(メイン画⾯, 管理画⾯, etc..) ‧会社、ドメイン領域によって技術スタッ クが異なる... ‧管理画⾯はReact、メイン画⾯はPure JavaScriptなど並列に開発出来るようにす るため 5
6. ヘルプサイトを作りたい お客さん向けのマニュアルを表⽰するだ けでいいとのこと ‧静的サイトでいいかな？🧐 DocusaurusとかSphinxが良さそう？ ‧ただ他の画⾯同様に同じ認証情報で⾒ たい(外に⾒せる必要はない, no-indexも 微妙)ということだった... 6
7. アセットにも保護がかけられるので筋良 さそう...🧐 ‧前段にLambda@Edgeをおく ‧JWTを検証して問題なければ、静的サ イトを返却。 ‧前段のLambda@EdgeでJWTを検証 し、未認証なら/auth へリダイレクト ‧img, videoを含む全静的アセットをCDN 層で保護 → 現構成がlocalStorage + JWTだったの で後述のOAC⽅式を選んだ 7 cookieの場合
8. CloudFront + Lambda Functions URLsへのOAC ‧現構成がlocal storage、JWT構成。SPAを別途⽤意 し、関数URLでヘルプコンテンツを保護 ‧IAM認証(AWS_IAM)とリソースポリシーにより、 CloudFront経由でしかアクセスできない ‧GET/HEADはそのまま、POST/PUTは x-amz-content-sha256ヘッダーが必要(今回は不要) Lambda@Edegeなどで対応可 ‧画像は推測困難なパスで保護（公開素材のため完全 保護は割り切り） ‧ Authorization Bearerヘッダーで /help/apiに送信 するとOAC署名と競合するため業務JWTは別ヘッダー に分離 8
9. おしまい ありがとうございました！ 9