and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 ANDPADのマイクロサービス構築におけるgRPC-Web 株式会社 アンドパッド SWE 佐藤亮太 ANDPAD FrontEnd NOW!!
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 • 佐藤 亮太 • 株式会社ANDPAD ◦ 2020年10月入社 フロントエンド エンジニアとして業務を担当 ◦ 入社当初からマイクロサービスを推進するチームにジョイン ◦ メディア「ANDPAD ONE」へフロントエンド領域で携わる • 前職 ◦ フリーランスエンジニア ▪ toC向けの開発 ▪ バックエンド → フロントエンド 、アプリ開発 • その他 ◦ 猫好き。写真好き。 自己紹介
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 1. マイクロサービス導入の背景 2. アーキテクチャ、技術スタックの紹介 3. gRPC, gRPC-Web, ProtocolBuffers について 4. gRPC-Webをやってみよう 5. gRPC-Webの今後（roadmap） 6. 実践してみてのまとめ はじめに
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 なんでマイクロサービスやるの？ • ３年後、ANDPADの規模感は全てが今の数倍になっていることを想定 ◦ 大 きなもの（モノリシック）はどんどん 陳 腐 化 （いわゆる 負 の 遺 産 ） →小さなサービスを小さな影響範囲でリプレースが可能 ◦ エンジニアがどんどん 増 えていった 場 合 → 大 きなものに 対 し 多 数 のエンジニアが 立 ち 向 かっていくのは 非現実的（例えばリリース作業など、毎回大規模になりそう） 背景（マイクロサービス）
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 Browser アーキテクチャ NOW Backend gRPC-Web app BFF Backend Proxy HTTP/1.1 HTTP/2 HTTP/２ • 言語 ◦ Frontend：Nuxt.js + TypeScript ◦ Backend：Golang • envoy (Proxy) ◦ テキストベースのHTTP/1.1、バイナリベースのHTTP/2 を相互変換 Protocol Buffers Protocol Buffers Protocol Buffers base64文字 列を送受信
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 • gRPC ◦ 2015年にGoogleが公開したRPCフレームワーク（HTTP/2） ◦ Protocol Buffers を利用して高速かつ低容量での通信を実現 ▪ 送信データをシリアライズしてバイナリに変換しているため ◦ 多言語対応：JavaScript, Go, Node.js, Ruby, Pythonなど ◦ IDL(Interface Description Language)でインターフェースを定義し、 クライアント・サーバのコードを自動生成 gRPCって？
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 • gRPC-Web ◦ ブラウザで動作するgRPC。基本HTTP/1.1で動作。 ◦ テキストベースでリクエスト、レスポンスを送受信。 ◦ gRPCと同様にProtocolBuffers で Request/Response用の コードを自動生成し、ライブラリとして利用しAPIを実装 gRPC-Webって？
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 ProtocolBuffersって？ lint & generate • API作成時は、IDLで Request / Response の構造を定義 ◦ 具体的にはプロトコルを定義したファイルを作成、コンパイル（protoc）することで各言語 のコード、apiをコールするクライアントを生成 greeter.proto lint 機能を含む生成ツール として「Buf」を採用
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 ProtocolBuffers（生成結果） 自動生成されたコード例（TypeScriptの型ファイル） 例：生成されたコードにリクエストパラメータを設定してサーバ側へ送信
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 自動生成されたコードの使用例 protoファイル APIコールのロジック
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 自動生成されたコードを使う • protoファイル更新後、npm に private publish • 非公開のクライアントライブラリとして使用 gRPC-Web app npm install
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 gRPC-Webの今後（roadmap）
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 gRPC-Webの今後（roadmap） • in-process proxy ◦ gRPCサーバへ直接アクセス可能 ◦ つまりEnvoyに頼らなくて済むようになる • ドキュメントの充実 • TypeScriptの実験的サポート（もう普通に TypeScriptで書いてます） • Web UI Support ◦ ブラウザ上で gRPCのリクエストを作成、送信 →スケジュールやマイルストーンに関する記述は一切ないのが不安
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 • メリット ◦ タイプセーフ ▪ protoファイル作成の時点で型を指定（フロントはtsなので助かる） ◦ コードの自動生成 ▪ JavaScript, TypeScript, Golang など多言語対応 ◦ BASE64通信 → 低容量の通信が可能 • デメリット ◦ デバッグがちょっと面倒 ▪ devtoolsではrequest/response 共にbase64文字列のみ • chromeに拡張機能は存在 ◦ エラー制御がちょっと面倒 ▪ 正常、エラーに関係なくステータスコード200が返ってくる ▪ エラーの場合はレスポンス内の詳細なエラー情報あり まとめ - gRPC-Web実践してみて
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 ご清聴ありがとうございました！
andpad
biacco42
qnighy
hideg
kakao
ysk8hori
maruto
tkikuc
taro28
fukubaka0825
ivargrimstad
happymana
tutinoko
moore
sergeychernyshev
trishagee
smashingmag
mza
samanthasiow
sugarenia
holman
bluesmoon
afnizarnur
reverentgeek
lemiorhan
