diff --git a/.woodpecker/.workflow.yml b/.woodpecker/.workflow.yml index 585a7b6..1203c7d 100644 --- a/.woodpecker/.workflow.yml +++ b/.woodpecker/.workflow.yml @@ -21,5 +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-nginx:latest' . - - docker push forgejo.transprot.eu/public/react-nginx:latest \ No newline at end of file + - docker build -t 'forgejo.transprot.eu/public/react-nginx-alpine:latest' . + - docker push forgejo.transprot.eu/public/react-nginx-alpine:latest \ No newline at end of file diff --git a/Dockerfile b/Dockerfile index f11e443..127bc84 100644 --- a/Dockerfile +++ b/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;"] \ No newline at end of file diff --git a/README.md b/README.md index ecd9a37..367216c 100644 --- a/README.md +++ b/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) \ No newline at end of file +![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 !!! \ No newline at end of file diff --git a/assets/react-nginx-alpine-size.png b/assets/react-nginx-alpine-size.png new file mode 100644 index 0000000..cdce682 Binary files /dev/null and b/assets/react-nginx-alpine-size.png differ