PHPerKaigi 2021 の発表資料です
サンプルコード： https://github.com/n1215/grpc-web-chat
for PHPerKaigi 2021ブラウザから始めるgRPC 〜 gRPC-WebにPHPを添えて2021年3⽉27⽇ (⼟) 株式会社Nextat 中榮健⼆Nextat Inc. 1
View Slide
⾃⼰紹介from 京都- 中榮健⼆ （なかえけんじ）- twitter: @n_1215 - 株式会社Nextat 取締役- Laravel中⼼にECサイトやシステム開発- ここ最近はLambdaを使ったりUnityを使ったりPHP以外の仕事も増加Nextat Inc. 2
発表概要1. gRPCとは2. gRPCとPHP3. gRPC-Webとは4. サンプルアプリ ブラウザ側実装 / C#サーバ実装5. サンプルアプリ PHPサーバ実装6. まとめNextat Inc. 3
1. gRPCとはNextat Inc. 4
1-1. gRPCとはGoogle製のRPCフレームワーク → gpc.ioRPC = Remote Procedure Call (遠隔⼿続呼出)'g' の意味はリリース毎に違う てっきり Google の g かと1.0 'g' stands for 'gRPC', 1.1 'g' stands for 'good', ...ハイパフォーマンスNextat Inc. 5
gRPCの通信プロトコルとRPCの種類over HTTP/2を前提に策定されているデータがバイナリTCPコネクションの使い回しネットワークリソース利⽤効率サーバ・クライアント間のRPCは4種類HTTP/2だから双⽅向通信が可能Nextat Inc. 6
(1) Unary RPCs1リクエスト / 1レスポンス多くのWebアプリ開発者が慣れ親しんだものNextat Inc. 7
(2) Server streaming RPCs1リクエストに対しサーバが複数回のレスポンスを返す送信完了までクライアントがストリームからメッセージを読むサーバープッシュNextat Inc. 8
(3) Client streaming RPCs複数回のリクエストを送信しサーバが1回レスポンスを返す送信完了までサーバがストリームからメッセージを読むデータのアップロードなどに利⽤可能Nextat Inc. 9
(4) Bidirectional streaming RPCsリクエストとレスポンスが多対多双⽅向ストリーミング 順序に決まりはないチャットなどに利⽤可能Nextat Inc. 10
1-2. Protocol Buffers (Protobuf)gRPCが利⽤するIDL 兼 メッセージ交換⽤のバイナリフォーマットIDL = Interface Definition Language インタフェース記述⾔語プログラミング⾔語に依存しない.protoファイルから⾔語実装を⾃動⽣成できるgRPCとは独⽴して使うこともできる例）REST API + リクエストボディやレスポンスボディにProtocol BuffersNextat Inc. 11
Protocol Buffers 定義ファイル の書式Message → リクエストやレスポンスのデータ構造を記述Service → RPCの定義を記述// service.protosyntax = "proto3";package service;service Echo {rpc Ping (Message) returns (Message) {}}message Message {string msg = 1;}Nextat Inc. 12
protoc (Protocol Compiler).protoファイルをprotocでビルドして各⾔語の実装を⽣成する拡張が容易例） PHPのgRPCクライアントの⽣成$ protoc -I . --php_out=. --grpc_out=. \--plugin=protoc-gen-grpc=/usr/local/bin/grpc_php_plugin ./service.protoNextat Inc. 13
gRPCのメリットパフォーマンス、ネットワークリソースの効率的利⽤双⽅向通信クライアント側の実装が⾔語ごとに⾃動⽣成できるサーバ側もスキーマが定まるので型のエラーが起きにくいコンパイル時のエラーないし静的解析で検知しやすい定義ファイルの内容がそのままAPIの定義となる実装変更の前に定義ファイルの変更が必要になるため、両者が乖離しにくいNextat Inc. 14
gRPCのデメリット開発中に通信の中⾝を確認しにくいHTTP/2は実質暗号化通信が必須バイナリフォーマット定義ファイルから各⾔語の実装をビルドするのが少し⼿間Nextat Inc. 15
gRPCの使いどころマイクロサービスのバックエンドでのサービス間通信公式クライアントしかないスマホアプリ⽤のサーバゲームサーバチャットやバトルシステムの通信⽅式をまとめられるex. MagicOnionブラウザでの利⽤を想定する⼀般向けの公開APIにそのまま⽤いるのは⾟いNextat Inc. 16
2. gRPCとPHPNextat Inc. 17
PHP界隈のgRPC事情PHP界隈ではgRPC関連の発表は少ない（⽇本のカンファレンスで年１くらい）php grpc-client in phpcon2018PHPによるgRPCクライアント実装のお話"PHPでのgRPCサーバはできない”PHPでもgRPCサーバを⽴てたいだけの⼈⽣だった(Laravel JP Conf 2019)"PHPerには⻭ブラシで船舶を磨く⾃由が与えられている"サーバ側もUnary RPCは可能だが、"ストリーミングはまだ試してません"RoadRunner、 spiral/php-grpcPHPでgRPCってどこまでいけるの？（PHP Conference 2019）"Unary RPCはできる" "Streaming RPCはまだはやかった"Swoole、 HyperfNextat Inc. 18
PHP界隈のgRPC事情PHPによるgRPCクライアントは公式サポートリクエスト使い捨てのPHPの通常の動作⽅式では⻑寿命なStreamingができないドキュメント(PHP⽤)： サーバ側はNode.JSを使ってねGoogle Groupでのとある発⾔ : PHPでgRPCサーバ作っても特殊な構成になるしあまり役に⽴たないよね（意訳）Serers in PHP?参考： なぜPHPはgRPCサーバーがサポートされていないのか？Nextat Inc. 19
"Works across languages and platforms"Automatically generate idiomatic client and server stubs for your servicein a variety of languages and platformshttps://grpc.io/Nextat Inc. 20
だが、PHPでのサーバ実装は駄⽬……っ！公式の対応にPHPer涙⽬Nextat Inc. 21
PHPでgRPCサーバを実現する試み通常のPHPの構成でダメなら通常とは違う構成でやればいいPHP-FPM以外の選択肢Swoole、RoadRunnerなど、新しいアプリケーションサーバ・HTTPサーバによる試験的な実装が⾒つかる資料の後半で⼀部を紹介Nextat Inc. 22
PHP界隈におけるgRPCの現状マイクロサービスなどの⽂脈で、PHPでgRPCクライアントを実装するのは問題ないが、通常のPHP+JavaScriptによるWeb開発の代替技術としての採⽤には難(1) PHPによるgRPCサーバの実装が困難Unary RPCは問題ないものの、Streaming RPCがネックになる実装状況を調査した結果は2年前とあまり変わらず(2) gRPCはそのままではブラウザから利⽤しにくい解決策(1) → Unary RPCのみで我慢するか、Streamingに対応した実装を待つ(2) → gRPCに準じた通信をブラウザから利⽤するための gRPC-WebNextat Inc. 23
3. gRPC-Webとはようやく本編Nextat Inc. 24
gRPC-WebブラウザからgRPCに準じた通信を扱うためのJSライブラリ＋プロトコルhttps://github.com/grpc/grpc-webgRPC公式GitHubリポジトリのdoc/PROTOCOL-WEB.mdに仕様ありgRPC over HTTP2 との主な違いHTTP/2特有の振る舞いやフレームには依存せず、HTTP/1でも利⽤できるHTTP/1やクロスブラウザサポートのため、Base64などのテキストエンコードを⾏う場合があるRPCの⽅式はUnary RPC、Server Streaming RPCのみClient Streaming、Bidirectional Streamingは未サポートNextat Inc. 25
Content-Typeは2種類application/grpc-web-textbase64でテキストにエンコードされる今回のサンプルアプリはこちらを利⽤application/grpc-webデフォルトのフォーマットはProtobuf（application/grpc-web+proto）バイナリフォーマットよりJSONのほうがブラウザ上の処理が軽いという話もあり、application/grpc-web+jsonなども想定されているNextat Inc. 26
ProxygRPCサーバとブラウザが直接通信するわけではない間にgRPCとgRPC-Webを変換するProxyが必要EnvoyNginx moduleもある参考： gRPC-Web is Generally AvailableNextat Inc. 27
gRPC-Webのロードマップroadmap.mdstreaming-roadmap.mdブラウザのStreamサポートに応じてClient StreamingやBidi Streamingを追加Envoy不要のIn-process Proxy（Python、Java、Node、C++ etc.）ブラウザがネイティブにgRPCを扱えるようになれば、gRPC-WebはオプションにWHATWG Streams API （Chromiumベースのブラウザではもう使える）fetch() upload streaming (ChromeのOrigin Trialには⼊っている)もう少し時間は掛かりそうNextat Inc. 28
4. サンプルアプリブラウザ側実装 + C#サーバ実装Nextat Inc. 29
お題： 簡易チャットチャットルームにメッセージを投稿できる他の⼈が投稿したメッセージをリアルタイムに確認できるチャットルームは⼀つだけ過去ログの閲覧やチャットメッセージの永続化は特に考えないNextat Inc. 30
RPCの設計とProtobuf定義（スキーマ駆動は良いぞ！）双⽅向ストリーミングは（今の）gRPC-Webでは使えないが、なくても問題ないメッセージ投稿はUnary RPCメッセージ購読にServer Streaming RPC定義ファイルは次ページNextat Inc. 31
// chat.protosyntax = "proto3";option csharp_namespace = "GrpcWebChat";import "google/protobuf/empty.proto";import "google/protobuf/timestamp.proto";package GrpcWebChat;service Chat {rpc SendMessage (SendMessageRequest) returns (google.protobuf.Empty);rpc Subscribe (google.protobuf.Empty) returns (stream ChatMessage);}message SendMessageRequest {string body = 1;string name = 2;}message ChatMessage {string body = 1;string name = 2;google.protobuf.Timestamp date = 3;}Nextat Inc. 32
ブラウザ側TypeScript実装(1)mode は grpc-web-text を選択mode: grpc-web はServer Streaming⾮対応ブラウザがStreamingのデータをバイナリで受け取ることができないためgRPC クライアントコード⽣成protoc -I . -I /opt/include ./chat.proto \--grpc-web_out=import_style=typescript,mode=grpcwebtext:/out/grpc-web-text \--js_out=import_style=commonjs:/out/grpc-web-text \--plugin=protoc-gen-grpc-web=/usr/local/bin/grpc_web_plugingRPC-Web⽤のprotocプラグインを⽤いて⾃動コード⽣成JavaScript + TypeScript型定義（d.ts）、TypeScriptのコードが⽣成されるNextat Inc. 33
ブラウザ側TypeScript実装(2)⾃動⽣成されたChatClientを利⽤するだけ//メッセージ購読の処理のイメージimport { ChatMessage } from './pb-web/chat_pb'import { ChatClient } from './pb-web/ChatServiceClientPb'const client = new ChatClient('https://localhost:9000')const messageStream = client.subscribe(new Empty()) as ClientReadableStreammessageStream.on('data', (chatMessage: ChatMessage) => {console.log('data', chatMessage)})messageStream.on('status', (status: Status) => {console.log('status', status)})messageStream.on('end', () => {console.log('stream end', new Date())})Nextat Inc. 34
サーバ側C#実装(1)ASP.NET Core を利⽤gRPCとgRPC-Webに対応したパッケージありgRPC-Web実装はIn-process Proxy⽅式サーバ内にgRPC-Webへの変換を組み込む形式なので、Envoy不要C#のHTTPサーバ（Kestrel）⾃体がgRPC-Web形式でやりとりドキュメントを⽤意しているMicrosoftはgRPC-Webガチ勢なのか？そういえば クライアント側：TypeScript + サーバ側：C# ですねアンダース・ヘルスバーグ先⽣に感謝の祈りを捧げながら実装しますNextat Inc. 35
サーバ側C#実装(2)ChatService.csが⾃動⽣成できるので、処理を埋めていくデータストアを使わない簡易的なPub/Subに Reactive Extensions (Rx)を利⽤ChatService.csのメッセージ投稿処理public override Task SendMessage(SendMessageRequest request, ServerCallContext context){var chatMessage = new ChatMessage{Body = request.Body,Name = request.Name,Date = new Timestamp { Seconds = DateTimeOffset.Now.ToUnixTimeSeconds() }};_chatMessageSubject.OnNext(chatMessage);return Task.FromResult(new Empty());}Nextat Inc. 36
ChatService.csのメッセージ購読処理public override Task Subscribe(Empty request,IServerStreamWriter responseStream,ServerCallContext context) {return _chatMessageSubject.Do(chatMessage =>{responseStream.WriteAsync(chatMessage);}).ToTask();}Nextat Inc. 37
動いた！最低ノルマ達成。最悪PHP実装は動かなくても許されるはず！Nextat Inc. 38
content-type: application/grpc-web-textNextat Inc. 39
5. サンプルアプリ PHPサーバ実装Nextat Inc. 40
"PHPでgRPCサーバ" に再挑戦In-process Proxy⽅式にする場合もStreamingは必須どうせならEnvoyでProxyすることにして、gRPCサーバに再挑戦Nextat Inc. 41
候補1. Spiral Framework (RoadRunner) https://spiral.dev/RoadRunner (Golang製のPHPアプリケーションサーバ) を利⽤前⾯のGoサーバがgRPCのリクエストを受け、PHPのworkerに振る開発元は Spiral Scout プレゼン資料（ロシア語）: RoadRunnerUnaryに加えてServer Streaming RPCに対応している（？）https://spiral.dev/docs/grpc-streaminggRPCのサービスはPHPではなくGo実装で、PHPは裏のJobとして動くのみこれをPHP実装と⾔い張るのは厳しいNextat Inc. 42
今回は⻭ブラシ（PHP）で船舶を磨くことが⽬的なのであって船舶を効率良く磨く⽅法は求めていないspiral/php-grpc も Streaming周りの進展はなさそう だったため、⾒送りNextat Inc. 43
候補2. Swoolehttps://www.swoole.co.uk/コルーチンベースの⾮同期並⾏実⾏ライブラリ(PHP拡張/C⾔語)PHPのコードでHTTPサーバを実装することが可能。HTTP/2にも対応Unary RPCのサンプル実装が存在上記を元に2回レスポンスのデータを送ればOKかと思いきや⽅法が不明\Swoole\Http\Response::end() は名前の通り2回以上は呼べないチャンク⽤の\Swoole\Http\Response::write() はHTTP/2⾮対応\Swoole\Http\Server::send()でバイナリデータを送ればいけるのか？Nextat Inc. 44
困った……どちらかで⾏けるだろうと思っていたまたServer Streaming RPCの前に涙を飲むしかないのか？Nextat Inc. 45
そんなところに救世主が！Nextat Inc. 46
候補3. Amphttps://amphp.org/イベント駆動な並⾏処理のフレームワークEvent Loop、Promise、Coroutine、StreamPHPのコードでHTTPサーバを実装可能。HTTP/2対応HTTP/2のHeader圧縮（HPACK）などもPHPで書かれている→ PHPで制御できる部分がかなり多そうNextat Inc. 47
Amp HTTP Serverによるストリーミングamphp/http-server のリポジトリにStreamのコード例あり（下に抜粋）examples/stream.phpStreamとProducerを使って複数回データを送っている⾮同期処理の記述におけるyieldが特徴的$server = new HttpServer($servers, new CallableRequestHandler(function (Request $request) {// We stream the response here, one line every 100 ms.return new Response(Status::OK, ["content-type" => "text/plain; charset=utf-8",], new IteratorStream(new Producer(function (callable $emit) {for ($i = 0; $i < 30; $i++) {yield new Delayed(100);yield $emit("Line {$i}\r\n");}})));}), $logger, (new Options)->withoutCompression());Nextat Inc. 48
それだよAmp！！！ キミにきめた！！！時間を空けてテキストデータを複数のDATAフレームで送ることが可能だと確認あとはレスポンスをgRPCの仕様に合わせれば……Nextat Inc. 49
gRPCのレスポンスの仕様公式の gRPC over HTTP2 を⾒るABNF（拡張バッカス・ナウア記法）で記述されているResponse → (Response-Headers *Length-Prefixed-Message Trailers) / Trailers-OnlyLength-Prefixed-Message → Compressed-Flag Message-Length MessageCompressed-Flag → 0 / 1 # encoded as 1 byte unsigned integerMessage-Length → {length of Message} # encoded as 4 byte unsigned integer (big endian)Message → *{binary octet}Protocol Buffersのバイナリをそのまま送るだけではダメレスポンスボディに相当するLength-Prefixed-Messageを構成する必要がある参考： https://gkuga.hatenablog.com/entry/2019/12/14/005653Nextat Inc. 50
Length-Prefixed-Message を⽣成pack()と⽂字列操作関数を使って簡易的に実装$serializedMessage = $message->serializeToString();$lengthPrefixedMessage = pack('c', 0x00). pack('N', strlen($serializedMessage)). $serializedMessage;これをAmpのHTTPサーバからStreamのデータとして返すNextat Inc. 51
Wiresharkによる通信内容の確認HTTP/2の通信はそのままでは確認が困難なので、Wiresharkの出番有名なネットワークプロトコル解析⽤のソフトTLS鍵情報のログを参照すれば、ブラウザからのHTTP/2通信内容を⾒られる参考： HTTP/2 over TLS の通信をダンプする⽅法gRPCにも対応しているprotoファイルの検索パスを指定すればより詳細な情報も出せる模様参考： https://grpc.io/blog/wireshark/⾮常にお世話になりましたNextat Inc. 52
⼀旦GET /に対しStreamでレスポンスを返し、ブラウザとWiresharkで確認Nextat Inc. 53
(GRPC)(PROTOBUF)Wiresharkのお墨付き！ これで勝ったも同然！Nextat Inc. 54
C#実装を参考にChatServiceを分離先程のLenght-Prefix-Messageの処理とAmpのStream関連クラスを使いServerStreamWriterを作成// ChatServiceの メッセージ購読の処理public function subscribe(GPBEmpty $request, ServerStreamWriter $streamWriter) {$this->chatMessageSubject->subscribe(function (ChatMessage $chatMessage) use ($streamWriter) {$this->logger->debug("emit", [$chatMessage->getBody()]);$streamWriter->write($chatMessage);},null,function () use ($streamWriter) {$streamWriter->complete();});return new Success();}Nextat Inc. 55
RPCごとのルーティングを追加Amp HTTP Server⽤のルータを追加各RPCはPOST /{サービス名}/{メソッド名}に対応$router = new Amp\Http\Server\Router();$chatService = new ChatService(new Rx\Subject\Subject(),$logger);$router->addRoute('POST','/GrpcWebChat.Chat/SendMessage',new SendMessageRequestHandler($chatService, $requestBodyDeserializer, $responseFactory));$router->addRoute('POST','/GrpcWebChat.Chat/Subscribe',new SubscribeRequestHandler($chatService, $responseFactory));Nextat Inc. 56
Envoyの設定EnvoyのProxy設定で少しハマったローカル環境だったので⾃⼰署名証明書の設定に⼿間取るEnvoyのタイムアウト系の設定ですぐにメッセージの購読が途切れたりしていたNextat Inc. 57
完成したものhttps://github.com/n1215/grpc-web-chat/tree/main/server-amphp先に作ったブラウザ側のgRPC-Webのチャットクライアントアプリで動作を確認Unary RPC、Server Streaming RPCが可能厳密なgRPCサーバにはなっていないClient Streaming、Bidirectional Streamingは未検証grpc-timeoutなど、リクエストヘッダ周りは完全無視サーバ側のgRPC Serviceのコード⾃動⽣成には⼿を出していないprotobufのMessageはPHPクライアント⽤のものを利⽤Nextat Inc. 58
PHPサーバ側のログNextat Inc. 59
x-powered-by: PHP8.0.0Nextat Inc. 60
6. まとめgRPCとProtocol Buffersを使ったスキーマ駆動はいいぞgRPC-Web⽤のプロキシを⽤意すればブラウザからでも使えるIn-process ProxyかEnvoyが⼿軽gRPC-Web⽤に⾃動コード⽣成するのは簡単将来的にはgRPCがネイティブにブラウザから使えるようになる展望PHPのgRPCサーバは公式サポートがないが、Server Streaming RPCに対応したPHP製サーバは作れるPHP製gRPCサーバとgRPC-Webの組み合わせも夢じゃないC#のgRPC-Webサーバ実装はめっちゃ楽でしたNextat Inc. 61
最近の国内PHP系カンファレンスのgRPC関連発表php grpc-client in phpcon2018 (2018/12)gRPCクライアント実装は可能だが、通常はPHPでgRPCサーバはできないPHPでもgRPCサーバを⽴てたいだけの⼈⽣だった (2019/02)サーバ側もUnary RPCは可能だが、Streaming RPCは未検証PHPでgRPCってどこまでいけるの？（2019/12）Streaming RPCはまだはやかった本発表 (2021/03)Server Streaming RPCもいけるやん！ ← イマココto be continued...Nextat Inc. 62
次のどなたかの発表を楽しみにしています！！Nextat Inc. 63
PR: ITエンジニアを募集しています株式会社Nextat nextat.co.jp受託開発業務システム、ECサイト、スマホアプリ...本社は京都ですが、東京・名古屋などリモートワーク実績あり設計の話に付き合ってくれる⽅⼤歓迎！Nextat Inc. 64
ご清聴ありがとうございましたNextat Inc. 65
n1215
masatoshiitoh
atinfinity
okuzawats
marcustung
h0r15h0
codehex
ivargrimstad
parttimenerd
skanehira
yonetty
tanakahisateru
deepu105
paigeccino
bcantrill
caitiem20
myddelton
holman
destraynor
philhawksworth
reverentgeek
maltzj
addyosmani
aleyda