Simplify example running from docker images

README.md

@@ -20,6 +20,23 @@ Nginx gateway. In future, we expect gRPC-Web to be supported in
 language-specific Web frameworks, such as Go, Java, and Node, which will
 eliminate the need to deploy a gateway at all.
 
+## Quick start
+
+Try gRPC-Web and run a quick Echo example from the browser!
+
+From the repo root directory:
+
+```sh
+$ docker build -t grpc-web --build-arg with_examples=true \
+  -f net/grpc/gateway/docker/ubuntu_16_04/Dockerfile .
+$ docker run -t -p 8080:8080 grpc-web
+```
+
+Open a browser tab, and inspect
+```
+http://localhost:8080/net/grpc/gateway/examples/echo/echotest.html
+```
+
 ## How it works
 
 Let's take a look at how gRPC-Web works with a simple example. You can find out
@@ -59,9 +76,9 @@ from the browser!
 Create your client
 ```js
 var echoService = new proto.grpc.gateway.testing.EchoServiceClient(
-  'http://localhost:9091');
+  'http://localhost:8080');
 ```
-  
+
 Make a unary RPC call
 ```js
 var unaryRequest = new proto.grpc.gateway.testing.EchoRequest();

net/grpc/gateway/docker/debian_stretch/Dockerfile

@@ -29,22 +29,14 @@
 #
 # RUN
 #
-# 1. Nginx gateway:
+# 1. Run the docker container
 #
-# $ docker run -itp 8080:8080 -p 9091:9091 --name grpc-web grpc-web /bin/bash
-# $ cd /github/grpc-web/gConnector && ./nginx.sh
+# $ docker run -t -p 8080:8080 grpc-web
 #
-# 2. Backend gRPC server:
+# 2. Browser example:
 # (if you had built the end-to-end example with Option 2 in the BUILD section)
 #
-# $ docker exec -it grpc-web \
-#   /github/grpc-web/net/grpc/gateway/examples/echo/echo_server
-#
-# 3. Browser example:
-# (if you had built the end-to-end example with Option 2 in the BUILD section)
-#
-# Once the Nginx gateway and the Echo server are both running in different
-# terminals, you can point a web browser to
+# Point a web browser to
 #
 # http://localhost:8080/net/grpc/gateway/examples/echo/echotest.html
 
@@ -86,3 +78,6 @@ RUN cd /github/grpc-web && \
 
 RUN cd /github/grpc-web && \
   ./scripts/build_examples.sh
+
+EXPOSE 8080
+CMD ["/github/grpc-web/gConnector/run_example.sh"]

net/grpc/gateway/docker/ubuntu_14_04/Dockerfile

@@ -29,22 +29,14 @@
 #
 # RUN
 #
-# 1. Nginx gateway:
+# 1. Run the docker container
 #
-# $ docker run -itp 8080:8080 -p 9091:9091 --name grpc-web grpc-web /bin/bash
-# $ cd /github/grpc-web/gConnector && ./nginx.sh
+# $ docker run -t -p 8080:8080 grpc-web
 #
-# 2. Backend gRPC server:
+# 2. Browser example:
 # (if you had built the end-to-end example with Option 2 in the BUILD section)
 #
-# $ docker exec -it grpc-web \
-#   /github/grpc-web/net/grpc/gateway/examples/echo/echo_server
-#
-# 3. Browser example:
-# (if you had built the end-to-end example with Option 2 in the BUILD section)
-#
-# Once the Nginx gateway and the Echo server are both running in different
-# terminals, you can point a web browser to
+# Point a web browser to
 #
 # http://localhost:8080/net/grpc/gateway/examples/echo/echotest.html
 
@@ -88,3 +80,6 @@ RUN cd /github/grpc-web && \
 
 RUN cd /github/grpc-web && \
   ./scripts/build_examples.sh
+
+EXPOSE 8080
+CMD ["/github/grpc-web/gConnector/run_example.sh"]

net/grpc/gateway/docker/ubuntu_16_04/Dockerfile

@@ -29,22 +29,14 @@
 #
 # RUN
 #
-# 1. Nginx gateway:
+# 1. Run the docker container
 #
-# $ docker run -itp 8080:8080 -p 9091:9091 --name grpc-web grpc-web /bin/bash
-# $ cd /github/grpc-web/gConnector && ./nginx.sh
+# $ docker run -t -p 8080:8080 grpc-web
 #
-# 2. Backend gRPC server:
+# 2. Browser example:
 # (if you had built the end-to-end example with Option 2 in the BUILD section)
 #
-# $ docker exec -it grpc-web \
-#   /github/grpc-web/net/grpc/gateway/examples/echo/echo_server
-#
-# 3. Browser example:
-# (if you had built the end-to-end example with Option 2 in the BUILD section)
-#
-# Once the Nginx gateway and the Echo server are both running in different
-# terminals, you can point a web browser to
+# Point a web browser to
 #
 # http://localhost:8080/net/grpc/gateway/examples/echo/echotest.html
 
@@ -85,3 +77,6 @@ RUN cd /github/grpc-web && \
 
 RUN cd /github/grpc-web && \
   ./scripts/build_examples.sh
+
+EXPOSE 8080
+CMD ["/github/grpc-web/gConnector/run_example.sh"]

net/grpc/gateway/examples/echo/Makefile

@@ -38,6 +38,7 @@ package:
 	cp echo_server $(ROOT_DIR)/gConnector
 	cp echotest.html $(ROOT_DIR)/gConnector/$(EXAMPLES_PATH)
 	cp compiled.js $(ROOT_DIR)/gConnector
+	cp run_example.sh $(ROOT_DIR)/gConnector
 	zip -r $(ROOT_DIR)/gConnector.zip $(ROOT_DIR)/gConnector/*
 
 echo_server: echo.pb.o echo.grpc.pb.o echo_server.o echo_service_impl.o

net/grpc/gateway/examples/echo/README.md

@@ -16,8 +16,23 @@ our [pre-requisites](../../../../../INSTALL.md):
  1. Protocol buffers
  2. gRPC
  3. Closure compiler
-
-
+
+
+## Using Docker
+
+From the repo root directory:
+
+```sh
+$ docker build -t grpc-web --build-arg with_examples=true \
+  -f net/grpc/gateway/docker/ubuntu_16_04/Dockerfile .
+$ docker run -t -p 8080:8080 grpc-web
+```
+
+Open a browser tab, and inspect
+```
+http://<hostname>:8080/net/grpc/gateway/examples/echo/echotest.html
+```
+
 ## Build the example
 
 From the repo root directory:
@@ -45,7 +60,7 @@ $ cd net/grpc/gateway/examples/echo && ./echo_server &
 $ cd gConnector && ./nginx.sh &
 ```
 
