From 7fa67e63db9307926e9b759f2dc9c71312a0cb40 Mon Sep 17 00:00:00 2001 From: "kristiyan.velkov" Date: Mon, 8 Dec 2025 15:35:05 +0200 Subject: [PATCH 1/5] [feat] update angular sample guide to add dhi example --- content/guides/angular/containerize.md | 79 +++++++++++++++++++++++--- 1 file changed, 71 insertions(+), 8 deletions(-) diff --git a/content/guides/angular/containerize.md b/content/guides/angular/containerize.md index 5068a5ea8eb2..0e230d456bc9 100644 --- a/content/guides/angular/containerize.md +++ b/content/guides/angular/containerize.md @@ -77,7 +77,7 @@ For consistency, please use the same responses shown in the example below when p | Question | Answer | |------------------------------------------------------------|-----------------| | What application platform does your project use? | Node | -| What version of Node do you want to use? | 23.11.0-alpine | +| What version of Node do you want to use? | 24.11.1-alpine | | Which package manager do you want to use? | npm | | Do you want to run "npm run build" before starting server? | yes | | What directory is your build output to? | dist | @@ -114,19 +114,80 @@ These updates help ensure your app is easy to deploy, fast to load, and producti > A `Dockerfile` is a plain text file that contains step-by-step instructions to build a Docker image. It automates packaging your application along with its dependencies and runtime environment. > For full details, see the [Dockerfile reference](/reference/dockerfile/). - ### Step 2: Configure the Dockerfile -Copy and replace the contents of your existing `Dockerfile` with the configuration below: +Before creating a Dockerfile, you need to choose a base image. You can either use the [Node.js Official Image](https://hub.docker.com/_/node) or a Docker Hardened Image (DHI) from the [Hardened Image catalog](https://hub.docker.com/hardened-images/catalog). + +Choosing DHI offers the advantage of a production-ready image that is lightweight and secure. For more information, see [Docker Hardened Images](https://docs.docker.com/dhi/). + +> [!IMPORTANT] +> This guide uses a stable Node.js LTS image tag that is considered secure when the guide is written. Because new releases and security patches are published regularly, the tag shown here may no longer be the safest option when you follow the guide. Always review the latest available image tags and select a secure, up-to-date version before building or deploying your application. +> +> Official Node.js Docker Images: https://hub.docker.com/_/node + +{{< tabs >}} +{{< tab name="Using Docker Hardened Images" >}} +Docker Hardened Images (DHIs) are available for Node.js on [Docker Hub](https://hub.docker.com/hardened-images/catalog/dhi/node). Unlike using the Docker Official Image, you must first mirror the Node.js image into your organization and then use it as your base image. Follow the instructions in the [DHI quickstart](/dhi/get-started/) to create a mirrored repository for Node.js. + +Mirrored repositories must start with `dhi-`, for example: `FROM /dhi-node:`. In the following Dockerfile, the `FROM` instruction uses `/dhi-node:24-alpine3.22-dev` as the base image. ```dockerfile # ========================================= # Stage 1: Build the Angular Application # ========================================= + +# Use a lightweight Node.js image for building (customizable via ARG) +FROM /dhi-node:24-alpine3.22-dev AS builder + +# Set the working directory inside the container +WORKDIR /app + +# Copy package-related files first to leverage Docker's caching mechanism +COPY package.json package-lock.json ./ + +# Install project dependencies using npm ci (ensures a clean, reproducible install) +RUN --mount=type=cache,target=/root/.npm npm ci + +# Copy the rest of the application source code into the container +COPY . . + +# Build the Angular application +RUN npm run build + +# ========================================= +# Stage 2: Prepare Nginx to Serve Static Files +# ========================================= + +FROM /dhi-nginx:1.28.0-alpine3.21-dev AS runner + +# Copy custom Nginx config +COPY nginx.conf /etc/nginx/nginx.conf + +# Copy the static build output from the build stage to Nginx's default HTML serving directory +COPY --chown=nginx:nginx --from=builder /app/dist/*/browser /usr/share/nginx/html + +# Use a non-root user for security best practices +USER nginx + +# Expose port 8080 to allow HTTP traffic +# Note: The default NGINX container now listens on port 8080 instead of 80 +EXPOSE 8080 + +# Start Nginx directly with custom config +ENTRYPOINT ["nginx", "-c", "/etc/nginx/nginx.conf"] +CMD ["-g", "daemon off;"] +``` + +{{< /tab >}} +{{< tab name="Using the Docker Official Image" >}} + +Now you need to create a production-ready multi-stage Dockerfile. Replace the generated Dockerfile with the following optimized configuration: + +```dockerfile # ========================================= # Stage 1: Build the Angular Application # ========================================= -ARG NODE_VERSION=24.7.0-alpine +ARG NODE_VERSION=24.11.1-alpine ARG NGINX_VERSION=alpine3.22 # Use a lightweight Node.js image for building (customizable via ARG) @@ -153,15 +214,15 @@ RUN npm run build FROM nginxinc/nginx-unprivileged:${NGINX_VERSION} AS runner -# Use a built-in non-root user for security best practices -USER nginx - # Copy custom Nginx config COPY nginx.conf /etc/nginx/nginx.conf # Copy the static build output from the build stage to Nginx's default HTML serving directory COPY --chown=nginx:nginx --from=builder /app/dist/*/browser /usr/share/nginx/html +# Use a built-in non-root user for security best practices +USER nginx + # Expose port 8080 to allow HTTP traffic # Note: The default NGINX container now listens on port 8080 instead of 80 EXPOSE 8080 @@ -169,7 +230,6 @@ EXPOSE 8080 # Start Nginx directly with custom config ENTRYPOINT ["nginx", "-c", "/etc/nginx/nginx.conf"] CMD ["-g", "daemon off;"] - ``` > [!NOTE] @@ -179,6 +239,9 @@ CMD ["-g", "daemon off;"] >- Aligns with Docker’s recommendations for container hardening >- Helps comply with stricter security policies in production environments +{{< /tab >}} +{{< /tabs >}} + ### Step 3: Configure the .dockerignore file The `.dockerignore` file tells Docker which files and folders to exclude when building the image. From 475fae92aa3598d5d911c5868f74589ab79e2830 Mon Sep 17 00:00:00 2001 From: "kristiyan.velkov" Date: Mon, 8 Dec 2025 15:48:06 +0200 Subject: [PATCH 2/5] [feat] update node.js version to LTS --- content/guides/angular/develop.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/guides/angular/develop.md b/content/guides/angular/develop.md index a89ded4ba469..48aff6489e7f 100644 --- a/content/guides/angular/develop.md +++ b/content/guides/angular/develop.md @@ -38,7 +38,7 @@ Create a file named `Dockerfile.dev` in your project root with the following con # ========================================= # Define the Node.js version to use (Alpine for a small footprint) -ARG NODE_VERSION=24.7.0-alpine +ARG NODE_VERSION=24.11.1-alpine # Set the base image for development FROM node:${NODE_VERSION} AS dev From c7704734ec881bb8d1cd1338a514df0e90664125 Mon Sep 17 00:00:00 2001 From: "kristiyan.velkov" Date: Mon, 8 Dec 2025 16:10:03 +0200 Subject: [PATCH 3/5] [feat] update NGINX to uppercase --- content/guides/angular/containerize.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/guides/angular/containerize.md b/content/guides/angular/containerize.md index 0e230d456bc9..9c26e8946daa 100644 --- a/content/guides/angular/containerize.md +++ b/content/guides/angular/containerize.md @@ -28,7 +28,7 @@ By the end of this guide, you will: - Containerize an Angular application using Docker. - Create and optimize a Dockerfile for production builds. - Use multi-stage builds to minimize image size. -- Serve the application efficiently with a custom NGINX configuration. +- Serve the application efficiently with a custom Nginx configuration. - Build secure and maintainable Docker images by following best practices. --- @@ -105,7 +105,7 @@ The default Dockerfile generated by `docker init` serves as a solid starting poi In this step, you’ll improve the Dockerfile and configuration files by following best practices: - Use multi-stage builds to keep the final image clean and small -- Serve the app using NGINX, a fast and secure web server +- Serve the app using Nginx, a fast and secure web server - Improve performance and security by only including what’s needed These updates help ensure your app is easy to deploy, fast to load, and production-ready. @@ -136,7 +136,7 @@ Mirrored repositories must start with `dhi-`, for example: `FROM /dhi-node:24-alpine3.22-dev AS builder # Set the working directory inside the container @@ -170,7 +170,7 @@ COPY --chown=nginx:nginx --from=builder /app/dist/*/browser /usr/share/nginx/htm USER nginx # Expose port 8080 to allow HTTP traffic -# Note: The default NGINX container now listens on port 8080 instead of 80 +# Note: The default Nginx container now listens on port 8080 instead of 80 EXPOSE 8080 # Start Nginx directly with custom config @@ -224,7 +224,7 @@ COPY --chown=nginx:nginx --from=builder /app/dist/*/browser /usr/share/nginx/htm USER nginx # Expose port 8080 to allow HTTP traffic -# Note: The default NGINX container now listens on port 8080 instead of 80 +# Note: The default Nginx container now listens on port 8080 instead of 80 EXPOSE 8080 # Start Nginx directly with custom config @@ -233,7 +233,7 @@ CMD ["-g", "daemon off;"] ``` > [!NOTE] -> We are using nginx-unprivileged instead of the standard NGINX image to follow security best practices. +> We are using nginx-unprivileged instead of the standard Nginx image to follow security best practices. > Running as a non-root user in the final image: >- Reduces the attack surface >- Aligns with Docker’s recommendations for container hardening @@ -322,12 +322,12 @@ docker-compose*.yml ### Step 4: Create the `nginx.conf` file -To serve your Angular application efficiently inside the container, you’ll configure NGINX with a custom setup. This configuration is optimized for performance, browser caching, gzip compression, and support for client-side routing. +To serve your Angular application efficiently inside the container, you’ll configure Nginx with a custom setup. This configuration is optimized for performance, browser caching, gzip compression, and support for client-side routing. Create a file named `nginx.conf` in the root of your project directory, and add the following content: > [!NOTE] -> To learn more about configuring NGINX, see the [official NGINX documentation](https://nginx.org/en/docs/). +> To learn more about configuring Nginx, see the [official Nginx documentation](https://nginx.org/en/docs/). ```nginx @@ -408,7 +408,7 @@ With your custom configuration in place, you're now ready to build the Docker im The updated setup includes: -- The updated setup includes a clean, production-ready NGINX configuration tailored specifically for Angular. +- The updated setup includes a clean, production-ready Nginx configuration tailored specifically for Angular. - Efficient multi-stage Docker build, ensuring a small and secure final image. After completing the previous steps, your project directory should now contain the following files: From 9fb689fea60f6f8def01cf390d5010263f2a8cff Mon Sep 17 00:00:00 2001 From: "kristiyan.velkov" Date: Thu, 18 Dec 2025 10:53:53 +0200 Subject: [PATCH 4/5] [feat] update angular guide to use new free dhi --- content/guides/angular/containerize.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/guides/angular/containerize.md b/content/guides/angular/containerize.md index 9c26e8946daa..38e05bbff2b9 100644 --- a/content/guides/angular/containerize.md +++ b/content/guides/angular/containerize.md @@ -127,9 +127,9 @@ Choosing DHI offers the advantage of a production-ready image that is lightweigh {{< tabs >}} {{< tab name="Using Docker Hardened Images" >}} -Docker Hardened Images (DHIs) are available for Node.js on [Docker Hub](https://hub.docker.com/hardened-images/catalog/dhi/node). Unlike using the Docker Official Image, you must first mirror the Node.js image into your organization and then use it as your base image. Follow the instructions in the [DHI quickstart](/dhi/get-started/) to create a mirrored repository for Node.js. +Docker Hardened Images (DHIs) are available for Node.js on [Docker Hub](https://hub.docker.com/hardened-images/catalog/dhi/node). Docker Hardened Images are freely available to everyone with no subscription required. You can pull and use them like any other Docker image after signing in to the DHI registry. For more information, see the [DHI quickstart](/dhi/get-started/) guide. -Mirrored repositories must start with `dhi-`, for example: `FROM /dhi-node:`. In the following Dockerfile, the `FROM` instruction uses `/dhi-node:24-alpine3.22-dev` as the base image. +To use a DHI, first sign in to the Docker Hardened Images registry using your Docker ID credentials, then pull and use the image. DHI images use the `dhi.io` prefix, for example: `FROM dhi.io/node:`. In the following Dockerfile, the `FROM` instruction uses `dhi.io/node:24-alpine3.22-dev` as the base image. ```dockerfile # ========================================= @@ -137,7 +137,7 @@ Mirrored repositories must start with `dhi-`, for example: `FROM /dhi-node:24-alpine3.22-dev AS builder +FROM dhi.io/node:24-alpine3.22-dev AS builder # Set the working directory inside the container WORKDIR /app @@ -158,7 +158,7 @@ RUN npm run build # Stage 2: Prepare Nginx to Serve Static Files # ========================================= -FROM /dhi-nginx:1.28.0-alpine3.21-dev AS runner +FROM dhi.io/nginx:1.28.0-alpine3.21-dev AS runner # Copy custom Nginx config COPY nginx.conf /etc/nginx/nginx.conf From 13b6bf131f5c7a99a4fa8706704f123355ab0211 Mon Sep 17 00:00:00 2001 From: "kristiyan.velkov" Date: Thu, 18 Dec 2025 11:07:43 +0200 Subject: [PATCH 5/5] [feat] update the angular guide to proper add DHI --- content/guides/angular/containerize.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/content/guides/angular/containerize.md b/content/guides/angular/containerize.md index 38e05bbff2b9..bcfe3e1c2459 100644 --- a/content/guides/angular/containerize.md +++ b/content/guides/angular/containerize.md @@ -127,9 +127,19 @@ Choosing DHI offers the advantage of a production-ready image that is lightweigh {{< tabs >}} {{< tab name="Using Docker Hardened Images" >}} -Docker Hardened Images (DHIs) are available for Node.js on [Docker Hub](https://hub.docker.com/hardened-images/catalog/dhi/node). Docker Hardened Images are freely available to everyone with no subscription required. You can pull and use them like any other Docker image after signing in to the DHI registry. For more information, see the [DHI quickstart](/dhi/get-started/) guide. +Docker Hardened Images (DHIs) are available for Node.js in the [Docker Hardened Images catalog](https://hub.docker.com/hardened-images/catalog/dhi/node). Docker Hardened Images are freely available to everyone with no subscription required. You can pull and use them like any other Docker image after signing in to the DHI registry. For more information, see the [DHI quickstart](/dhi/get-started/) guide. -To use a DHI, first sign in to the Docker Hardened Images registry using your Docker ID credentials, then pull and use the image. DHI images use the `dhi.io` prefix, for example: `FROM dhi.io/node:`. In the following Dockerfile, the `FROM` instruction uses `dhi.io/node:24-alpine3.22-dev` as the base image. +1. Sign in to the DHI registry: + ```console + $ docker login dhi.io + ``` + +2. Pull the Node.js DHI (check the catalog for available versions): + ```console + $ docker pull dhi.io/node:24-alpine3.22-dev + ``` + +In the following Dockerfile, the `FROM` instruction uses `dhi.io/node:24-alpine3.22-dev` as the base image. ```dockerfile # =========================================