feat: nginx 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-multistage-alpine:latest' .
+      - docker build --no-cache -t 'forgejo.transprot.eu/public/react-nginx:latest' .
-      - docker push forgejo.transprot.eu/public/react-multistage-alpine:latest
+      - docker push forgejo.transprot.eu/public/react-nginx:latest

Dockerfile

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

README.md

@@ -149,6 +149,48 @@ And the best in all of this ? Not only is the image smaller, but it is way more
 
 But we can go even further beyond in optimizing this image.
 
+### Third optimization: Using a better http server: Nginx
+
+The next optimization that we can perform is using a nginx server instead of a node server to run our application. 
+This will serve the static build files faster than the node server and it will also be better perfomance, memory and requests wise as node performs worse than nginx to serve files under the same conditions. 
+
+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 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' .
+```
+
+To run this image, you will need to run the following command:
+```shell
+docker run -d -p 80:80 --name react react-nginx
+```
+
+And you can also run the following command to check the size of the image:
+```shell
+docker image ls
+```
+
+But there's a tiny problem with this solution, this only optimizes the perfomance of the image but the size of the regular Nginx server is bigger than the Node Alpine version.
+
+Here's an image showing the size of all the images so far:
+![Nginx image size](./assets/react-nginx-size.png)
+
 # Français
 
 
@@ -298,4 +340,45 @@ On a une réduction de `1.82 GB`, soit une image 9.8 fois plus petite et une ré
 
 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.
+Mais on peut encore aller plus loins dans l'optimisation.
+### Troisième optimisation : Utilisation d'un meilleur serveur http: Nginx
+
+La prochaine optimisation que l'on peut effectuer est l'utilisation de Nginx comme serveur pour servir notre application React plutôt que Node.
+Les fichiers statiques construits de notre application seront envoyés aux utilisateurs plus rapidement, et le serveur utilisera moins de mémoire , performera mieux et pourra traiter plus de requête que le serveur node car nginx est plus performant sous des conditions similaires.
+
+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 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' .
+```
+
+Pour démarrer un conteneur, vous pouvez lancer la commande suivante:
+```shell
+docker run -d -p 80:80 --name react react-nginx
+```
+
+Vous pouvez également vérifier la taille de l'image en lançant cette commande:
+```shell
+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)