Frontend Kubernetes

.github/workflows/docker-image.yml

@@ -0,0 +1,18 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Build the Frontend Docker image
+      run: docker build . --file packages/frontend/Dockerfile --tag otto-frontend:$(date +%s)

flake.nix

@@ -25,10 +25,11 @@
             pkgs.nodejs-18_x
             pkgs.buildpack
             pkgs.kubernetes-helm
+            pkgs.k9s
         ];
       };
       overlays.default = (final: prev: {
         skaffold = pkgs-unstable.skaffold;
       });
   });
-}
+}

helm/otto/templates/_helpers.tpl

@@ -49,6 +49,10 @@ Selector labels
 app.kubernetes.io/name: {{ include "otto.name" . }}
 app.kubernetes.io/instance: {{ .Release.Name }}
 {{- end }}
+{{- define "otto.selectorLabelsFrontend" -}}
+app.kubernetes.io/name: {{ include "otto.name" . }}-frontend
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
 
 {{/*
 Create the name of the service account to use

helm/otto/templates/deployment.yaml → helm/otto/templates/backend-deployment.yaml

@@ -1,7 +1,7 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: {{ include "otto.fullname" . }}
+  name: {{ include "otto.fullname" . }}-backend
   labels:
     {{- include "otto.labels" . | nindent 4 }}
 spec:

helm/otto/templates/frontend-deployment.yaml

@@ -0,0 +1,42 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "otto.fullname" . }}-frontend
+  labels:
+    {{- include "otto.labels" . | nindent 4 }}
+spec:
+  {{- if not .Values.autoscaling.enabled }}
+  replicas: {{ .Values.frontend.replicaCount }}
+  {{- end }}
+  selector:
+    matchLabels:
+      {{- include "otto.selectorLabelsFrontend" . | nindent 6 }}
+  template:
+    metadata:
+      {{- with .Values.podAnnotations }}
+      annotations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "otto.selectorLabelsFrontend" . | nindent 8 }}
+    spec:
+      serviceAccountName: {{ include "otto.serviceAccountName" . }}
+      containers:
+        - name: {{ .Chart.Name }}-frontend
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.frontend.image.repository }}:{{ .Values.frontend.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.frontend.image.pullPolicy }}
+          ports:
+            - name: http
+              containerPort: {{ .Values.frontend.service.port }}
+              protocol: TCP
+          livenessProbe:
+            httpGet:
+              path: /
+              port: http
+          readinessProbe:
+            httpGet:
+              path: /
+              port: http
+

helm/otto/templates/frontend-service.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "otto.fullname" . }}-frontend
+  labels:
+    {{- include "otto.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.frontend.service.port }}
+      targetPort: http
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "otto.selectorLabelsFrontend" . | nindent 4 }}

helm/otto/values.yaml

@@ -22,7 +22,7 @@ global:
 replicaCount: 1
 
 image:
-  repository: backend
+  repository: ghcr.io/mayflower/otto-backend
   pullPolicy: IfNotPresent
   # Overrides the image tag whose default is the chart appVersion.
   # tag: ""
@@ -65,14 +65,27 @@ service:
   type: ClusterIP
   port: 8080
 
+frontend:
+  service:
+    port: 80
+  replicaCount: 1
+  image: 
+    repository: ghcr.io/mayflower/otto-frontend
+    pullPolicy: IfNotPresent
+
 ingress:
-  enabled: false
-  className: ""
-  annotations: {}
+  enabled: true
+  className: "alb"
+  annotations:
+    alb.ingress.kubernetes.io/listen-ports: '[{"HTTP": 80},{"HTTPS":443}]'
+    alb.ingress.kubernetes.io/ssl-redirect: '443'
+    alb.ingress.kubernetes.io/scheme: internet-facing
+    alb.ingress.kubernetes.io/tags: "Environment=dev,Team=oTTo"
+    alb.ingress.kubernetes.io/target-type: ip
     # kubernetes.io/ingress.class: nginx
     # kubernetes.io/tls-acme: "true"
   hosts:
-    - host: chart-example.local
+    - host: otto-backend.playground.workshop.mayflower.tech
       paths:
         - path: /
           pathType: ImplementationSpecific

infra-todos.md

@@ -0,0 +1,27 @@
+todos 
+
+frontend:
+- build:
+  - openapi anders?
+  buildpacks?
+  direkt docker?
+  über maven?
+deploy
+ nginx prod vs dev container?
+ - postgres: wir stellen code für dev bereit, den leute optional für prod hernehmen könnten, wir rechnen aber nicht damit
+
+setup
+ - minikube (1.02 GB) durch kind/k3s ersetzen? (Install-Größe und Performanz)
+  - Findings:
+    - Kind ist unwesentlich kleiner (823 MB), und es ist deutlich umständlicher, ein Kubernetes-Dashboard zum laufen zu bekommen
+    - k3s läuft nicht auf MacOS
+    - k3d wesentlich kleiner in images: 161 + 39 + 18 MB, schnell
+    -> k3d könnte sich lohnen, wenn aufsetzen reibungslos geht
+
+skaffold-zeug:
+ - FileSync, damit nicht immer neu gebaut werden muss
+
+ backend:
+- Warum funktionieren probes nicht?
+- liquibase in initcontainer
+- https://redhat-scholars.github.io/spring-boot-k8s-tutorial/spring-boot-tutorial/03-kubernetes.html

packages/frontend/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+generated-sources
+dist

packages/frontend/.gitignore

@@ -31,3 +31,5 @@ coverage
 
 test-results/
 playwright-report/
+
+target

packages/frontend/Dockerfile

@@ -0,0 +1,34 @@
+FROM openapitools/openapi-generator-cli:v6.4.0 AS openapigenerator_builder
+
+RUN mkdir -p /app/generated-sources/client
+COPY packages/api-spec/openapi.yml /app/openapi.yml
+WORKDIR /app/generated-sources/client
+RUN /usr/local/bin/docker-entrypoint.sh \
+    generate -i /app/openapi.yml -g typescript-axios -o . \
+    --additional-properties=npmName=rest-client,withInterface=true,supportsES6=true
+
+# https://openapi-generator.tech/docs/generators/typescript-axios/
+# https://openapi-generator.tech/docs/installation#docker
+
+FROM node:alpine3.17 AS frontend_builder_prod
+
+RUN mkdir -p /app
+WORKDIR /app
+
+# copy the generated openapi-client
+COPY --from=openapigenerator_builder /app/generated-sources/client /app/generated-sources/client
+
+# install npm dependencies
+COPY packages/frontend/package*.json ./
+RUN npm install
+
+#  build frontend
+WORKDIR /app
+COPY packages/frontend ./
+RUN npm run build
+
+
+FROM nginx:latest as webserver_prod
+
+COPY --from=frontend_builder_prod /app/dist /usr/share/nginx/html
+EXPOSE 80