build: rework local docker builds

.dockerignore

@@ -9,5 +9,8 @@ README.md
 node_modules
 build
 
+node_modules
+build
+
 # Envs
-**/.env.local
+**/.env.local

.github/workflows/docker-image.yaml

@@ -90,16 +90,34 @@ jobs:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
+      - 
+        name: Cache
+        uses: actions/cache@v4
+        id: cache
+        with:
+          path: |
+            yarn-cache
+          key: cache-${{ hashFiles('**/yarn.lock') }}
+      - 
+        name: inject cache into docker
+        uses: reproducible-containers/[email protected]
+        with:
+          cache-map: |
+            {
+              "yarn-cache": "/home/.yarn"
+            }
+          skip-extraction: ${{ steps.cache.outputs.cache-hit }}
       -
         name: Build and push
         uses: docker/build-push-action@v5
         with:
           context: .
           platforms: linux/amd64,linux/arm64
-          # platforms: linux/amd64
           build-args: |
             "LAGOON_VERSION=${{ env.VERSION }}"
             "BUILD=${{ env.BUILD }}"
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -1,31 +1,44 @@
 # Node builder image
-FROM uselagoon/node-20-builder:latest AS builder
+FROM uselagoon/node-20-builder:latest AS local-dev
 
-COPY . /app/
+# Copy only what we need into the image
+COPY ./src/ /app/src
+COPY server.js .
+COPY plugins.json .
+COPY package.json .
+COPY yarn.lock .
+COPY tour.json .
+COPY tourHash.js .
 
-RUN yarn install --network-timeout 300000
+# Upgrade the yarn version in /app to the most recent to take advantage of new features 
+RUN yarn set version berry
 
-
-# Node service image
-FROM uselagoon/node-20:latest
+# use a buildkit cache for yarn - this is reused in later steps
+RUN --mount=type=cache,target=/home/.yarn YARN_CACHE_FOLDER=/home/.yarn yarn install --network-timeout 300000
 
 ARG LAGOON_VERSION
+ARG GRAPHQL_API
+ARG KEYCLOAK_API
 ENV LAGOON_VERSION=$LAGOON_VERSION
+ENV GRAPHQL_API=$GRAPHQL_API
+ENV KEYCLOAK_API=$KEYCLOAK_API
 
-# Copy the node_modules from node builder
-COPY --from=builder /app/node_modules /app/node_modules
+# Use an intermediate image to build and trim the production image
+FROM uselagoon/node-20:latest AS prod-builder
 
-# Copying files from ui service
-COPY . /app/
+# Copy the whole /app folder from dev
+COPY --from=local-dev /app/ /app/
 
-ARG KEYCLOAK_API
-ENV KEYCLOAK_API=$KEYCLOAK_API
+# Build app
+RUN --mount=type=cache,target=/home/.yarn YARN_CACHE_FOLDER=/home/.yarn yarn run build
+# Remove any node_modules in DevDependencies not needed for production
+RUN --mount=type=cache,target=/home/.yarn YARN_CACHE_FOLDER=/home/.yarn yarn workspaces focus -A --production
 
-ARG GRAPHQL_API
-ENV GRAPHQL_API=$GRAPHQL_API
+# Build the final production image
+FROM uselagoon/node-20:latest AS prod
 
-# Build app
-RUN yarn run build
+# Copy the whole /app folder from prod-builder
+COPY --from=prod-builder /app/ /app/
 
 EXPOSE 3000
 CMD ["yarn", "start"]

README.md

@@ -21,7 +21,14 @@ These values can also be updated in `docker-compose.yml`.
 
 ### Docker
 
