クイックスタート

このガイドでは、簡単な動作例でgRPC-Webの利用を開始できます。

このガイドでは、簡単な動作例でgRPC-Webの利用を開始できます。

Docker Composeファイルバージョン3をサポートするDockerおよびdocker-compose。インストールの手順については、「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」のようなメッセージを入力します。
- Sendボタンを押します。
入力ボックスの下に、サーバーによってエコーされたメッセージが表示されます。

おめでとうございます！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サーバーを使用してポート:8081で静的コンテンツ（echotest.htmlおよびdist/main.js）をホストします。Webページから入力されたユーザーメッセージは、gRPC-WebリクエストとしてEnvoyプロキシに送信されます。