CloudFront OAC × Lambda Function URLs で作る認証付き簡易サイト / Simple Authenticated Website Built with CloudFront OAC and Lambda Function URLs
by
shuntaka
×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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