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.1k
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
フロントエンドカンファレンス北海道2024
の登壇資料です。
AijiUejima
August 24, 2024
Tweet
Share
More Decks by AijiUejima
See All by AijiUejima
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
2k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.7k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.5k
Cloudflare Fonts試してみた🔤
aiji42
2
730
Hyperdrive試してみた🛸
aiji42
3
1.3k
Workers Browser Rendering API について
aiji42
0
500
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.4k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
870
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
5.6k
Other Decks in Technology
See All in Technology
RECRUIT TECH CONFERENCE 2025 プレイベント【高橋】
recruitengineers
PRO
0
160
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.4k
Larkご案内資料
customercloud
PRO
0
650
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
620
自動テストの世界に、この5年間で起きたこと
autifyhq
10
8.6k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.3k
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
740
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
220
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
250
プロセス改善による品質向上事例
tomasagi
2
2.6k
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
140
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
Featured
See All Featured
Bash Introduction
62gerente
611
210k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Building an army of robots
kneath
303
45k
RailsConf 2023
tenderlove
29
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Done Done
chrislema
182
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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