-3. Open a browser tab, and Inspect
+3. Open a browser tab, and inspect
 ```
 http://<hostname>:8080/net/grpc/gateway/examples/echo/echotest.html
 ```

net/grpc/gateway/examples/echo/echotest.html

@@ -124,7 +124,7 @@
 
  $(document).ready(function() {
    echoService = new proto.grpc.gateway.testing.EchoServiceClient(
-     'http://' + window.location.hostname + ':9091');
+     'http://' + window.location.hostname + ':8080');
 
    // event handlers
    $("#send").click(send);

net/grpc/gateway/examples/echo/nginx.conf

@@ -16,13 +16,10 @@ http {
   proxy_request_buffering off;
   server {
     listen 8080;
-    root /var/www/html;
-    location / {
-    }
-  }
-  server {
-    listen 9091;
     server_name localhost;
+    location ~ \.(html|js)$ {
+      root /var/www/html;
+    }
     location / {
       grpc_pass localhost:9090;
       if ($request_method = 'OPTIONS') {

net/grpc/gateway/examples/echo/run_example.sh

@@ -0,0 +1,18 @@
+#!/bin/sh
+# Copyright 2018 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+cd "$(dirname "$0")"
+./nginx.sh &
+../net/grpc/gateway/examples/echo/echo_server

net/grpc/gateway/examples/echo/tutorial.md

@@ -33,8 +33,9 @@ To serve static content, we just need a simple block like this:
 ```
   server {
     listen 8080;
-    root /var/www/html;
-    location / {
+    server_name localhost;
+    location ~ \.(html|js)$ {
+      root /var/www/html;
     }
   }
 ```
@@ -44,7 +45,7 @@ this:
 
 ```
   server {
-    listen 9091;
+    listen 8080;
     server_name localhost;
     location / {
       grpc_pass localhost:9090;
@@ -57,8 +58,8 @@ content.
 
 
 In this simple example, the HTML and JS assets are served from port `:8080`.
-The HTML makes gRPC requests to port `:9091`. Nginx forwards the requests to
-the backend gRPC server listening on port `:9090`.
+The HTML makes gRPC requests to same port `:8080`. Nginx forwards the request
+to the backend gRPC server listening on port `:9090`.
 
 
 
@@ -154,7 +155,7 @@ Then create the service client.
 
 ```js
     var service = new proto.grpc.gateway.testing.EchoServiceClient(
-        'http://localhost:9091');
+        'http://localhost:8080');
 ```
 
 

net/grpc/gateway/nginx/package/nginx.sh

@@ -13,4 +13,5 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+cd "$(dirname "$0")"
 ./nginx -p . -c conf/nginx.conf