-Note: Within `docker-compose.yml` `GRAPHQL_API` & `KEYCLOAK_API` will need to be set to
+Docker Compose is configured to deploy two services locally:
+
+- dev (0.0.0.0:3003): A live updating development build, using volumes to mount from /src and rebuild-on the fly
+- ui (0.0.0.0:3000): A built, production ready implementation of the code in the repo
+
+Lagoon will only deploy the "ui" version into a cluster.
+
+Note: Within `docker-compose.yml` `GRAPHQL_API` & `KEYCLOAK_API` will need to be set to:
 
 ```
   GRAPHQL_API: "${GRAPHQL_API:-https://api.lagoon.amazeeio.cloud/graphql}"

docker-compose.local-dev.yaml

@@ -0,0 +1,27 @@
+version: '3.2'
+
+services:
+  ui:
+    build:
+      context: .
+      target: local-dev
+      dockerfile: Dockerfile
+    labels:
+      lagoon.type: none
+    command: yarn run dev
+    volumes:
+      - ./src:/app/src
+      - ./.env.defaults:/app/.env.defaults
+      - ./.env.schema:/app/.env.schema
+      - ./package.json:/app/package.json
+    ports:
+      - '3003:3003'
+    networks:
+      - default
+    environment:
+      LAGOON_ROUTE: http://lagoon-ui.docker.amazee.io
+      LAGOON_UI_TOURS_ENABLED: true
+      NODE_ENV: development
+      GRAPHQL_API: "${GRAPHQL_API:-http://0.0.0.0:3000/graphql}"
+      KEYCLOAK_API: "${KEYCLOAK_API:-http://0.0.0.0:8088/auth}"
+

docker-compose.yml

@@ -1,35 +1,21 @@
 version: '3.2'
 
-x-lagoon-project:
-  # Lagoon project name (leave `&lagoon-project` when you edit this)
-  &lagoon-project lagoon-ui
-
-x-environment: &default-environment
-  LAGOON_PROJECT: *lagoon-project
-  # Route that should be used locally, if you are using pygmy, this route *must* end with .docker.amazee.io
-  LAGOON_ROUTE: &default-url http://lagoon-ui.docker.amazee.io
-  # Uncomment if you like to have the system behave like in production
-  LAGOON_ENVIRONMENT_TYPE: production
-  GRAPHQL_API: "${GRAPHQL_API:-http://0.0.0.0:3000/graphql}"
-  KEYCLOAK_API: "${KEYCLOAK_API:-http://0.0.0.0:8088/auth}"
-  LAGOON_UI_TOURS_ENABLED: enabled
-
 services:
   ui:
     build:
       context: .
+      target: prod
       dockerfile: Dockerfile
     labels:
       lagoon.type: node
-    command: yarn run dev
-    volumes:
-      - ./src:/app/src
-      - ./.env.defaults:/app/.env.defaults
-      - ./.env.schema:/app/.env.schema
-      - ./package.json:/app/package.json
+    command: yarn run start
     ports:
-      - '3003:3003'
+      - '3000:3000'
     networks:
       - default
     environment:
-      <<: *default-environment
+      LAGOON_ROUTE: http://lagoon-ui.docker.amazee.io
+      LAGOON_UI_TOURS_ENABLED: false
+      NODE_ENV: production
+      GRAPHQL_API: "${GRAPHQL_API:-https://api.lagoon.amazeeio.cloud/graphql}"
+      KEYCLOAK_API: "${KEYCLOAK_API:-https://keycloak.amazeeio.cloud/auth}"

src/pages/_app.js

@@ -27,7 +27,7 @@ import Tour from '../tours/Tour';
 import { TourContextProvider } from '../tours/TourContext';
 
 const { LAGOON_UI_TOURS_ENABLED } = getConfig().publicRuntimeConfig;
-const tourEnabled = LAGOON_UI_TOURS_ENABLED === 'enabled';
+const tourEnabled = LAGOON_UI_TOURS_ENABLED === 'true';
 
 // lazy load animation features
 const loadFeatures = () => import('components/common/features').then(res => res.default);

src/tours/TourControlBtn.tsx

@@ -13,7 +13,7 @@ import { TourContext, TourContextType } from './TourContext';
  */
 
 const { LAGOON_UI_TOURS_ENABLED } = getConfig().publicRuntimeConfig;
-const tourEnabled = LAGOON_UI_TOURS_ENABLED === 'enabled';
+const tourEnabled = LAGOON_UI_TOURS_ENABLED === 'true';
 
 const TourControlBtn = () => {
   let skipped,