CloudFront OAC × Lambda Function URLs で作る認証付き簡易サイト / Simple Authenticated Website Built with CloudFront OAC and Lambda Function URLs
by
shuntaka
×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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