vue-storefront in Docker and Kubernetes

custom-environment-variables.json

{
  "api": {
    "url": "API_URL"
  },
  "redis": {
    "host": "REDIS_HOST"
  }
}

Dockerfile

FROM mhart/alpine-node:12

EXPOSE 3000
ENV VS_ENV prod
WORKDIR /var/www

RUN apk add --no-cache make gcc g++ python links bash

COPY . .
RUN yarn install --no-cache

RUN yarn build:client && yarn build:server && yarn build:sw

FROM mhart/alpine-node:slim-12

RUN apk add --no-cache tini
ENTRYPOINT ["/sbin/tini", "--"]

WORKDIR /var/www
COPY --from=0 /var/www .
COPY . .

ENV NODE_ENV production
ENV TS_NODE_PROJECT "tsconfig-build.json"

CMD [ "./node_modules/.bin/pm2-runtime", "start", "ecosystem.json", "$PM2_ARGS"]

helm-templates.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: {{ .Values.name }}
spec:
  replicas: 2
  selector:
    matchLabels:
      app: {{ .Values.name }}
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 0
  template:
    metadata:
      labels:
        app: {{ .Values.name }}
    spec:
      containers:
      - name: {{ .Values.name }}
        image: {{ .Values.image.repository }}:{{ .Values.image.tag }}
        imagePullPolicy: {{ .Values.image.imagePullPolicy }}
        readinessProbe:
          httpGet:
            path: /probe/readiness
            port: {{ .Values.service.targetPort }}
        livenessProbe:
          httpGet:
            path: /probe/liveness
            port: {{ .Values.service.targetPort }}
        envFrom:
          - configMapRef:
              name: {{ .Values.name }}-env
---
apiVersion: v1
kind: Service
metadata:
  name: {{ .Values.name }}
spec:
  type: {{ .Values.service.type }}
  ports:
  - port: {{ .Values.service.port }}
    protocol: TCP
    targetPort: {{ .Values.service.targetPort }}
  selector:
    app: {{ .Values.name }}
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: {{ .Values.name }}-env
data:
  API_URL: {{ .Values.apiUrl }}
  REDIS_HOST: {{ .Values.redis }}
  BUILD_ID: {{ .Values.buildId }}

helm-values.yaml

name: "ui"
image:
  tag: latest
  repository: xxx.dkr.ecr.eu-west-3.amazonaws.com/vsf-ui
  imagePullPolicy: Always

service:
  port: 3000
  targetPort: 3000
  type: LoadBalancer

apiUrl: https://api-url.com
redis: "redis"
buildId: "helm-default"

modules-probe-server.ts

// src/modules/probe/server.ts
import { serverHooks } from '@vue-storefront/core/server/hooks'

serverHooks.afterApplicationInitialized(({ app }) => {
  app.get('/probe/liveness', (req, res) => {
    const content = {
      build_id: process.env.BUILD_ID || 'unknown',
      state: 'up',
      timestamp: Date.now(),
      uptime: process.uptime(),
    }
    res.json(content)
  })
  app.get('/probe/readiness', (req, res) => {
    // TODO (optional): In this check we add more complexity like
    // checking if we can access the redis server and/or the api
    const content = {
      build_id: process.env.BUILD_ID || 'unknown',
      state: 'up',
      timestamp: Date.now(),
      uptime: process.uptime(),
    }
    res.json(content)
  })
})