Frontend local development with Docker and K3s

#### General Rules

- [ ] **No shared database between different services** - a DB instance should only be used by one service exclusively.
- [ ] **Not breaking the one-hop rule** - _“By default, a service should not call other services to respond to a request, except in exceptional circumstances.”_. The exception can be for example Backend For Frontend (like GraphQL) which can compose and aggregate data on top of other services.
- [ ] **Prefer APIs to Sharing SDKs**. Try to avoid using SDKs between the services, it is not needed.

#### Documentation

- [ ] **README.md** - self-explanatory service name, how to run it locally and domain/subdomain, bounded context described
- [ ] **Project documentation** - if possible should be kept with a code
- [ ] **Architecture docs / [C4 Model diagrams](https://c4model.com/)**
- [ ] **Development docs** - more detailed version of service development documentation than **README.md** which will be used by new developers to start development of the service and for other teams to cooperate with development team.
- [ ] **API Open Specification** file in root directory or other location known by everyone: `openapi.yaml` file
- [ ] **API versioning** - if needed

#### Testing and Quality

- [ ] **Linters** (with reports that can be exported to e.g. SonarQube)
- [ ] **Automatic code Formatter or code Format Checkers** (e.g. gofmt, ktfmt)
- [ ] **Test coverage above 70%** (use common sense, just getting to the required number of coverage is not a goal here)
- [ ] **Functional/e2e/acceptance tests** in place
- [ ] **Load Tests** (at least basic ones) especially if higher traffic is expected
- [ ] **Contract Tests** are recommended if there is service-to-service communication via HTTP (example: [PACT tests](https://docs.pact.io/))

#### Observability

- [ ] **Logging** in general https://12factor.net/logs
- [ ] **All logs are written to STDOUT / STDERR**.
- [ ] **Logs are written in JSON**.
- [ ] **No sensitive data is logged**
- [ ] **Monitoring**
- [ ] Integration with a monitoring platforms and Dashboards in place.
- [ ] Business metrics added to the dashboards
- [ ] **Tracing**
- [ ] **Distributed tracing configured**
- [ ] **Error tracking configured**
- [ ] **Alerts are configured**

#### Operations and Resiliency

- [ ] **Staging environment exists**
- [ ] There is **autoscaling** in place (based on CPU, memory, traffic, events/messages e.g. HPA with K8S)
- [ ] **Graceful shutdown**: The application understands SIGTERM and other signals and will gracefully shut down itself after processing the current task. https://12factor.net/disposability
- [ ] **Configuration via environment**: All important configuration options are read from the environment and the environment has higher priority over configuration files (but lower than the command line arguments). https://12factor.net/config
- [ ] **Health Checks**: Readiness and Liveness probes
- [ ] **Define [SLO/SLI/SLA](https://cloud.google.com/blog/products/devops-sre/sre-fundamentals-slis-slas-and-slos)**
- [ ] Build applications with **Multi-tenancy** in mind (sites, regions, users, etc.)

#### Security and Compliance

- [ ] If your service does need to be accessible through the public Internet
- [ ] **Authentication/Authorization** in place if needed / JWT / Cognito / Auth0
- [ ] Ensure it lives behind our Cloudfront **CDN** (and uses WAF if necessary)
- [ ] **Vulnerabilities scan check**
- [ ] **Does not violate any licenses**
- [ ] **GDPR** data not exposed (https://gdpr-info.eu/art-4-gdpr/)
- [ ] **PII data not logged or stored without any good reason** (ask your DPO) - [Best practices to avoid sending Personally Identifiable Information (PII)](https://support.google.com/adsense/answer/6156630?hl=en), Check Data Retention Policies

k3d cluster create bookCluster --api-port 6443 --servers 1 --agents 3 -p "30700-30799:30700-30799@server:0"

INFO[0000] Prep: Network
INFO[0000] Created network 'k3d-bookCluster'
INFO[0000] Created image volume k3d-bookCluster-images
INFO[0000] Starting new tools node...
INFO[0000] Pulling image 'ghcr.io/k3d-io/k3d-tools:5.8.3'
INFO[0001] Creating node 'k3d-bookCluster-server-0'
INFO[0002] Starting node 'k3d-bookCluster-tools'
INFO[0002] Pulling image 'docker.io/rancher/k3s:v1.31.5-k3s1'
INFO[0004] Creating node 'k3d-bookCluster-agent-0'
INFO[0004] Creating node 'k3d-bookCluster-agent-1'
INFO[0004] Creating node 'k3d-bookCluster-agent-2'
INFO[0004] Creating LoadBalancer 'k3d-bookCluster-serverlb'
INFO[0006] Pulling image 'ghcr.io/k3d-io/k3d-proxy:5.8.3'
INFO[0009] Using the k3d-tools node to gather environment information
INFO[0009] HostIP: using network gateway 192.168.96.1 address
INFO[0009] Starting cluster 'bookCluster'
INFO[0009] Starting servers...
INFO[0009] Starting node 'k3d-bookCluster-server-0'
INFO[0011] Starting agents...
INFO[0011] Starting node 'k3d-bookCluster-agent-1'
INFO[0011] Starting node 'k3d-bookCluster-agent-2'
INFO[0011] Starting node 'k3d-bookCluster-agent-0'
INFO[0020] Starting helpers...
INFO[0020] Starting node 'k3d-bookCluster-serverlb'
INFO[0027] Injecting records for hostAliases (incl. host.k3d.internal) and for 5 network members into CoreDNS configmap...
INFO[0029] Cluster 'bookCluster' created successfully!
INFO[0029] You can now use it like this:
kubectl cluster-info

kubectl cluster-info

Kubernetes control plane is running at https://0.0.0.0:6443
CoreDNS is running at https://0.0.0.0:6443/api/v1/namespaces/kube-system/services/kube-dns:dns/proxy
Metrics-server is running at https://0.0.0.0:6443/api/v1/namespaces/kube-system/services/https:metrics-server:https/proxy

To further debug and diagnose cluster problems, use 'kubectl cluster-info dump'.

A server node is defined as a host running the k3s server command, with control-plane and datastore components managed by K3s. An agent node is defined as a host running the k3s agent command, without any datastore or control-plane components. Both servers and agents run the kubelet, container runtime, and CNI.

kubectl get nodes

NAME                       STATUS   ROLES                  AGE     VERSION
k3d-bookcluster-agent-0    Ready    <none>                 3m18s   v1.31.5+k3s1
k3d-bookcluster-agent-1    Ready    <none>                 3m18s   v1.31.5+k3s1
k3d-bookcluster-agent-2    Ready    <none>                 3m16s   v1.31.5+k3s1
k3d-bookcluster-server-0   Ready    control-plane,master   3m26s   v1.31.5+k3s1

docker ps

CONTAINER ID   IMAGE                            COMMAND                  CREATED         STATUS                  PORTS                                                                                                     NAMES
ac51320054ee   ghcr.io/k3d-io/k3d-proxy:5.8.3   "/bin/sh -c nginx-pr…"   4 minutes ago   Up 4 minutes            0.0.0.0:6443->6443/tcp, 80/tcp, 0.0.0.0:30700-30799->30700-30799/tcp, [::]:30700-30799->30700-30799/tcp   k3d-bookCluster-serverlb
9e175c325957   rancher/k3s:v1.31.5-k3s1         "/bin/k3d-entrypoint…"   4 minutes ago   Up 4 minutes                                                                                                                      k3d-bookCluster-agent-2
5d7c8c7a75fd   rancher/k3s:v1.31.5-k3s1         "/bin/k3d-entrypoint…"   4 minutes ago   Up 4 minutes                                                                                                                      k3d-bookCluster-agent-1
458d2bd68ad9   rancher/k3s:v1.31.5-k3s1         "/bin/k3d-entrypoint…"   4 minutes ago   Up 4 minutes                                                                                                                      k3d-bookCluster-agent-0
6fd8951e88a8   rancher/k3s:v1.31.5-k3s1         "/bin/k3d-entrypoint…"   4 minutes ago   Up 4 minutes                                                                                                                      k3d-bookCluster-server-0

kubectl create namespace services

namespace/services created

helm repo add book-service https://gitlab.com/api/v4/projects/81999726/packages/helm/stable

"book-service" has been added to your repositories

helm search repo -l book-service/book-service

helm repo update book-service

#!/usr/bin/env bash
set -e
kubectx k3d-bookCluster (1)
./build-multi-stage-container.sh (2)
docker pull postgres:14-alpine
k3d image import -c bookCluster book-list:latest (3)
k3d image import -c bookCluster postgres:14-alpine
helm upgrade -i -f secrets/k3s-values.yaml --namespace=services k3s-book-list book-service/book-service --version 0.7.0 --dry-run --debug (4)
helm upgrade -i -f secrets/k3s-values.yaml --namespace=services k3s-book-list book-service/book-service --version 0.7.0 --wait (5)

docker buildx ls

NAME/NODE     DRIVER/ENDPOINT   STATUS    BUILDKIT   PLATFORMS
default*      docker
\_ default    \_ default       running   v0.21.0    linux/amd64 (+4), linux/386

docker buildx create --name multiarch --driver docker-container --use

docker-compose -f compose-local.yml up -d

[+] up 10/10
 ✔ Network book-frontend_book-frontend                Created                                                                                                                                                                     0.0s
 ✔ Container book-frontend-book-bff-1                 Started                                                                                                                                                                     0.2s
 ✔ Container book-frontend-swagger-editor-1           Started                                                                                                                                                                     0.3s
 ✔ Container book-frontend-swagger-ui-1               Started                                                                                                                                                                     0.4s
 ✔ Container book-frontend-book-admin-1               Started                                                                                                                                                                     0.3s
 ✔ Container book-frontend-redis-1                    Started                                                                                                                                                                     0.3s
 ✔ Container book-frontend-book-list-db-1             Started                                                                                                                                                                     0.3s
 ✔ Container book-frontend-book-admin-mongo-express-1 Started                                                                                                                                                                     0.3s
 ✔ Container book-frontend-book-admin-db-1            Started                                                                                                                                                                     0.3s
 ✔ Container book-frontend-book-list-1                Started

./scripts/local-test.sh

./scripts/build.sh

./scripts/serve.sh

  VITE v7.1.2  ready in 129 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

import axios from 'axios'

const apiClient = axios.create({
  baseURL: '/',
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

export default {
  loadConfiguration() {
    return apiClient.get('config/local.env.json')
  }
}

{
    "api-url": "http://localhost:8881"
}

import { defineStore } from 'pinia'
import { ref } from 'vue'
import ConfigService from '@/services/ConfigService'

export const useConfigStore = defineStore(
  'ConfigStore',
  () => {
    const configuration = ref({
      apiUrl: ''
    })
    const error = ref('')

    async function loadConfiguration() {
      try {
        if (!configuration.value.apiUrl) {
          const res = await ConfigService.loadConfiguration()
          configuration.value.apiUrl = res.data['api-url']
        }
      } catch (e) {
        console.log(e)
      }
    }
    return { configuration, error, loadConfiguration }
  },
  {
    persist: {
      storage: localStorage
    }
  }
)

import axios from 'axios'
import { useConfigStore } from '@/store/ConfigStore'

const apiClient = axios.create({
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

export default {
  async registerUser(user) {
    const configStore = useConfigStore() (1)
    await configStore.loadConfiguration() (2)
    return apiClient.post(configStore.configuration.apiUrl + '/book-admin/v1/admins', user) (3)
  },
  async loginUser(loginData) {
    const configStore = useConfigStore()
    await configStore.loadConfiguration()
    console.log(configStore.configuration.apiUrl)
    console.log(loginData)
    return apiClient.post(configStore.configuration.apiUrl + '/v1/login', loginData)
  }
}

{
    "api-url": "https://books-api.sandbox.gcp.cloud.devops-training.info"
}

docker-compose -f compose-local.yml down

docker-compose -f compose-mocked.yml up -d

./scripts/serve.sh

docker-compose -f compose-mocked.yml down

./scripts/build-single-stage-container.sh

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
FROM registry.gitlab.com/devops-training-info/examples/docker/node-yarn:26.1.0 AS builder (1)
WORKDIR /build
ADD . ./
COPY secrets/local.env.json public/config/local.env.json
RUN ./build.sh (2)

FROM nginx:alpine (3)
RUN mkdir /app
COPY --from=builder /build/dist /app (4)
COPY nginx.conf /etc/nginx/nginx.conf (5)

docker-compose -f compose-test.yml build

docker-compose -f compose-test.yml up

./scripts/deploy-k3s.sh

k9s -n services