Deploy with multiple value files

Dockerfile-nas

@@ -0,0 +1,27 @@
+# Usage:
+#
+# Build image:
+# docker build -t jojozhuang/text-compare-angular-nas -f Dockerfile-nas .
+#
+# Push to docker hub
+# docker push jojozhuang/text-compare-angular-nas
+
+# Stage 1, based on Node.js, to build and compile Angular
+
+FROM node:16.10.0-alpine as builder
+
+WORKDIR /ng-app
+
+COPY package*.json tsconfig*.json angular.json ./
+COPY ./src ./src
+
+RUN npm ci --quiet && npm run build-nas
+
+# Stage 2, based on Nginx, to have only the compiled app, ready for production with Nginx
+
+FROM nginx:1.19.8-alpine
+
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+
+## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
+COPY --from=builder /ng-app/dist /usr/share/nginx/html

Dockerfile-prod

@@ -0,0 +1,27 @@
+# Usage:
+#
+# Build image:
+# docker build -t jojozhuang/text-compare-angular-prod -f Dockerfile-prod .
+#
+# Push to docker hub
+# docker push jojozhuang/text-compare-angular-prod
+
+# Stage 1, based on Node.js, to build and compile Angular
+
+FROM node:16.10.0-alpine as builder
+
+WORKDIR /ng-app
+
+COPY package*.json tsconfig*.json angular.json ./
+COPY ./src ./src
+
+RUN npm ci --quiet && npm run build:aot:prod
+
+# Stage 2, based on Nginx, to have only the compiled app, ready for production with Nginx
+
+FROM nginx:1.19.8-alpine
+
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+
+## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
+COPY --from=builder /ng-app/dist /usr/share/nginx/html

README.md

@@ -177,6 +177,96 @@ kubectl --namespace default port-forward service/compare-helm 8888:80
 
 Then, you are able to access your site through `http://localhost:8888/`.
 
+## Deploy to multiple environments
+
+### Docker images
+
+Create two docker images first, one for `nas`, another for `prod`.
+
+```sh
+docker build -t jojozhuang/text-compare-angular-nas -f Dockerfile-nas .
+docker build -t jojozhuang/text-compare-angular-prod -f Dockerfile-prod .
+```
+
+List all images and make sure `jojozhuang/text-compare-angular-nas` and `jojozhuang/text-compare-angular-prod` are there.
+
+```sh
+docker images
+REPOSITORY TAG IMAGE ID CREATED SIZE
+jojozhuang/text-compare-angular-prod latest 4a53306114f5 4 seconds ago 30.8MB
+jojozhuang/text-compare-angular-nas latest ee561a5e50b3 5 hours ago 30.8MB
+jojozhuang/text-compare-angular latest ee561a5e50b3 5 hours ago 30.8MB
+```
+
+Push to docker hub.
+
+```sh
+docker push jojozhuang/text-compare-angular-nas
+docker push jojozhuang/text-compare-angular-prod
+```
+
+If you don't push them to hub.docker.com, you might get `ErrImagePull` error.
+
+```sh
+kubectl get all -n prod
+NAME READY STATUS RESTARTS AGE
+pod/compare-helm-57f779585d-6c665 0/1 ErrImageNeverPull 0 5s
+pod/compare-helm-6c5668997f-kzk9n 0/1 ErrImagePull 0 105s
+```
+
+### Environment specified value files
+
+Copy `values.yaml` and create for `nas` and `prod` env.
+
+```sh
+kubectl create namespace nas
+kubectl create namespace prod
+```
+
+Check new namespaces `nas` and `prod` are created.
+
+```sh
+kubectl get namespaces
+NAME STATUS AGE
+bit-developer Active 70m
+default Active 6h24m
+kube-node-lease Active 6h24m
+kube-public Active 6h24m
+kube-system Active 6h24m
+kubernetes-dashboard Active 6h23m
+nas Active 14s
+prod Active 13s
+```
+
+Install for nas and prod namespaces.
+
+```sh
+helm install compare-helm-nas deployment --values deployment/values.yaml -f deployment/values-nas.yaml -n nas
+helm install compare-helm-prod deployment --values deployment/values.yaml -f deployment/values-prod.yaml -n prod
+```
+
+List all namespaces.
+
+```sh
+helm ls --all-namespaces
+NAME	NAMESPACE	REVISION	UPDATED	STATUS	CHART	APP VERSION
+compare-helm	default	6	2024-01-07 21:49:34.420836 -0800 PST	deployed	deployment-0.1.0	1.16.0
+compare-helm-nas	nas	1	2024-01-07 22:10:09.473106 -0800 PST	deployed	deployment-0.1.0	1.16.0
+compare-helm-prod	prod	1	2024-01-07 22:10:20.00086 -0800 PST	deployed	deployment-0.1.0	1.16.0
+```
+
+```sh
+kubectl get all -n prod
+kubectl describe pod compare-helm-77ddc9bc6b-xf96c -n prod
+```
+
+```sh
+helm upgrade compare-helm-nas deployment --values deployment/values.yaml -f deployment/values-nas.yaml -n nas
+helm upgrade compare-helm-prod deployment --values deployment/values.yaml -f deployment/values-prod.yaml -n prod
+```
+
+Start nas service and prod service seperately and access `http://localhost:8888/`. You will see the env name on the home page is shown correctly, from `nas` to `production`.
+
 - [How to Create Helm Charts - The Ultimate Guide](https://www.youtube.com/watch?v=jUYNS90nq8U&ab_channel=DevOpsJourney)
 
 # Deployment

deployment/values-nas.yaml

@@ -0,0 +1,10 @@
+namespace: nas
+
+configmap:
+ name: compare-configmap
+ data:
+ ENV_NAME: 'NAS'
+
+image:
+ name: jojozhuang/text-compare-angular-nas
+ tag: latest

deployment/values-prod.yaml

@@ -0,0 +1,10 @@
+namespace: prod
+
+configmap:
+ name: compare-configmap
+ data:
+ ENV_NAME: 'PROD'
+
+image:
+ name: jojozhuang/text-compare-angular-prod
+ tag: latest