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
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
Search
AijiUejima
August 24, 2024
Technology
7
5.7k
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
フロントエンドカンファレンス北海道2024
の登壇資料です。
AijiUejima
August 24, 2024
Tweet
Share
More Decks by AijiUejima
See All by AijiUejima
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
7
2.5k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
3k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.7k
Cloudflare Fonts試してみた🔤
aiji42
2
820
Hyperdrive試してみた🛸
aiji42
3
1.4k
Workers Browser Rendering API について
aiji42
0
590
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.6k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
980
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
6.1k
Other Decks in Technology
See All in Technology
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
580
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
270
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
110
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
120
AWSで始める実践Dagster入門
kitagawaz
1
730
Featured
See All Featured
Code Review Best Practice
trishagee
71
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Pragmatic Product Professional
lauravandoore
36
6.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Side Projects
sachag
455
43k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Navigating Team Friction
lara
189
15k
We Have a Design System, Now What?
morganepeng
53
7.8k
Transcript
フロントエンドカンファレンス北海道2024 エッジはフロントンドなのか? バックエンドなのか? について考えてみる
- Aiji Uejima - Webエンジニア(フルスタックにやってます) - 最近はエッジコンピューティング(Cloudflare Workers)で色々構築・開発するのが好き 自己紹介 aiji42_dev
aiji42
会場の皆さんに質問 ? エッジコンピューティングは 「フロントエンド」だと思いますか? それとも「バックエンド」だと思いますか?
アジェンダ 1. エッジとはなにか? 2. エッジの特徴 3. エッジをフロントエンド側からみてみる 4. エッジをバックエンド側からみてみる 5.
領域の定義 6. まとめ
What is the edge? 1. エッジとはなにか?
エッジと聞くと何を思い浮かべますか? 「CDNロケーションのエッジコンピューティング」を思い浮かべる人が多いはず。 (フロントエンドカンファレンスだし)
CDNロケーションのエッジコンピューティング CDNデータセンター上のコンピュータでクライアントとオリジンとの間で計算を行う。 WAFや高速化などの目的から始まり、徐々に用途がフルスタック化しつつある。 地球レベルで見たときにクライアント側(端)に配置されているのでエッジ。
CDNロケーションのエッジコンピューティング 今日はこの話をメインにするが... これらが登場する以前から「エッジ」と呼ばれるものは存在していた。 なので特段「新しいもの」「新しい概念」というわけではない。
IoTのエッジサーバー デバイスと中央サーバとの間に小規模サーバを挟んで処理したり、デバイス自身が 計算リソースを持つことで、遅延対策やネットワーク負荷軽減の役割を果たす。 デバイス側(端)にあるサーバーなのでエッジ。
店舗の在庫・売上を分散管理するシステム 各店舗内に小規模なサーバを配置し、ローカルのネットワーク内で処理することで 各店舗のレジシステムが完結するようにする。 店舗側(端)で処理するのでエッジ。
概念自体は古くから存在していた エンドユーザの近くに計算リソースを分散させることで、 中央サーバーの負荷や遅延の低減を行うものを、 一般に「エッジ(コンピューティング)」と呼ぶ。 概念自体は新しい訳では無いが... 「CDNのエッジコンピューティング」は、 Web開発の場面で、最近少しずつ注目されるようになってきた。
なぜ注目され始めたのか? - Core Web Vitals のためにパフォーマンス改善の重要性が増した - キャッシュコントロールや画像最適化など - 言語・インタフェースの選択肢が増えた
- Fastly の VLC(Varnish) は習得難易度が高かった - JavaScriptで書けるベンダーが出始め、一気に敷居が下がった - 対応したライブラリやノウハウの普及により、フルスタック化
Edge features 2. エッジの特徴
ベンダー 名称 言語/エンジン Cloudflare Cloudflare Workers JavaScript/V8 Fastly Fastly Compute@Edge
Wasm/Wasmtime Vercel Vercel Functions JavaScript/V8 Akamai Akamai EdgeWorkers JavaScript/V8 各ベンダーの採用言語とエンジン
ベンダー 名称 言語/エンジン Cloudflare Cloudflare Workers JavaScript/V8 Fastly Fastly Compute@Edge
Wasm/Wasmtime Vercel Vercel Functions JavaScript/V8 Akamai Akamai EdgeWorkers JavaScript/V8 V8エンジンを採用しているベンダーが多い 各ベンダーの採用言語とエンジン
エッジとV8 V8エンジンのIsolate Modeが使用されることが多い。 一つのランタイムプロセス上でサンドボックスを立ち上げ、ユーザコードを実行。 VMベースと比較してスピンアップが速い。(従来のサーバレスと異なる点) Node.jsもV8の上に構築されているが、サンドボックスは組み込まれていない。 出典: Cloud Computing without
Containers https://blog.cloudflare.com/cloud-computing-without-containers
Looking at the edge from the frontend 3. フロントエンド側から見てみる ※
以降、 Cloudflare Wokers を前提に話します。
ブラウザ上のService Worker Webページとは別にバックグラウンドで実行するクライアントスクリプト。 Req/Resに介入して内容を変更したり、オリジンへリクエストすることなく CacheAPIを使ってレスポンスを返えしたりする。
エッジもある種のService Worker Service Workerと同じIFでWeb標準APIが動くように設計されている。 例えばCacheAPI や `waitUntil()` などが実行可能で、 Req/Resに介入し、スクリプトを実行することでプロキシの役割を持たせられる。 エッジ
= リモートで動くService Workerと考えることができる。
エッジもある種のService Worker Service Workerと同じIFでWeb標準APIが動くように設計されている。 互換性があるので、逆にエッジ用に書いたコードがブラウザでも実行可能。 リモートでブラウザをもう一つ動かしている感覚に近い
エッジはフロントエンドだ(?) - Chromeと同じV8エンジンの上で実行される - JSが動いてWeb標準APIが利用可能 - Service Workerと同じ機能を備えている エッジ ≒
ブラウザと考えることができるということは、 「エッジはフロントエンドだ」といって良さそう。
Looking at the edge from the backend 4. バックエンド側から見てみる
ブラウザでは動かない実装が動く Node.jsのAPIに関しては互換性がある。(node compat) グローバルリソースに対しての、TCP Socket接続が可能。
as Origin (Origin less) エッジランタイムをサポートするライブラリが増加傾向で、 SSRやRSCのためのフルスタックな環境として稼働させたり、 BFFをエッジで稼働させるなどの潮流が活発化してきている。 これまでのオリジンサーバの代替となりつつある。 Supporting edge
runtime
フルスタックなWebサーバーの代わりになる。 従来のオリジンサーバーの役目を果たせる。 「エッジはバックエンドだ」と言えるのでは? エッジはバックエンドだ(?) そもそも、フロントエンド=ブラウザ・クライアントと仮に限定するのであれば、 ブラウザ外(サーバ)で動いているエッジはバックエンドだと言えそう。
フルスタックなWebサーバーの代わりになる。 従来のオリジンサーバーの役目を果たせる。 「エッジはバックエンドだ」と言えるのでは? エッジはバックエンドだ(?) そもそも、フロントエンド=ブラウザ・クライアントと仮に限定するのであれば、 ブラウザ外(サーバ)で動いているエッジはバックエンドだと言えそう。 本当にそう言い切れるか?
フロントエンド=ブラウザ・クライアント? 実際はそんなに簡単に分けれるものではなさそう。 - ReactのServer Actions や Server Component はバックエンドか? -
Next.js や Remix の SSR はバックエンドか? - BFFを開発するのはバックエンドエンジニアの役割か? - キャッシュコントロールやコンテンツ配信の計画は誰が責任を持つべきか?
Definition of frontend and backaend 5. 領域の定義
境界線はどこか? フロントエンドとバックエンドの境界線はどこにあるのか?
フロントエンドとバックエンドで分け始めたのは2010年代前半 我々は、いつから役割を区分し始めたのか Google Books Ngram Viewerによるキーワード出現率の可視化 2010年
フロントエンドとバックエンドで分け始めたのは2010年代前半 - AJAXなどの技術の登場によるクライアントの表現力の向上と浸透 - アプリ対応・モバイル対応の必要性の増加 - SPA技術・ライブラリの発達 「フロントエンドはクライアント」「バックエンドはサーバ」と比較的分けやすかった。 我々は、いつから役割を区分し始めたのか
求められることの多様化 フロントエンド=ブラウザ・クライアントだけ ではないのは明白。 フロントエンドエンジニアの業務はブラウザ・クライアントの技術だけでは回らない。 フロントエンドとバックエンドで分けるようになってからおおよそ10年。 フロントエンドのニーズは多様化している。 - SSR/RSC (w/ data
loader) - キャッシュコントロール/コンテンツ配信の設計 - パフォーマンス改善 Reactを始めとした各種ライブラリはサーバサイド側の理解を暗黙的に求め、 GoogleはCWVを通じてブラウザに限らないスキルを求めている。
明確な境界線はない 境界線という概念で捉えるのは実態に即していない。
明確な境界線はない 境界線という概念で捉えるのは実態に即していない。 クロスオーバーしていると考える方が適している。 あるのは「バックエンド寄り」「フロントエンド寄り」という相対的な位置関係。
フロントエンド・バックエンドどちらかに限定することはできない。 ある意味、リモートでブラウザを動かしているようなもの。 フロントエンド・バックエンド間のコンテキストスイッチのためのコストが少なくて済み、 領域を分かつものではなく、架け橋になるものである。 エッジに話を戻すと フロントエンドの技術を使ったバックエンドである 出典: エッジは誰のもの? | ゆーすけべー日記
https://yusukebe.com/posts/2024/who-is-edge-for/
Conclusion 6. まとめ
エッジはフロントエンドとバックエンド両方の側面を持つ まとめ フロントエンド側面 - V8エンジンの上でJSでWeb標準なAPIを実行できるランタイム - Service Worker的な振る舞いを持つ バックエンド側面 -
Node.jsのAPIが実行可能で外部ともTCPで接続可能と、フルスタック - Origin as EdgeとしてWebサーバーの代替になりつつある フロントエンジニア、バックエンドエンジニア両方との親和性が高く、 言語やIFが統一されるので、スイッチングコストが少なく領域越境がしやすい。
まとめ フロントエンドとバックエンドには明確な境界線はない あるのは、「フロントエンド寄り」「バックエンド寄り」の相対的な位置関係。 複雑で多様なスキル・知識が求められる昨今、積極的に領域越境をしていきましょう。 最後に 「サーバサイドに苦手意識がある」 「普段クライアントコードしか書かない」というフロントエンドエンジニアの方、 「バックとフロントのスイッチングコストを下げたい」というフルスタックエンジニアの方は、 是非、エッジコンピューティングを触ってみてください!
Thank you!
参考・出典 - エッジコンピューティングとは? IoTの活用事例も解説 https://www.nec-solutioninnovators.co.jp/sp/contents/column/20220225_edge-computing.html - Containers at Edge and
the future https://speakerdeck.com/inductor/containers-at-edge-and-the-future - ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう https://speakerdeck.com/aiji42/biginaxiang-ke-etuzirantaimunosusume-etuzirantaimuwoyi-shi-sitakai-fa-wohazime you - エッジは誰のもの https://yusukebe.com/posts/2024/who-is-edge-for/ - Cloud Computing without Containers https://blog.cloudflare.com/cloud-computing-without-containers - サーバーレスJavaScriptの仕組みとは?| Service WorkersとCloudflare Workers https://www.cloudflare.com/ja-jp/learning/serverless/serverless-javascript/ - Cloudflare Workersプロキシパターン https://zenn.dev/yusukebe/articles/647aa9ba8c1550 - GraphQL Server on Edge https://speakerdeck.com/chimame/graphql-server-on-edge