Optimize buildx with layer cache

.github/workflows/local-build.yaml

@@ -12,23 +12,43 @@ on:
 
   # Allow run workflow manually from Action tab
   workflow_dispatch:
+    inputs:
+      IMAGE_VER:
+        description: "version for build image"
+        type: string
+
 env:
   REGISTRY: docker.frappet.com
-  CMS_IMAGE_NAME: demo/qualifying-exam-cms
-  CMS_IMAGE_TAG: 0.1.1
+  IMAGE_NAME: demo/qualifying-exam-cms
+
 jobs:
-  # act -W .github/workflows/local-build.yaml -j local-image 
+  # act workflow_dispatch --reuse -W .github/workflows/local-build.yaml --input IMAGE_VER=v0.2.4-dev
   local-image:  
     runs-on: ubuntu-latest
     steps:
-      - name: "Check out code"
+      - name: Check out code # checkout only cms is possible but I checkout all
         uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '18'
+      - name: Gen Version
+        id: gen_ver
+        run: |
+          IMAGE_VER=${{ github.event.inputs.IMAGE_VER }}
+          echo "{\"version\":\"$IMAGE_VER\", \"builddate\":\"$(date +"%Y-%m-%d_%T")\",\"ref_name\":\"$GITHUB_REF\" }" > ./cms/src/lib/ver.json
+          cat ./cms/src/lib/ver.json
+          echo '::set-output name=image_ver::'$IMAGE_VER
+      - name: Debug act
+        if: ${{ env.ACT }}
+        run: |
+          echo $GITHUB_REF
+          echo ${{ steps.gen_ver.outputs.image_ver }}
+          cat ./cms/src/lib/ver.json
+
       - name: Build and push docker image
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
         with: 
           context: cms
           load: true
-          tags: ${{env.REGISTRY}}/${{env.CMS_IMAGE_NAME}}:${{env.CMS_IMAGE_TAG}},${{env.REGISTRY}}/${{env.CMS_IMAGE_NAME}}:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          # cache-from: type=local,src=/tmp/.buildx-cache
+          # cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
+          tags: ${{env.REGISTRY}}/${{env.IMAGE_NAME}}:${{ steps.gen_ver.outputs.image_ver }},${{env.REGISTRY}}/${{env.IMAGE_NAME}}:latest

cms/.dockerignore

@@ -9,6 +9,8 @@ node_modules
 .prettierrc
 .pretieriignore
 .env
+.svelte-kit
+build
 README.md
 Dockerfile
 docker-compose.yaml

cms/Dockerfile

@@ -1,8 +1,12 @@
 # docker build . -t docker.frappet.com/demo/qualifying-exam-cms:latest
 FROM node:18 as build
 WORKDIR /app
-COPY . .
-RUN npm ci
+# optimize build speed by copy all .xx folder and 
+COPY *.json .
+COPY *.*s .
+RUN npm i
+COPY src ./src
+RUN ls
 RUN npm run build
 FROM node:18-alpine
 WORKDIR /app

cms/src/lib/components/url.js

@@ -1,36 +0,0 @@
-import { derived, writable } from 'svelte/store'
-
-export function createUrlStore(ssrUrl) {
-  // Ideally a bundler constant so that it's tree-shakable
-  if (typeof window === 'undefined') {
-    const { subscribe } = writable(ssrUrl)
-    return { subscribe }
-  }
-
-  const href = writable(window.location.href)
-
-  const originalPushState = history.pushState
-  const originalReplaceState = history.replaceState
-
-  const updateHref = () => href.set(window.location.href)
-
-  history.pushState = function () {
-    originalPushState.apply(this, arguments)
-    updateHref()
-  }
-
-  history.replaceState = function () {
-    originalReplaceState.apply(this, arguments)
-    updateHref()
-  }
-
-  window.addEventListener('popstate', updateHref)
-  window.addEventListener('hashchange', updateHref)
-
-  return {
-    subscribe: derived(href, ($href) => new URL($href)).subscribe
-  }
-}
-
-// If you're using in a pure SPA, you can return a store directly and share it everywhere
-export default createUrlStore()