Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Plug & WAF
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
ohr486
February 27, 2022
Programming
550
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Plug & WAF
https://beam-lang.connpass.com/event/240399/
ohr486
February 27, 2022
More Decks by ohr486
See All by ohr486
負荷試験Night#1 負荷試験2023年トレンド
ohr486
17
4.9k
Elixir/PhoenixによるWeb開発の現場から
ohr486
1
650
Hacking Phoenix Performance
ohr486
1
410
elixirをプロダクションに導入する
ohr486
1
730
IEx maniacs
ohr486
4
660
Hack and Read Elixir
ohr486
2
810
Running App on AppRunner
ohr486
0
860
sponsor-talk-drecom-heisei-ruby-kaigi
ohr486
0
910
ex-app-on-k8s
ohr486
0
270
Other Decks in Programming
See All in Programming
Vue × Nuxt × Oxc どこまで使える?実運用の現在地
andpad
0
170
Oxlintのカスタムルールの現況
syumai
6
1.1k
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
2
880
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.6k
Swiftのレキシカルスコープ管理
kntkymt
0
220
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
230
AIとASP.NET Coreで雑Webアプリを作った話
mayuki
0
500
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
240
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
shogogg
0
210
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
j_lee
0
110
「エンジニアインターン、どうやって取った?」準備のリアルを語るLT会 Progate BAR
akiomatic
0
130
スマートグラスで並列バイブコーディング
hyshu
0
120
Featured
See All Featured
Tell your own story through comics
letsgokoyo
1
950
Designing for Timeless Needs
cassininazir
1
250
Optimising Largest Contentful Paint
csswizardry
37
3.7k
What does AI have to do with Human Rights?
axbom
PRO
1
2.2k
GitHub's CSS Performance
jonrohan
1033
470k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
390
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.5k
For a Future-Friendly Web
brad_frost
183
10k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
180
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
The Cult of Friendly URLs
andyhume
79
6.9k
Transcript
Plug & WAF 2022-02-27 tokyo.ex #16
agenda • About Me • ゴール • WAFとは何か • Webアプリ(MVC)の構造
• 何故Plugが必要なのか • Plugの構造 • Plugのインターフェース • Plugのデータフロー • DEMO • まとめ
About Me • おーはら / Twitter: @ohrdev / Github: ohr486
• 株式会社ドリコム SRE部 部長 ◦ Work: ▪ エンジニアマネージャ • 技術戦略の策定/推進 • エンジニア採用/採用戦略策定 ▪ サーバー/インフラエンジニア • 開発現場でゲームのバックエンド (Rails/Phoenix/Go/HCL)のコード書いてます ▪ 新規事業/ディレクター • 負荷試験支援/DevOps推進支援/設計コンサル • Community ◦ tokyo.ex / Japan Elixir Association / Erlang&Elixir Fest • Hobby ◦ 仏像制作 ◦ 自転車
ゴール • ターゲット ◦ Plugが何をしているか理解したい人 ◦ 何故Plugがあるかを理解したい人 ◦ PhoenixとPlugの関係について理解したい人 •
ゴール ◦ (Phoenixを含む)WAFの構造について理解する ◦ Plugの構造について理解する ◦ PhoenixとPlugの関係について理解する
WAFとは何か • WAF = Web Application Framework ◦ elixir ->
phoenix ◦ ruby -> rails ◦ python -> django • Webアプリを作るためのフレームワーク ◦ webアプリとは? ▪ インターネット/ネットワークを介して利用するアプリケーション ▪ ここでは、webブラウザ上で動作するという前提で進めます ◦ ex) wiki, blog, 掲示板, ECサイト, etc
Webアプリ(MVC)の構造 Webサーバー Webアプリ データベース Nginx Apache Cowboy etc プロトコル HTTP
WebSocket Phoenix Rails Django etc MySQL PostgreSQL Spanner etc DB I/F Ecto ActiveRecord etc WAF I/F Plug Rack WSGI etc cowboy Plug Phoenix Endpoint Router Pipeline Controller View Template Ecto DB View Controller Model
何故Plugが必要なのか • 歴史的背景 ◦ WAFの乱立とWebサーバーの多様化により、 WAFとWebサーバーの接続部分の組み合わせ爆発 が発生し、全ての接続を網羅するのが難しくなった ◦ この問題を解決する為、 WAFとWebサーバーの統一的な
I/Fを定めた仕様が策定された ◦ WAF,Webサーバー共に、この I/Fに対応すればどの組み合わせの接続も担保できる WAF1 WAF2 WAF3 フレームワーク Webサーバー Apache nginx lighttpd … … WAF1 WAF2 WAF3 フレームワーク Webサーバー Apache nginx lighttpd 共通のI/F Phoenix cowboy Plug Rails nginx Rack
Plugの構造 cowboy Plug(I/F) Phoenix Endpoint Router Pipeline Controller View Template
HTTPコネクションのリク エスト/レスポンスを抽象 化した構造体 %Plug.Conn %Plug.Conn Plug %Plug.Conn HTTP Request HTTP Response Plug Plug Plug Plug PhoenixではPlugとして実 装されている Plug Plug Conn Conn’ Conn’’ Plugとは Connを受け取り、Connの内 部情報を更新して返却するモ ジュール/関数 pipeline
Plugのインターフェース • Plugは以下の2つに分類される ◦ Function Plugs ◦ Module Plugs ◦
これらのPlugはplugマクロを使って、コントローラー層/Routerに差し込まれる ▪ https://github.com/ohr486/tokyoex_16_sample/blob/main/plug_sample/lib/plug_sample/router.ex#L8-L12 • Function Plugs ◦ Plug.Connとオプションを引数にとり、Plug.Connを返却する関数 ▪ (Plug.Conn.t, Plug.opts) :: Plug.Conn.t ◦ https://github.com/ohr486/tokyoex_16_sample/blob/main/plug_sample/lib/plug_sample/router.ex#L31 • Module Plugs ◦ 以下の2つの関数をexportするモジュール ▪ init/1 : 引数のオプションを使って自身を初期化する関数、 コンパイル時に実行される ▪ call/2 : Plug.Connとオプションを引数にとり、Plug.Connの内部情報を更新して返却する関数 ◦ https://github.com/ohr486/tokyoex_16_sample/blob/main/plug_sample/lib/plug_sample/module_plug.ex
Plugのデータフロー Func Plug Module Plug Conn Conn’ Conn’’ HTTP Request
HTTP Response func_plug(conn, opts) ModulePlug.call(conn’, opts) ModulePlug.init(opts) compile時に呼出 defmodule MyAppMod.Router do use Plug.Router … plug :func_plug plug ModulePlug … end Plug.Routerによる定義 plugを通過する際に呼出 plugを通過する際に呼出
DEMO サンプルコード https://github.com/ohr486/tokyoex_16_sample/tree/main/plug_sample
まとめ • WAFとPlugの構造について紹介しました • 何故Plugが必要なのかについて紹介しました • PhoenixのRoutingやHTTP層の実装のCodeReadingをする際、%Plug.Connの データ構造を追っていくと理解しやすいです • 独自実装のカスタムPlugは簡単に作成できます、PlugはHTTPリクエスト/レスポン
スのデータ構造をダイレクトに操作できるので非常に強力で有用です