Slide 1

Slide 1 text

CloudFront OAC × AWS Lambda Function URLs で作る認証付き簡易サイト 2026/02/20 TECH BATON in 東京 LT 髙橋俊⼀ a.k.a. shuntaka 1

Slide 2

Slide 2 text

⾃⼰紹介 2 shuntaka/髙橋俊⼀ 🧳 TypeScript/AWS/Backend/RAG ❤ Neovim, Nix, CLI⾃作 📝 ⾦融情報ベンダー → クラスメソッド 製造ビジネステクノロジー部 最近はtmuxのセッション管理ツールをTAURI 作っています。Apple Developerになりまし た。(- ¥12800) shuntaka.dev/who @shuntaka_jp

Slide 3

Slide 3 text

ぼくとLambda 3 個⼈ブログ(shuntaka.dev)をLambdaで6年くらい運⽤しています! 旧構成 (ver 2020) 新構成 (ver2026) 詳しくは https://shuntaka.dev/shuntaka/articles/20260108-shuntaka-blog-rearchitecture

Slide 4

Slide 4 text

ブログ 4 https://github.com/shuntaka9576/shuntaka-dev Rustのビルドが重くSelf-Hosted Runner(Mac mini)を利⽤中...

Slide 5

Slide 5 text

マイクロフロントエンド ‧業務SaaS ‧複数の会社で構築(メイン画⾯, 管理画⾯, etc..) ‧会社、ドメイン領域によって技術スタッ クが異なる... ‧管理画⾯はReact、メイン画⾯はPure JavaScriptなど並列に開発出来るようにす るため 5

Slide 6

Slide 6 text

ヘルプサイトを作りたい お客さん向けのマニュアルを表⽰するだ けでいいとのこと ‧静的サイトでいいかな?🧐 DocusaurusとかSphinxが良さそう? ‧ただ他の画⾯同様に同じ認証情報で⾒ たい(外に⾒せる必要はない, no-indexも 微妙)ということだった... 6

Slide 7

Slide 7 text

アセットにも保護がかけられるので筋良 さそう...🧐 ‧前段にLambda@Edgeをおく ‧JWTを検証して問題なければ、静的サ イトを返却。 ‧前段のLambda@EdgeでJWTを検証 し、未認証なら/auth へリダイレクト ‧img, videoを含む全静的アセットをCDN 層で保護 → 現構成がlocalStorage + JWTだったの で後述のOAC⽅式を選んだ 7 cookieの場合

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

おしまい ありがとうございました! 9