Apply the script:
kubectl apply -f https://gist.githubusercontent.com/pbochynski/059a9c2308c764d1991b45855083343c/raw/nginx-with-config-map.yaml
Start kubernetes proxy:
kubectl proxy
Open the web application: http://127.0.0.1:8001/api/v1/namespaces/default/services/nginx-service/proxy/
| apiVersion: v1 | |
| kind: ConfigMap | |
| metadata: | |
| name: nginx-config | |
| namespace: default | |
| data: | |
| index.html: | | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sample NGINX Page</title> | |
| <script src="index.js"></script> | |
| </head> | |
| <body> | |
| <h1>Welcome to NGINX</h1> | |
| <div id="data"></div> | |
| </body> | |
| </html> | |
| index.js: | | |
| document.addEventListener("DOMContentLoaded", function() { | |
| fetch('data.json') | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById("data").innerText = `${data.message} (Status: ${data.status})`; | |
| }); | |
| }); | |
| data.json: | | |
| { | |
| "message": "Hello, this is a mock endpoint!", | |
| "status": "success" | |
| } | |
| --- | |
| apiVersion: apps/v1 | |
| kind: Deployment | |
| metadata: | |
| name: nginx-deployment | |
| namespace: default | |
| spec: | |
| replicas: 1 | |
| selector: | |
| matchLabels: | |
| app: nginx | |
| template: | |
| metadata: | |
| labels: | |
| app: nginx | |
| spec: | |
| containers: | |
| - name: nginx | |
| image: nginx:latest | |
| ports: | |
| - containerPort: 80 | |
| volumeMounts: | |
| - name: nginx-config-volume | |
| mountPath: /usr/share/nginx/html | |
| volumes: | |
| - name: nginx-config-volume | |
| configMap: | |
| name: nginx-config | |
| --- | |
| apiVersion: v1 | |
| kind: Service | |
| metadata: | |
| name: nginx-service | |
| namespace: default | |
| spec: | |
| selector: | |
| app: nginx | |
| ports: | |
| - protocol: TCP | |
| port: 80 | |
| targetPort: 80 | |
| type: ClusterIP |