feat: add helm charts and docker image to deploy IFRC GO UI storybook

.github/workflows/publish-nginx-serve.yml

@@ -36,7 +36,7 @@ jobs:
         env:
           IMAGE_NAME: ghcr.io/${{ github.repository }}
         run: |
-          BRANCH_NAME=$(echo $GITHUB_REF_NAME | sed 's|:|-|' | tr '[:upper:]' '[:lower:]' | sed 's/_/-/g' | cut -c1-100 | sed 's/-*$//')
+          BRANCH_NAME=$(echo $GITHUB_REF_NAME | sed 's|[/:]|-|' | tr '[:upper:]' '[:lower:]' | sed 's/_/-/g' | cut -c1-100 | sed 's/-*$//')
 
           # XXX: Check if there is a slash in the BRANCH_NAME eg: project/add-docker
           if [[ "$BRANCH_NAME" == *"/"* ]]; then

.github/workflows/publish-storybook-nginx-serve.yml

@@ -0,0 +1,127 @@
+name: 🚀 Publish Storybook nginx serve image
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+
+permissions:
+  packages: write
+
+
+jobs:
+  publish_image:
+    name: Publish Docker Image
+    runs-on: ubuntu-latest
+
+    outputs:
+      docker_image_name: ${{ steps.prep.outputs.tagged_image_name }}
+      docker_image_tag: ${{ steps.prep.outputs.tag }}
+      docker_image: ${{ steps.prep.outputs.tagged_image }}
+
+    steps:
+      - uses: actions/checkout@main
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 🐳 Prepare Docker
+        id: prep
+        env:
+          IMAGE_NAME: ghcr.io/${{ github.repository }}/packages/go-ui-storybook
+        run: |
+          BRANCH_NAME=$(echo $GITHUB_REF_NAME | sed 's|[/:]|-|' | tr '[:upper:]' '[:lower:]' | sed 's/_/-/g' | cut -c1-100 | sed 's/-*$//')
+          TAG="$BRANCH_NAME.$(echo $GITHUB_SHA | head -c7)"
+          IMAGE_NAME=$(echo $IMAGE_NAME | tr '[:upper:]' '[:lower:]')
+          echo "tagged_image_name=${IMAGE_NAME}" >> $GITHUB_OUTPUT
+          echo "tag=${TAG}" >> $GITHUB_OUTPUT
+          echo "tagged_image=${IMAGE_NAME}:${TAG}" >> $GITHUB_OUTPUT
+          echo "::notice::Tagged docker image: ${IMAGE_NAME}:${TAG}"
+
+      - name: 🐳 Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: 🐳 Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.ref }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-refs/develop
+            ${{ runner.os }}-buildx-
+
+      - name: 🐳 Docker build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          builder: ${{ steps.buildx.outputs.name }}
+          file: packages/go-ui-storybook/nginx-serve/Dockerfile
+          target: nginx-serve
+          load: true
+          push: true
+          tags: ${{ steps.prep.outputs.tagged_image }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+
+      - name: 🐳 Move docker cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+
+  publish_helm:
+    name: ⎈ Publish Helm
+    needs: publish_image
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: ⎈ Install Helm
+      uses: azure/setup-helm@v3
+
+    - name: ⎈ Tag docker image in Helm Chart values.yaml
+      env:
+        IMAGE_NAME: ${{ needs.publish_image.outputs.docker_image_name }}
+        IMAGE_TAG: ${{ needs.publish_image.outputs.docker_image_tag }}
+      run: |
+        # Update values.yaml with latest docker image
+        sed -i "s|SET-BY-CICD-IMAGE|$IMAGE_NAME|" packages/go-ui-storybook/nginx-serve/helm/values.yaml
+        sed -i "s/SET-BY-CICD-TAG/$IMAGE_TAG/" packages/go-ui-storybook/nginx-serve/helm/values.yaml
+
+    - name: ⎈ Package Helm Chart
+      id: set-variables
+      run: |
+        SHA_SHORT=$(git rev-parse --short HEAD)
+        sed -i "s/SET-BY-CICD/$SHA_SHORT/g" packages/go-ui-storybook/nginx-serve/helm/Chart.yaml
+        helm package ./packages/go-ui-storybook/nginx-serve/helm -d .helm-charts
+
+    - name: ⎈ Push Helm Chart
+      env:
+        IMAGE: ${{ needs.publish_image.outputs.docker_image }}
+        OCI_REPO: oci://ghcr.io/${{ github.repository }}
+      run: |
+        OCI_REPO=$(echo $OCI_REPO | tr '[:upper:]' '[:lower:]')
+        PACKAGE_FILE=$(ls .helm-charts/*.tgz | head -n 1)
+        echo "##🚀 IFRC GO UI Helm Chart 🚀" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "🐳 Tagged Image: **$IMAGE**" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "⎈ Helm push output" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo '```bash' >> $GITHUB_STEP_SUMMARY
+        helm push "$PACKAGE_FILE" $OCI_REPO >> $GITHUB_STEP_SUMMARY
+        echo '```' >> $GITHUB_STEP_SUMMARY

app/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-bullseye
+FROM node:20-bullseye
 
 RUN apt-get update -y \
     && apt-get install -y --no-install-recommends \

nginx-serve/Dockerfile

@@ -1,7 +1,7 @@
 # syntax=docker/dockerfile:1-labs
 
 # -------------------------- Dev ---------------------------------------
-FROM node:18-bullseye AS dev
+FROM node:20-bullseye AS dev
 
 RUN apt-get update -y \
     && apt-get install -y --no-install-recommends \

package.json

@@ -18,7 +18,7 @@
         "generate:type": "pnpm -F go-web-app generate:type",
         "preview": "pnpm -F go-web-app preview",
         "storybook": "pnpm -F go-ui-storybook storybook",
-        "build-storybook": "pnpm -F go-ui-storybook build-storybook",
+        "build-storybook": "pnpm build:ui && pnpm -F go-ui-storybook build-storybook",
         "chromatic": "pnpm -F go-ui-storybook chromatic"
     },
     "engines": {

packages/go-ui-storybook/nginx-serve/Dockerfile

@@ -0,0 +1,41 @@
+# syntax=docker/dockerfile:1-labs
+
+# -------------------------- Dev ---------------------------------------
+FROM node:20-bullseye AS dev
+
+RUN apt-get update -y \
+    && apt-get install -y --no-install-recommends \
+        git bash g++ make \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN npm install -g pnpm
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /code
+
+RUN git config --global --add safe.directory /code
+
+# -------------------------- Nginx - Builder --------------------------------
+FROM dev AS nginx-build
+
+# NOTE: --parents is not yet available in stable syntax, using docker/dockerfile:1-labs
+COPY --parents package.json pnpm-lock.yaml pnpm-workspace.yaml ./**/package.json patches/ /code/
+
+RUN pnpm install
+
+COPY ./packages/ui /code/packages/ui
+COPY ./packages/go-ui-storybook /code/packages/go-ui-storybook
+
+RUN pnpm build-storybook
+
+# ---------------------------------------------------------------------------
+FROM nginx:alpine AS nginx-serve
+
+LABEL maintainer="IFRC"
+LABEL org.opencontainers.image.source="https://github.com/IFRCGo/go-web-app/tree/develop/packages/go-ui-storybook"
+
+COPY ./packages/go-ui-storybook/nginx-serve/nginx.conf.template /etc/nginx/templates/default.conf.template
+COPY --from=nginx-build /code/packages/go-ui-storybook/storybook-static /usr/share/nginx/html

packages/go-ui-storybook/nginx-serve/helm/Chart.yaml

@@ -0,0 +1,7 @@
+apiVersion: v2
+name: ifrcgo-ui-storybook-nginx-serve
+description: "Helm Chart to deploy the IFRC GO UI Storybook"
+type: application
+version: 0.0.1-SET-BY-CICD
+sources:
+  - https://github.com/IFRCGo/go-web-app/tree/develop/packages/go-ui-storybook

packages/go-ui-storybook/nginx-serve/helm/templates/_helpers.tpl

@@ -0,0 +1,32 @@
+{{/*
+    Expand the name of the chart.
+*/}}
+{{- define "ifrcgo-ui-storybook.name" -}}
+    {{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" -}}
+{{- end -}}
+
+{{/*
+    Create a default fully qualified app name.
+    We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+    If release name contains chart name it will be used as a full name.
+    https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#dns-label-names
+*/}}
+{{- define "ifrcgo-ui-storybook.fullname" -}}
+    {{- if .Values.fullnameOverride -}}
+        {{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" -}}
+    {{- else -}}
+        {{- $name := default .Chart.Name .Values.nameOverride -}}
+        {{- if contains $name .Release.Name -}}
+            {{- .Release.Name | trunc 63 | trimSuffix "-" -}}
+        {{- else -}}
+            {{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" -}}
+        {{- end -}}
+    {{- end -}}
+{{- end -}}
+
+{{/*
+    Create chart name and version as used by the chart label.
+*/}}
+{{- define "ifrcgo-ui-storybook.chart" -}}
+    {{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" -}}
+{{- end -}}

packages/go-ui-storybook/nginx-serve/helm/templates/deployment.yaml

@@ -0,0 +1,35 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ template "ifrcgo-ui-storybook.fullname" . }}
+  labels:
+    environment: {{ .Values.environment }}
+    release: {{ .Release.Name }}
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: {{ template "ifrcgo-ui-storybook.name" . }}
+      release: {{ .Release.Name }}
+      run: {{ .Release.Name }}
+  template:
+    metadata:
+      labels:
+        app: {{ template "ifrcgo-ui-storybook.name" . }}
+        release: {{ .Release.Name }}
+        run: {{ .Release.Name }}
+    spec:
+      containers:
+        - name: {{ .Chart.Name }}
+          image: "{{ .Values.image.name }}:{{ .Values.image.tag }}"
+          ports:
+            - name: http
+              containerPort: 80
+              protocol: TCP
+          resources:
+            requests:
+              cpu: {{ .Values.resources.requests.cpu }}
+              memory: {{ .Values.resources.requests.memory }}
+            limits:
+              cpu: {{ .Values.resources.limits.cpu }}
+              memory: {{ .Values.resources.limits.memory }}

packages/go-ui-storybook/nginx-serve/helm/templates/ingress.yaml

@@ -0,0 +1,20 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: {{ template "ifrcgo-ui-storybook.fullname" . }}-ingress
+  labels:
+    app: {{ template "ifrcgo-ui-storybook.name" . }}
+    release: {{ .Release.Name }}
+spec:
+  ingressClassName: nginx
+  rules:
+    - host: {{ required "ingress.host" .Values.ingress.host | quote }}
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: {{ template "ifrcgo-ui-storybook.fullname" . }}-svc
+                port:
+                  number: 80

packages/go-ui-storybook/nginx-serve/helm/templates/service.yaml

@@ -0,0 +1,18 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ template "ifrcgo-ui-storybook.fullname" . }}-svc
+  labels:
+    app: {{ template "ifrcgo-ui-storybook.name" . }}
+    environment: {{ .Values.environment }}
+    release: {{ .Release.Name }}
+spec:
+  type: ClusterIP
+  selector:
+    app: {{ template "ifrcgo-ui-storybook.name" . }}
+    release: {{ .Release.Name }}
+    run: {{ .Release.Name }}
+  ports:
+    - protocol: TCP
+      port: 80
+      targetPort: 80

packages/go-ui-storybook/nginx-serve/helm/values.yaml

@@ -0,0 +1,16 @@
+environment: prod
+
+image:
+  name: SET-BY-CICD-IMAGE
+  tag: SET-BY-CICD-TAG
+
+resources:
+  requests:
+    cpu: "0.5"
+    memory: "100Mi"
+  limits:
+    cpu: "1"
+    memory: "100Mi"
+
+ingress:
+  host:

packages/go-ui-storybook/nginx-serve/nginx.conf.template

@@ -0,0 +1,18 @@
+# vim: filetype=nginx
+
+server {
+    listen 80;
+    server_name _;
+
+    gzip on;
+    gzip_comp_level 4;
+
+    gzip_types text/plain text/css application/json
+        application/x-javascript text/xml application/xml
+        application/xml+rss text/javascript;
+
+    location / {
+        alias $APPLY_CONFIG__DESTINATION_DIRECTORY;
+        try_files $uri /index.html;
+    }
+}