Enhancements in clarity to access-application-cluster/connecting-frontend-backend.md (#25927)

* Enhancements in clarity to docs/tasks/access-application-cluster/connecting-frontend-backend.md

* Code review comments

* Reverting name of service due to backed value in Dockerimage

Author: murillodigital

content/en/docs/tasks/access-application-cluster/connecting-frontend-backend.md

@@ -1,22 +1,24 @@
 ---
-title: Connect a Front End to a Back End Using a Service
+title: Connect a Frontend to a Backend Using Services
 content_type: tutorial
 weight: 70
 ---
 
 <!-- overview -->
 
-This task shows how to create a frontend and a backend
-microservice. The backend microservice is a hello greeter. The
-frontend and backend are connected using a Kubernetes
-{{< glossary_tooltip term_id="service" >}} object.
+This task shows how to create a _frontend_ and a _backend_ microservice. The backend 
+microservice is a hello greeter. The frontend exposes the backend using nginx and a 
+Kubernetes {{< glossary_tooltip term_id="service" >}} object.
 
 ## {{% heading "objectives" %}}
 
-* Create and run a microservice using a {{< glossary_tooltip term_id="deployment" >}} object.
-* Route traffic to the backend using a frontend.
-* Use a Service object to connect the frontend application to the
-  backend application.
+* Create and run a sample `hello` backend microservice using a 
+  {{< glossary_tooltip term_id="deployment" >}} object.
+* Use a Service object to send traffic to the backend microservice's multiple replicas.
+* Create and run a `nginx` frontend microservice, also using a Deployment object.
+* Configure the frontend microservice to send traffic to the backend microservice. 
+* Use a Service object of `type=LoadBalancer` to expose the frontend microservice 
+  outside the cluster.
 
 ## {{% heading "prerequisites" %}}
 
@@ -34,32 +36,32 @@ require a supported environment. If your environment does not support this, you
 The backend is a simple hello greeter microservice. Here is the configuration
 file for the backend Deployment:
 
-{{< codenew file="service/access/hello.yaml" >}}
+{{< codenew file="service/access/backend-deployment.yaml" >}}
 
 Create the backend Deployment:
 
 ```shell
-kubectl apply -f https://k8s.io/examples/service/access/hello.yaml
+kubectl apply -f https://k8s.io/examples/service/access/backend-deployment.yaml
 ```
 
 View information about the backend Deployment:
 
 ```shell
-kubectl describe deployment hello
+kubectl describe deployment backend
 ```
 
 The output is similar to this:
 
 ```
-Name:                           hello
+Name:                           backend
 Namespace:                      default
 CreationTimestamp:              Mon, 24 Oct 2016 14:21:02 -0700
 Labels:                         app=hello
                                 tier=backend
                                 track=stable
 Annotations:                    deployment.kubernetes.io/revision=1
 Selector:                       app=hello,tier=backend,track=stable
-Replicas:                       7 desired | 7 updated | 7 total | 7 available | 0 unavailable
+Replicas:                       3 desired | 3 updated | 3 total | 3 available | 0 unavailable
 StrategyType:                   RollingUpdate
 MinReadySeconds:                0
 RollingUpdateStrategy:          1 max unavailable, 1 max surge
@@ -80,57 +82,66 @@ Conditions:
   Available     True    MinimumReplicasAvailable
   Progressing   True    NewReplicaSetAvailable
 OldReplicaSets:                 <none>
-NewReplicaSet:                  hello-3621623197 (7/7 replicas created)
+NewReplicaSet:                  hello-3621623197 (3/3 replicas created)
 Events:
 ...
 ```
 
-## Creating the backend Service object
+## Creating the `hello` Service object
 
-The key to connecting a frontend to a backend is the backend
+The key to sending requests from a frontend to a backend is the backend
 Service. A Service creates a persistent IP address and DNS name entry
 so that the backend microservice can always be reached. A Service uses
 {{< glossary_tooltip text="selectors" term_id="selector" >}} to find
 the Pods that it routes traffic to.
 
 First, explore the Service configuration file:
 
-{{< codenew file="service/access/hello-service.yaml" >}}
+{{< codenew file="service/access/backend-service.yaml" >}}
 
-In the configuration file, you can see that the Service routes traffic to Pods
-that have the labels `app: hello` and `tier: backend`.
+In the configuration file, you can see that the Service, named `hello` routes 
+traffic to Pods that have the labels `app: hello` and `tier: backend`.
 
-Create the `hello` Service:
+Create the backend Service:
 
 ```shell
-kubectl apply -f https://k8s.io/examples/service/access/hello-service.yaml
+kubectl apply -f https://k8s.io/examples/service/access/backend-service.yaml
 ```
 
-At this point, you have a backend Deployment running, and you have a
-Service that can route traffic to it.
+At this point, you have a `backend` Deployment running three replicas of your `hello`
+application, and you have a Service that can route traffic to them. However, this 
+service is neither available nor resolvable outside the cluster.
 
 ## Creating the frontend
 
-Now that you have your backend, you can create a frontend that connects to the backend.
-The frontend connects to the backend worker Pods by using the DNS name
-given to the backend Service. The DNS name is "hello", which is the value
-of the `name` field in the preceding Service configuration file.
+Now that you have your backend running, you can create a frontend that is accessible 
+outside the cluster, and connects to the backend by proxying requests to it.
 
-The Pods in the frontend Deployment run an nginx image that is configured
-to find the hello backend Service. Here is the nginx configuration file:
+The frontend sends requests to the backend worker Pods by using the DNS name
+given to the backend Service. The DNS name is `hello`, which is the value
+of the `name` field in the `examples/service/access/backend-service.yaml` 
+configuration file.
 
-{{< codenew file="service/access/frontend.conf" >}}
+The Pods in the frontend Deployment run a nginx image that is configured
+to proxy requests to the `hello` backend Service. Here is the nginx configuration file:
 
-Similar to the backend, the frontend has a Deployment and a Service. The
-configuration for the Service has `type: LoadBalancer`, which means that
-the Service uses the default load balancer of your cloud provider.
+{{< codenew file="service/access/frontend-nginx.conf" >}}
 
-{{< codenew file="service/access/frontend.yaml" >}}
+Similar to the backend, the frontend has a Deployment and a Service. An important
+difference to notice between the backend and frontend services, is that the
+configuration for the frontend Service has `type: LoadBalancer`, which means that
+the Service uses a load balancer provisioned by your cloud provider and will be
+accessible from outside the cluster.
+
+{{< codenew file="service/access/frontend-service.yaml" >}}
+
+{{< codenew file="service/access/frontend-deployment.yaml" >}}
 
 Create the frontend Deployment and Service:
 
 ```shell
-kubectl apply -f https://k8s.io/examples/service/access/frontend.yaml
+kubectl apply -f https://k8s.io/examples/service/access/frontend-deployment.yaml
+kubectl apply -f https://k8s.io/examples/service/access/frontend-service.yaml
 ```
 
 The output verifies that both resources were created:
@@ -178,7 +189,7 @@ cluster.
 
 ## Send traffic through the frontend
 
-The frontend and backends are now connected. You can hit the endpoint
+The frontend and backend are now connected. You can hit the endpoint
 by using the curl command on the external IP of your frontend Service.
 
 ```shell
@@ -196,17 +207,17 @@ The output shows the message generated by the backend:
 To delete the Services, enter this command:
 
 ```shell
-kubectl delete services frontend hello
+kubectl delete services frontend backend
 ```
 
 To delete the Deployments, the ReplicaSets and the Pods that are running the backend and frontend applications, enter this command:
 
 ```shell
-kubectl delete deployment frontend hello
+kubectl delete deployment frontend backend
 ```
 
 ## {{% heading "whatsnext" %}}
 
 * Learn more about [Services](/docs/concepts/services-networking/service/)
 * Learn more about [ConfigMaps](/docs/tasks/configure-pod-container/configure-pod-configmap/)
-
+* Learn more about [DNS for Service and Pods](/docs/concepts/services-networking/dns-pod-service/)

content/en/examples/service/access/Dockerfile

@@ -1,4 +1,4 @@
 FROM nginx:1.17.3
 
 RUN rm /etc/nginx/conf.d/default.conf
-COPY frontend.conf /etc/nginx/conf.d
+COPY frontend-nginx.conf /etc/nginx/conf.d

content/en/examples/service/access/hello.yaml renamed to content/en/examples/service/access/backend-deployment.yaml

@@ -1,14 +1,15 @@
+---
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: hello
+  name: backend
 spec:
   selector:
     matchLabels:
       app: hello
       tier: backend
       track: stable
-  replicas: 7
+  replicas: 3
   template:
     metadata:
       labels:
@@ -22,3 +23,4 @@ spec:
           ports:
             - name: http
               containerPort: 80
+...

content/en/examples/service/access/hello-service.yaml renamed to content/en/examples/service/access/backend-service.yaml

@@ -1,3 +1,4 @@
+---
 apiVersion: v1
 kind: Service
 metadata:
@@ -10,3 +11,4 @@ spec:
   - protocol: TCP
     port: 80
     targetPort: http
+...

content/en/examples/service/access/frontend-deployment.yaml

@@ -0,0 +1,27 @@
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: frontend
+spec:
+  selector:
+    matchLabels:
+      app: hello
+      tier: frontend
+      track: stable
+  replicas: 1
+  template:
+    metadata:
+      labels:
+        app: hello
+        tier: frontend
+        track: stable
+    spec:
+      containers:
+        - name: nginx
+          image: "gcr.io/google-samples/hello-frontend:1.0"
+          lifecycle:
+            preStop:
+              exec:
+                command: ["/usr/sbin/nginx","-s","quit"]
+...

content/en/examples/service/access/frontend-nginx.conf

@@ -0,0 +1,14 @@
+# The identifier Backend is internal to nginx, and used to name this specific upstream
+upstream Backend {
+    # hello is the internal DNS name used by the backend Service inside Kubernetes
+    server hello;
+}
+
+server {
+    listen 80;
+
+    location / {
+        # The following statement will proxy traffic to the upstream named Backend
+        proxy_pass http://Backend;
+    }
+}

content/en/examples/service/access/frontend-service.yaml

@@ -0,0 +1,15 @@
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: frontend
+spec:
+  selector:
+    app: hello
+    tier: frontend
+  ports:
+  - protocol: "TCP"
+    port: 80
+    targetPort: 80
+  type: LoadBalancer
+...