PHPをブラウザで動かす技術

PHPerKaigi2023で登壇しました。

https://fortee.jp/phperkaigi-2023/proposal/de0c3936-8780-487b-a9ce-92a8b90da480

WebAssemblyを使ったブラウザで動作させる方法についての解説をしました。
今回の発表を通してデモサイトも作りました。
https://php-play.dev

Transcript

1. © 2012-2023 BASE, Inc. 1 PHPerKaigi 2023 BASE株式会社 永野 峻輔 ( @glassmonekey ) PHPをブラウザで動かす技術
2. © 2012-2023 BASE, Inc. 2 @glassmonekey #phperkaigi このトークの目的 • WebAssembly (Wasm) の基本的な理解 • PHPをブラウザ動かすための仕組みを理解
3. © 2012-2023 BASE, Inc. 3 @glassmonekey #phperkaigi 自己紹介 所属 BASE 株式会社 BASE BANKチーム Engineering Program Manager 資金調達プロダクト「YELL BANK」の開発責任者やってます。 Go, PHP, Pythonを書きつつ時々データエンジニアも。 趣味 個人開発 最近は日帰り温泉とかも　　 SNS Twitter： @glassmonekey　 Github： https://github.com/glassmonkey 永野 峻輔 (ながの しゅんすけ） 去年のPHP Conferenceにて
4. © 2012-2023 BASE, Inc. 4 1 2 3 @glassmonekey #phperkaigi Wasmとは ブラウザでPHPを動作するデモ PHPを動作させるための技術について 今日話すこと
5. © 2012-2023 BASE, Inc. 5 Wasm とは
6. © 2012-2023 BASE, Inc. 6 @glassmonekey #phperkaigi Wasmとは Webブラウザを含む実行環境で コード実行とコンパクトなコード表現を実現するバイナリ形式 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
7. © 2012-2023 BASE, Inc. 7 @glassmonekey #phperkaigi 対応状況 https://developer.mozilla.org/ja/docs/WebAssembly モダンな環境なら基本動く
8. © 2012-2023 BASE, Inc. 8 @glassmonekey #phperkaigi 例 (webassembly.sh) Linuxを模倣したもの https://webassembly.sh
9. © 2012-2023 BASE, Inc. 9 なぜ Wasm なのか
10. © 2012-2023 BASE, Inc. 10 @glassmonekey #phperkaigi Webアプリのリッチ化
11. © 2012-2023 BASE, Inc. 11 @glassmonekey #phperkaigi JavaScriptだけだと辛い • ブラウザゲーム(特に3D) • AR/VR • 画像処理 … etc
12. © 2012-2023 BASE, Inc. 12 @glassmonekey #phperkaigi JavaScript + Wasm WebAssembly: How and why https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/ WASMはJSの一部の代替え
13. © 2012-2023 BASE, Inc. 13 @glassmonekey #phperkaigi 導入事例から見るWasm https://madewithwebassembly.com/
14. © 2012-2023 BASE, Inc. 14 @glassmonekey #phperkaigi Figma • パフォーマンス向上 (約3倍） • もともとはasm.js (C++からコンパイルしたJS)をつかっていた https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/
15. © 2012-2023 BASE, Inc. 15 @glassmonekey #phperkaigi 1Password • 入力解析部分で主な改善 • Chromeで最大13倍、Firefoxだと39倍　 https://blog.1password.com/1password-x-may-2019-update/
16. © 2012-2023 BASE, Inc. 16 @glassmonekey #phperkaigi TensorFlow • パフォーマンス向上(約10倍） • 機械学習のようなCPUなどのリソースを酷使する場合とは相性が良い https://yashints.dev/blog/2019/12/17/tfjs-wasm
17. © 2012-2023 BASE, Inc. 17 Wasmの特徴
18. © 2012-2023 BASE, Inc. 18 @glassmonekey #phperkaigi Web Assemblyとは（2回目） Webブラウザを含む実行環境で コード実行とコンパクトなコード表現を実現するバイナリ形式 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
19. © 2012-2023 BASE, Inc. 19 @glassmonekey #phperkaigi Wasmの特徴 • 移植性 ◦ 任意の言語でWebAssemblyにbuildできたら良い • セキュア ◦ Runtimeが隔離（Sandbox化）されているのでセキュア WASM Host System WASI API WASM Runtime
20. © 2012-2023 BASE, Inc. 20 @glassmonekey #phperkaigi Wasmと仕様 • 基本仕様 ◦ WASM-Core • ブラウザ用仕様 ◦ WASM Web API ◦ WASM JS API • ブラウザ外仕様 ◦ WASI (Web Assembly System Interface) https://webassembly.org/specs/ それぞれ別物！！
21. © 2012-2023 BASE, Inc. 21 @glassmonekey #phperkaigi WASI(Web Assembly System Interface) 任意のシステムで呼び出すための仕様 • 汎用的なランタイムとして活用 ◦ ex) Wasmer, Wasmtime, Cranelift, WAMR • Edgeコンピューティングでの活用 ◦ ex) CloudflareWorkers (Cloudflare), Compute@Edge (Fastly) • K8sでの活用 ◦ ex) proxy-wasm 詳しくは https://bytecodealliance.org/ WASM Host System WASI API WASM Runtime
22. © 2012-2023 BASE, Inc. 22 PHPをブラウザで動かす
23. © 2012-2023 BASE, Inc. 23 @glassmonekey #phperkaigi デモ (https://php-play.dev) デモページ
24. © 2012-2023 BASE, Inc. 24 @glassmonekey #phperkaigi デモのスペック https://php-play.dev • リアルタイムPHP Playground • React製 • Github Pagesでhosting • PHP 5.6 ~ 8.2のWasmを切り替え可能に • Wordpress/playground から ビルドスクリプトなどをvendoringしている
25. © 2012-2023 BASE, Inc. 25 @glassmonekey #phperkaigi Wordpress/Playground https://developer.wordpress.org/playground/ • WordpressをWasmで動くようにしたもの。 • Iframeで展開される • サービスワーカーがリクエストをインターセプト • npmパッケージが公開されるらしい ?
26. © 2012-2023 BASE, Inc. 26 @glassmonekey #phperkaigi コード抜粋
27. © 2012-2023 BASE, Inc. 27 @glassmonekey #phperkaigi 動作内容（一部抜粋） • initPHPでWasmモジュールを準備 • runPHPで任意のPHPコードを 実行できるように • startPHPなどはWordpress/playground からvendoringしたもの
28. © 2012-2023 BASE, Inc. 28 @glassmonekey #phperkaigi 動作内容イメージ（プレビュー部分） • usePHPで任意のPHPコードを実行 • 結果をiframeで展開 ◦ sandbox属性でXSS対策
29. © 2012-2023 BASE, Inc. 29 @glassmonekey #phperkaigi 動作内容イメージ（カスタムHook） • PHPコードの状態管理 ◦ 選択中のＰＨＰランタイム ◦ プレビュー用のコード ◦ プレビュー結果 ◦ 実行中か • startPHPでPHPRuntimeのバージョン選択 • runPHPで任意のPHPコードの実行 ◦ 例えば<? phpinfo(); のようなコード
30. © 2012-2023 BASE, Inc. 30 @glassmonekey #phperkaigi その他秘話について https://zenn.dev/glassmonkey/articles/ae6cadef80c6c4
31. © 2012-2023 BASE, Inc. 31 @glassmonekey #phperkaigi 再掲 https://php-play.dev
32. © 2012-2023 BASE, Inc. 32 @glassmonekey #phperkaigi GitHub Pagesで動くPHP!!
33. © 2012-2023 BASE, Inc. 33 PHPをブラウザで呼び出す技術
34. © 2012-2023 BASE, Inc. 34 @glassmonekey #phperkaigi PHPをブラウザで呼び出すためには • PHPをWasm用にコンパイル • WasmをJavaScriptから呼び出す
35. © 2012-2023 BASE, Inc. 35 @glassmonekey #phperkaigi PHPをブラウザで呼び出すためには • PHPをWasm用にコンパイル • WasmをJavaScriptから呼び出す
36. © 2012-2023 BASE, Inc. 36 @glassmonekey #phperkaigi PHPは何言語でかれているか?
37. © 2012-2023 BASE, Inc. 37 @glassmonekey #phperkaigi C言語
38. © 2012-2023 BASE, Inc. 38 @glassmonekey #phperkaigi コンパイルの方針 • 基本的にはPHPのソースを流用する • 一部Wasm用に書き換える • C言語のコンパイラを利用する
39. © 2012-2023 BASE, Inc. 39 @glassmonekey #phperkaigi emscripten https://emscripten.org/ • C/C++をWasmにコンパイルできる • ブラウザなどのRuntimeで実行可能にする • LLVM/Clangベースのコンパイラ
40. © 2012-2023 BASE, Inc. 40 @glassmonekey #phperkaigi emscriptenの利用例(C++) • C++で書いたのでC++かCかどうかの 判定マクロが必要 • 今回の例では以下の関数を Wasmへの変換時にexport ◦ main関数 ◦ EMSCRIPTEN_KEEPALIVE でアノテーションした関数 https://github.com/glassmonkey/wasm-sample-cpp https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm
41. © 2012-2023 BASE, Inc. 41 @glassmonekey #phperkaigi emscriptenの利用例 (呼び出し) • グルーコードも同時に生成される • Wasmロード時にmain関数が実行完了しても Runtimeが終了しないように • ccallというメソッドで呼び出し可能に • exportした関数の呼び出し https://github.com/glassmonkey/wasm-sample-cpp https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm JSからの呼び出し コンパイル
42. © 2012-2023 BASE, Inc. 42 @glassmonekey #phperkaigi 準備は整った
43. © 2012-2023 BASE, Inc. 43 @glassmonekey #phperkaigi PHPをWasm用にコンパイル
44. © 2012-2023 BASE, Inc. 44 @glassmonekey #phperkaigi PHPをWasm用にコンパイル = エントリーポイントの作成 + Patchを当てる
45. © 2012-2023 BASE, Inc. 45 @glassmonekey #phperkaigi エントリーポイントの作成 • PHP本体を呼びつつ、JSから呼び出せるよう にしている • zend_eval_stringを呼び出している。
46. © 2012-2023 BASE, Inc. 46 @glassmonekey #phperkaigi Patchを当てる例(その1) 常にPDOをbuildに含めるようにしたり
47. © 2012-2023 BASE, Inc. 47 @glassmonekey #phperkaigi Patchを当てる例(その1) 空ファイルをfile_get_contentsでJS経由で 可能にしたり
48. © 2012-2023 BASE, Inc. 48 @glassmonekey #phperkaigi (余談）Patch内容の起源 https://github.com/oraoto/pib/pull/52 大半の修正内容の詳細が不明 Wasm製PlayGroundへのPRが起源 https://oraoto.github.io/pib/ 当てなくてもいい部分はあるかもしれない。
49. © 2012-2023 BASE, Inc. 49 @glassmonekey #phperkaigi PHPをブラウザで呼び出すためには • PHPをWasm用にコンパイル • WasmをJavaScriptから呼び出す
50. © 2012-2023 BASE, Inc. 50 @glassmonekey #phperkaigi 動作内容（一部抜粋、再掲） • initPHPでWasmモジュールを準備 • runPHPで任意のPHPコードを 実行できるように • runPHPで任意のPHPコードを 実行できるように • runPHPで任意のPHPコードを 実行できるように • runPHPで任意のPHPコードを 実行できるように • startPHPなどはWordpress/playground からvendoringしたもの
51. © 2012-2023 BASE, Inc. 51 @glassmonekey #phperkaigi PHPオブジェクトの中身 • Runtimeはコンパイラ経由のグルーコード が該当する。 • setPHPCodeとhandleRequstが肝 ?>を先頭につけることで、 前回実行したPHPコードを終了させてい る
52. © 2012-2023 BASE, Inc. 52 @glassmonekey #phperkaigi Wasm関数の呼び出し • ccallでC側で定義した各種関数をコールしている • Wasm上のファイルシステム経由で結果を取得 • ファイルシステム（一部抜粋） ◦ MEMFS(デフォルト） ▪ いわゆるオンメモリ。リロードで消える ◦ NODEFS ▪ nodejsで使用するとき(ローカルで永続化） ◦ IDBFS ▪ ブラウザのIndexedDBを使用する などなど https://emscripten.org/docs/api_reference/Filesystem-API.html#file-s ystems
53. © 2012-2023 BASE, Inc. 53 @glassmonekey #phperkaigi C言語側との対応
54. © 2012-2023 BASE, Inc. 54 まとめ
55. © 2012-2023 BASE, Inc. 55 @glassmonekey #phperkaigi まとめ ブラウザ上でもPHPは動く
56. © 2012-2023 BASE, Inc. 56 @glassmonekey #phperkaigi まとめ Wasmと仲良くなりましょう
57. © 2012-2023 BASE, Inc. 57 @glassmonekey #phperkaigi まとめ • WasmはWebアプリのリッチ化で始まった技術 • PHPはブラウザでも呼び出し可能 ◦ 永続化方法がブラウザベースだと課題感あり ◦ CloudflareのD1あたりとの組み合わせの可能性はありそう ◦ Playgroundレベルだと実用性あり。ぜひ使ってね!! • PHPのソースコード読むことは楽しい • Wasmの動向は要チェック
58. © 2012-2023 BASE, Inc. 58 宣伝
59. © 2012-2022 BASE, Inc. 59 #phperkaigi @glassmonkey https://kyloz.wraptas.site/ 個人開発!!
60. © 2012-2022 BASE, Inc. 60 #phperkaigi @glassmonkey フルサイクル開発やってます!! Go, Pythonも書いてます!! DM待ってます!! We are hiring !!