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

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/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/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
+...

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

@@ -1,11 +0,0 @@
-upstream hello {
-    server hello;
-}
-
-server {
-    listen 80;
-
-    location / {
-        proxy_pass http://hello;
-    }
-}

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

@@ -1,39 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: frontend
-spec:
-  selector:
-    app: hello
-    tier: frontend
-  ports:
-  - protocol: "TCP"
-    port: 80
-    targetPort: 80
-  type: LoadBalancer
----
-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"]