feat: Alpine Dockerfile version

.woodpecker/.workflow.yml

@@ -21,6 +21,5 @@ steps:
       - /var/run/docker.sock:/var/run/docker.sock
     commands:
       - docker login forgejo.transprot.eu -u $DOCKER_USERNAME -p $DOCKER_PASSWORD
-      - docker build -t 'forgejo.transprot.eu/public/react-multistage:${CI_PIPELINE_NUMBER}' -t 'forgejo.transprot.eu/public/react-multistage:latest' .
+      - docker build -t 'forgejo.transprot.eu/public/react-multistage-alpine:latest' .
-      - docker push forgejo.transprot.eu/public/react-multistage:${CI_PIPELINE_NUMBER}
+      - docker push forgejo.transprot.eu/public/react-multistage-alpine:latest
-      - docker push forgejo.transprot.eu/public/react-multistage:latest

Dockerfile

@@ -1,5 +1,5 @@
 # Build stage of the application
-FROM node:18 AS build
+FROM node:18-alpine AS build
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
@@ -7,7 +7,7 @@ COPY . .
 RUN npm run build
 
 # Production stage to run the application
-FROM node:18 AS production
+FROM node:18-alpine AS production
 COPY --from=build /app/build /prod
 RUN npm install --global serve
 EXPOSE 3000

README.md

@@ -1,6 +1,24 @@
 Pour la version en français, c'est ici:  [Français](#français)
 
 # English
+
+# You can pull these images from my public repository and try them out !
+
+All the images I built during this project are available on my public repository that you can find in the [Packages](https://forgejo.transprot.eu/public/react-docker-optimization/packages) section of my Frgejo instance.
+
+You can run the following command to pull the disastrous 2.03 GB image for example:
+```shell
+docker pull forgejo.transprot.eu/public/react-simple
+```
+
+Then you can use the following command to run the image you just pulled:
+```shell
+docker run -d -p 80:3000 --name react-simple react-simple
+```
+
+You'll then have access to the deployed basic app at the following address:
+[http://localhost:80](http://localhost:80)
+
 ## How to reduce the size of your docker 🐳 images 💿?
 We're starting from a basic React application générated with a simple Dockerfile with disastrous conséquences:
 ```Dockerfile
@@ -89,8 +107,68 @@ I am still usig Nushell on my end to have a pretty print and filter on the image
 
 The image now weighs `44 MB` less, which is 1.27 times smaller, and a whopping 21.67% reduction in size!
 
+### Second optimisation: using alpine images
+
+Alpine images are based on the Alpine Linux distro, which is a minimalistic and light weight version of Linux. It's realle stupid and simple, but if your images are built using a small base image, your resulting image will also be small !
+
+It's as easy as adding `-alpine` on your images in your Dockerfile.
+Here's the new version of the Dockerfile using an alpine image of node:
+```Dockerfile
+# Build stage of the application
+FROM node:18-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Production stage to run the application
+FROM node:18-alpine AS production
+COPY --from=build /app/build /prod
+RUN npm install --global serve
+EXPOSE 3000
+CMD ["serve", "prod/"]
+```
+
+You can rebuild the image by running the following command:
+```shell
+docker build -t 'react-multistage-alpine' .
+```
+
+You can also verify the image sizes by running the following command:
+```shell
+docker image ls
+```
+
+And as always, I'm using Nushell to have a prettier output, which gives me the following results which are incredibly impressive:
+![Taille image node alpine](./assets/react-multistage-alpine-size.png)
+
+A size reduction of `1.82 GB`, which is an image that is 9.8 smaller than the first one and is equivalent to a size reduction of 89.8% !!!!
+
+And the best in all of this ? Not only is the image smaller, but it is way more performant as it only includes what is necessary to run the application on the alpine version of node.
+
+But we can go even further beyond in optimizing this image.
+
 # Français
 
+
+# Vous pouvez utiliser ces images et les pull sur votre machine pour les testes via mon repository publique !
+
+Toutes les images que je construis durant ce projet sont disponible sous l'onglet [Packages](https://forgejo.transprot.eu/public/react-docker-optimization/packages)de mon instance de forgejo.
+
+Vous pouvez par exemple lancer la commande suivante pour télécharger l'image simple qui pèse un désastreux 2.03 GB:
+```shell
+docker pull forgejo.transprot.eu/public/react-simple
+```
+
+Vous pouvez ensuite lancer cette image avec la commande suivante :
+```shell
+docker run -d -p 80:3000 --name react-simple react-simple
+```
+
+Ce qui vous donnera accès à l'application basique à l'adresse suivante :
+[http://localhost:80](http://localhost:80)
+
 ## Comment réduire la taille de vos images 💿 docker 🐳 ?
 
 On part d'une application React tout juste généré et avec un Dockerfile simple mais avec de grosses conséquences :
@@ -179,3 +257,45 @@ Pour ma part j'utilise toujours Nushell pour avoir cette belle présentation des
 ![Taille de l'image multistage](./assets/react-multistage-size.png)
 
 L'image pèse maintenant `44 MB` de moins, on a une image 1.27 fois plus petite, soit une diminution de la taille de 21.67% !
+
+### Deuxième optimisation: utilisation d'images alpines
+
+Les images alpine sont basé sur la distro Alpine Linux qui est une version minimale et peu volumineuse de Linux. C'est tout bête, mais si l'image de base de votre image est petite, votre image finale le sera aussi !
+
+C'est tout aussi simple que de rajouter `-alpine` sur vos image docker dans le Dockerfile.
+Voici la nouvelle version du Dockerfile:
+```Dockerfile
+# Build stage of the application
+FROM node:18-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Production stage to run the application
+FROM node:18-alpine AS production
+COPY --from=build /app/build /prod
+RUN npm install --global serve
+EXPOSE 3000
+CMD ["serve", "prod/"]
+```
+
+Puis vous pouvez reconstruire l'image en lançant la commande suivante:
+```shell
+docker build -t 'react-multistage-alpine' .
+```
+
+Vous pouvez maintenant lancer la commande suivante vérifier la taille de votre image:
+```shell
+docker image ls
+```
+
+Et comme d'habitude, j'utilise Nushell pour avoir un meilleur rendu visuelle, et voici les résultats qui sont impréssionnants:
+![Taille image node alpine](./assets/react-multistage-alpine-size.png)
+
+On a une réduction de `1.82 GB`, soit une image 9.8 fois plus petite et une réduction de 89.8% !!!!
+
+Et le meilleur dans tout ça ? Non seulement l'image est plus petite, mais elle est plus performante car elle ne contient que le strict minimum nécessaire pour faire tourner node via la version alpine.
+
+Mais on peut encore aller plus loins dans l'optimisation.