クイックスタート

このガイドでは、簡単な動作例を使ってgRPC-Webを使い始めることができます。

このガイドでは、簡単な動作例を使ってgRPC-Webを使い始めることができます。

Docker Composeファイルのバージョン3をサポートするDockerとdocker-compose。Docker Compose file version 3 インストール手順については、Install Composeをご覧ください。

サンプルコードは、grpc-webリポジトリの一部です。

リポジトリをzipファイルとしてダウンロードして解凍するか、リポジトリをクローンします。
```
$ git clone https://github.com/grpc/grpc-web
```
リポジトリのルートディレクトリに移動します
```
$ cd grpc-web
```

grpc-webディレクトリから

必要なパッケージとツールを取得します
```
$ docker-compose pull prereqs node-server envoy commonjs-client
```
注記
次の警告が表示された場合は、サンプルアプリの実行を目的とする限り無視できます。
```
WARNING: Some service image(s) must be built from source
```
バックグラウンドプロセスとしてサービスを起動します
```
$ docker-compose up -d node-server envoy commonjs-client
```
ブラウザから
- localhost:8081/echotest.htmlにアクセスしてください。
- テキスト入力ボックスに「Hello」などのメッセージを入力します。
- 送信ボタンを押します。
入力ボックスの下にサーバーがあなたのメッセージをエコーバックしているのがわかります。

おめでとうございます！gRPCを使用してクライアントサーバーアプリケーションを実行しました。

完了したら、次のコマンドを実行して、以前に起動したサービスをシャットダウンしてください。

$ docker-compose down

このサンプルアプリには、3つの主要なコンポーネントがあります。

node-serverは、Nodeで実装された標準のgRPCサーバーです。このサーバーはポート:9090でリッスンし、アプリのビジネスロジック（クライアントメッセージのエコー）を実装します。
envoyはEnvoyプロキシです。:8080でリッスンし、ブラウザのgRPC-Webリクエストをポート:9090に転送します。
commonjs-client：このコンポーネントは、protoc-gen-grpc-web protocプラグインを使用してクライアントスタブクラスを生成し、webpackを使用してすべてのJS依存関係をコンパイルし、簡単なWebサーバーを使用して静的コンテンツ（echotest.htmlとdist/main.js）をポート:8081でホストします。Webページから入力されたユーザーメッセージは、gRPC-webリクエストとしてEnvoyプロキシに送信されます。