Réduction du poids de l'image Docker grâce à l'application build-React en plusieurs étapes

introduction

Ravi de vous rencontrer, je suis accro à jouer avec Docker et Kubernetes ces derniers temps. Cette fois, j'ai essayé de réduire le poids de l'image Docker!

Cette fois, celle créée par défaut à l'aide de la commande create-react-app est conteneurisée.

• Préparation préalable --Créez une application avec create-react-app

//Création d'applications
$ create-react-app sample-react-app
$ cd sample-react-app

Dockerfile en question

Préparez le Dockerfile. Comme un flux

• construire pour la production
• Installer et exécuter un module qui exécute des fichiers statiques

C'est comme ça.

Dockerfile

FROM node:12
COPY . /react-app
WORKDIR /react-app
RUN npm install && npm run build && npm install -g serve
CMD ["serve","-s","build" ]

Avec cela, la valeur par défaut est d'écouter à 5000, donc si vous transférez et exécutez comme suit, vous pouvez confirmer que l'application fonctionne sur localhost: 5000.

$ docker run -p 5000:5000 sample-react-app:0.0.1

Jusqu'à hier j'étais! J'étais heureux d'avoir pu créer un conteneur d'application React. Mais j'ai pensé.

N'est-il pas nécessaire d'avoir un environnement de nœuds car il n'exécute que des fichiers statiques à la fin?

Au fait, si vous regardez la taille de l'image Docker ici ...

$ docker images
REPOSITORY                                                   TAG                 IMAGE ID            CREATED             SIZE
sample-react-app                                             0.0.1               6e7bc9096dd7        9 minutes ago       1.31GB

... gros.

Cependant, je ne pense pas que ce serait une bonne idée de donner des fichiers de production à git, donc si vous voulez construire à partir d'un référentiel git à l'aide d'outils CI, je veux npm install et npm run build au stade de la construction avec Docker. Je pense.

Alors ** multi-étapes! ** Il y a ceci.

J'ai donc essayé d'apporter les fichiers de production à nginx en utilisant plusieurs étapes.

Amélioration du Dockerfile

Amélioration du Dockerfile

#La première étape(Jusqu'à la génération du fichier de production)
FROM node:12 as node
COPY . /react-app
WORKDIR /react-app
RUN npm install && npm run build

#Deuxième étape(Copiez uniquement les fichiers statiques à partir du contenu du conteneur de première étape)
FROM nginx:1.19.2-alpine
COPY --from=node ./react-app/build /usr/share/nginx/html
CMD nginx -g "daemon off;"

C'est un début d'excitation. .. .. Construisons et exécutons avec la balise 0.0.2.

$ docker build -t sample-react-app:0.0.2 .
$ docker run -p 5000:80 sample-react-app:0.0.2

J'ai pu le démarrer en toute sécurité!

Et la taille est ...

$ docker images
REPOSITORY                                                   TAG                 IMAGE ID            CREATED             SIZE
sample-react-app                                             0.0.2               9148ac06ddbe        3 minutes ago       22.5MB

C'est assez intelligent! Si c'est juste la taille, c'est 1/60!

en conclusion

Personnellement, j'avais un bon sentiment d'accomplissement que cela a été changé de façon si dramatique! À l'avenir, je ne suis pas satisfait de la simple conteneurisation, et j'aimerais bien réfléchir à la façon de le faire.