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
 
 
@@ -382,3 +425,46 @@ Mais il y a un petit hic avec cette solution, l'image est plus performante mais
 
 Voici une image de la taille de nos images docker jusqu'à présent :
 ![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 !!!