feat: nginx-alpine Dockerfile

.woodpecker/.workflow.yml

@@ -1,16 +1,10 @@
 when:
   - event: [ tag, manual, push, pull_request ]
-    branch:  main
 
 steps:
-  - name: npm install
-    image: node:18
-    commands:
-      - npm install
   - name: docker build and publish
     when:
       - event: [tag, manual, push, pull_request]
-        branch: main
     image: docker
     environment:
       DOCKER_USERNAME:
@@ -21,5 +15,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-nginx:latest' .
+      - docker build --no-cache -t 'forgejo.transprot.eu/public/react-nginx-alpine:latest' .
-      - docker push forgejo.transprot.eu/public/react-nginx:latest
+      - docker push forgejo.transprot.eu/public/react-nginx-alpine:latest

Dockerfile

@@ -7,7 +7,7 @@ COPY . .
 RUN npm run build
 
 # Production stage to run the application
-FROM nginx AS production
+FROM nginx:stable-alpine AS production
 COPY --from=build /app/build /usr/share/nginx/html
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -191,6 +191,49 @@ But there's a tiny problem with this solution, this only optimizes the perfomanc
 Here's an image showing the size of all the images so far:
 ![Nginx image size](./assets/react-nginx-size.png)
 
+### Fourth optimization: The obvious, Nginx Alpine
+
+The size of the regular Nginx server maybe be bigger than the Node Alpine version, but that's not really a fair comparison.
+
+So to keep this fair, we'll also use the Nginx Alpine version to build the application.
+
+Here's the updated Dockerfile to do so: 
+```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 nginx:stable-alpine AS production
+COPY --from=build /app/build /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+You can run the following build command to generate the image:
+```shell
+docker build -t 'react-nginx-alpine' .
+```
+
+To run this image, you will need to run the following command:
+```shell
+docker run -d -p 80:80 --name react react-nginx-alpine
+```
+
+And you can also run the following command to check the size of the image:
+```shell
+docker image ls
+```
+
+Here's an image showing the size of all the images so far:
+![Nginx alpine image size](./assets/react-nginx-alpine-size.png)
+
+The image now weighs 1 954,5 MB less, which is 26,88 times smaller, and a whopping 96,28% reduction in size!!!!! And with better perfomances of the server to top it off!!!
+
 # Français
 
 
@@ -381,4 +424,47 @@ docker image ls
 Mais il y a un petit hic avec cette solution, l'image est plus performante mais plus volumineuse, étant donnée que l'image classique de Nginx est plus volumineuse que celle de Node Alpine.
 
 Voici une image de la taille de nos images docker jusqu'à présent :
-![Nginx image size](./assets/react-nginx-size.png)
+![Nginx image size](./assets/react-nginx-size.png)
+
+### Quatrième optimisation: l'évident, Nginx Alpine
+
+La taille de l'image classique de Nginx est plus grosse que celle de Node Alpine, mais ce n'est pas vraiment une comparaison équitable.
+
+Pour rendre cette situation plus équitable, nous allons utiliser la version Alpine de Nginx.
+
+Voici à quoi ressemble notre Dockerfile à présent: 
+```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 nginx:stable-alpine AS production
+COPY --from=build /app/build /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+Vous pouvez lancer la commande suivante pour construire l'image:
+```shell
+docker build -t 'react-nginx-alpine' .
+```
+
+Pour démarrer un conteneur, vous pouvez lancer la commande suivante:
+```shell
+docker run -d -p 80:80 --name react react-nginx-alpine
+```
+
+Vous pouvez également vérifier la taille de l'image en lançant cette commande:
+```shell
+docker image ls
+```
+
+Voici une image de la taille de nos images docker jusqu'à présent:
+![Nginx alpine image size](./assets/react-nginx-alpine-size.png)
+
+L'image pèse 1 954,5 MB de moins que celle de départ, ce qui est 26,88 fois plus petit, et une énorme reduction 96,28% de la taille de l'image !!!!! Et pour couronner le tout, avec de meilleur performances !!!