Compare commits
2 commits
main
...
nginx-alpi
Author | SHA1 | Date | |
---|---|---|---|
![]() |
af9383859b | ||
![]() |
9899fee0c2 |
5 changed files with 92 additions and 11 deletions
|
@ -5,4 +5,5 @@ Dockerfile
|
|||
.git
|
||||
.gitignore
|
||||
build
|
||||
assets
|
||||
assets
|
||||
/build_results*
|
||||
|
|
|
@ -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 push 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-alpine:latest
|
|
@ -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;"]
|
88
README.md
88
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:
|
||||

|
||||
|
||||
### 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:
|
||||

|
||||
|
||||
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 :
|
||||

|
||||

|
||||
|
||||
### 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:
|
||||

|
||||
|
||||
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 !!!
|
BIN
assets/react-nginx-alpine-size.png
Normal file
BIN
assets/react-nginx-alpine-size.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in a new issue