build: update docker build workflow

Author: tobybellwood

.dockerignore

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

.github/workflows/docker-image.yaml

@@ -96,7 +96,6 @@ jobs:
         with:
           context: .
           platforms: linux/amd64,linux/arm64
-          # platforms: linux/amd64
           build-args: |
             "LAGOON_VERSION=${{ env.VERSION }}"
             "BUILD=${{ env.BUILD }}"

Dockerfile

@@ -1,31 +1,44 @@
 # Node builder image
-FROM uselagoon/node-20-builder:latest AS builder
+FROM uselagoon/node-20-builder:latest AS 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=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
 
-# 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,8 +21,12 @@ 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}"
   KEYCLOAK_API: "${KEYCLOAK_API:-https://keycloak.amazeeio.cloud/auth}"

docker-compose.yml

@@ -21,6 +21,24 @@ services:
       dockerfile: Dockerfile
     labels:
       lagoon.type: node
+    command: yarn run start
+    ports:
+      - '3000:3000'
+    networks:
+      - default
+    environment:
+      LAGOON_ROUTE: &default-url http://lagoon-ui.docker.amazee.io
+      LAGOON_UI_TOURS_ENABLED: false
+      LAGOON_ENVIRONMENT_TYPE: production
+      <<: *default-environment
+
+  dev:
+    build:
+      context: .
+      target: dev
+      dockerfile: Dockerfile
+    labels:
+      lagoon.type: none
     command: yarn run dev
     volumes:
       - ./src:/app/src
@@ -32,4 +50,8 @@ services:
     networks:
       - default
     environment:
+      LAGOON_ROUTE: http://lagoon-dev.docker.amazee.io
+      LAGOON_UI_TOURS_ENABLED: true
+      LAGOON_ENVIRONMENT_TYPE: development
       <<: *default-environment
+

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,