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.6k
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
フロントエンドカンファレンス北海道2024
の登壇資料です。
AijiUejima
August 24, 2024
Tweet
Share
More Decks by AijiUejima
See All by AijiUejima
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
7
2.4k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
3k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.7k
Cloudflare Fonts試してみた🔤
aiji42
2
800
Hyperdrive試してみた🛸
aiji42
3
1.4k
Workers Browser Rendering API について
aiji42
0
560
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.6k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
960
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
6k
Other Decks in Technology
See All in Technology
Kiro Hookを Terraformで検証
ao_inoue
0
130
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
210
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
4
1.7k
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
190
OpenTelemetry の Log を使いこなそう
biwashi
5
1.1k
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
600
ユーザー理解の爆速化とPdMの価値
kakehashi
PRO
1
110
生成AIを活用した野球データ分析 - メジャーリーグ編 / Baseball Analytics for Gen AI
shinyorke
PRO
1
200
Kiroから考える AIコーディングツールの潮流
s4yuba
0
160
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
nyagasan
0
160
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
260
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
1
430
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
How GitHub (no longer) Works
holman
314
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Producing Creativity
orderedlist
PRO
346
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Unsuck your backbone
ammeep
671
58k
Building an army of robots
kneath
306
45k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Speed Design
sergeychernyshev
32
1k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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