use docker buildkit

.gitlab-ci.yml

@@ -7,6 +7,8 @@
 #   for the `COPY . ./` command
 
 variables:
+  # enable docker buildkit. Used with `BUILDKIT_INLINE_CACHE=1` below
+  DOCKER_BUILDKIT: 1
   DOCKER_TLS_CERTDIR: "/certs"
   IMAGE_TEST: $CI_REGISTRY_IMAGE/test:latest
   IMAGE_CYPRESS: $CI_REGISTRY_IMAGE/cypress:latest
@@ -31,8 +33,7 @@ build:builder:
   extends: .base
   stage: build1
   script:
-    - docker pull "$IMAGE_TEST" || echo "No previously cached test image found"
-    - docker build --cache-from "$IMAGE_TEST" --target builder -t "$IMAGE_TEST" .
+    - docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_TEST" --target builder -t "$IMAGE_TEST" .
     - docker push "$IMAGE_TEST"
 
 # this runs immediately after "build:builder"
@@ -41,10 +42,8 @@ build:cypress:
   stage: build2_and_test
   needs: ["build:builder"]
   script:
-    - docker pull "$IMAGE_TEST"
-    - docker pull "$IMAGE_CYPRESS" || echo "No previously cached cypress image found"
     # Note: `--cache-from $IMAGE_CYPRESS` should be before the other `--cache-from` argument
-    - docker build --cache-from "$IMAGE_CYPRESS" --cache-from "$IMAGE_TEST" --target cypress -t "$IMAGE_CYPRESS" .
+    - docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_CYPRESS" --cache-from "$IMAGE_TEST" --target cypress -t "$IMAGE_CYPRESS" .
     - docker push "$IMAGE_CYPRESS"
 
 # this runs immediately after "build:cypress"
@@ -53,11 +52,8 @@ build:deployimage:
   stage: build3_and_cypress
   needs: ["build:cypress"]
   script:
-    - docker pull "$IMAGE_TEST"
-    - docker pull "$IMAGE_CYPRESS"
-    - docker pull "$IMAGE_DEPLOY" || echo "No previously cached deploy image found"
     # Note: `--cache-from $IMAGE_DEPLOY` should be before the other `--cache-from` arguments
-    - docker build --cache-from "$IMAGE_DEPLOY" --cache-from "$IMAGE_TEST" --cache-from "$IMAGE_CYPRESS" -t "$IMAGE_DEPLOY" .
+    - docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_DEPLOY" --cache-from "$IMAGE_TEST" --cache-from "$IMAGE_CYPRESS" -t "$IMAGE_DEPLOY" .
     - docker push "$IMAGE_DEPLOY"
 
 # this runs immediately after "build:builder"

README.md

@@ -7,7 +7,7 @@ This is an example [Next.js](https://nextjs.org/) project with a GitLab CI/CD pi
 - builds a Docker image for deployment
 - pushes the Docker image to the [GitLab Container Registry](https://docs.gitlab.com/ee/user/packages/container_registry/)
 
-In an effort to improve speed, it uses a GitLab [directed acyclic graph pipeline](https://docs.gitlab.com/ee/ci/directed_acyclic_graph/index.html) and [Docker multi-stage builds](https://docs.docker.com/develop/develop-images/multistage-build/).
+In an effort to improve speed, it uses a GitLab [directed acyclic graph pipeline](https://docs.gitlab.com/ee/ci/directed_acyclic_graph/index.html) and [Docker multi-stage builds](https://docs.docker.com/develop/develop-images/multistage-build/). It also uses [Docker BuildKit](https://docs.docker.com/develop/develop-images/build_enhancements/) to make caching easier. (With BuildKit, cached layers will be automatically pulled when needed. Without BuildKit, images used for caching need to be explicitly pulled.)
 
 ## Usage
 
@@ -20,3 +20,4 @@ In an effort to improve speed, it uses a GitLab [directed acyclic graph pipeline
 - https://docs.gitlab.com/ee/ci/docker/using_docker_build.html#making-docker-in-docker-builds-faster-with-docker-layer-caching
 - https://docs.gitlab.com/ee/ci/directed_acyclic_graph/index.html
 - https://docs.gitlab.com/ee/ci/yaml/README.html#needs
+- https://testdriven.io/blog/faster-ci-builds-with-docker-cache/