Gewichtsreduzierung des Docker-Images durch mehrstufige Build-React-Anwendung

Einführung

Schön, Sie kennenzulernen, ich bin süchtig danach, in letzter Zeit mit Docker und Kubernetes herumzuspielen. Diesmal habe ich versucht, das Gewicht des Docker-Bildes zu reduzieren!

Dieses Mal wird derjenige, der standardmäßig mit dem Befehl create-react-app erstellt wurde, containerisiert.

• Vorbereitungen --Erstellen Sie eine App mit create-react-app

//App-Erstellung
$ create-react-app sample-react-app
$ cd sample-react-app

Dockerfile in Frage

Bereiten Sie die Docker-Datei vor. Als Fluss

• für die Produktion bauen --Installieren Sie ein Modul und führen Sie es aus, das statische Dateien ausführt

Es ist wie es ist.

Dockerfile

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

Standardmäßig wird bei 5000 abgehört. Wenn Sie also wie folgt weiterleiten und ausführen, können Sie bestätigen, dass die Anwendung bei localhost: 5000 funktioniert.

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

Bis gestern war ich! Ich war froh, dass ich einen React-App-Container erstellen konnte. Aber ich dachte.

Ist eine Knotenumgebung nicht erforderlich, da am Ende nur statische Dateien ausgeführt werden?

Übrigens, wenn Sie sich die Größe des Docker-Bildes hier ansehen ...

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

... groß.

Ich glaube jedoch nicht, dass es möglich ist, Git so viele Produktionsdateien zu geben. Wenn Sie also mit CI-Tools aus dem Git-Repository erstellen möchten, möchte ich npm install und npm run build in der Phase der Erstellung mit Docker. Ich denke.

Also ** mehrstufig! ** Da ist das.

Also habe ich versucht, die Produktionsdateien mehrstufig auf nginx zu bringen.

Verbesserte Docker-Datei

Verbesserte Docker-Datei

#die erste Stufe(Bis zur Generierung der Produktionsdatei)
FROM node:12 as node
COPY . /react-app
WORKDIR /react-app
RUN npm install && npm run build

#Zweite Etage(Kopieren Sie nur statische Dateien aus dem Inhalt des Containers der ersten Stufe)
FROM nginx:1.19.2-alpine
COPY --from=node ./react-app/build /usr/share/nginx/html
CMD nginx -g "daemon off;"

Es ist ein Beginn der Aufregung. .. .. Lassen Sie uns mit dem Tag 0.0.2 erstellen und ausführen.

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

Ich konnte es sicher starten!

Und die Größe ist ...

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

Es ist ziemlich schlau! Wenn es nur die Größe ist, ist es 1/60!

abschließend

Persönlich hatte ich ein gutes Erfolgserlebnis, dass es so dramatisch verändert wurde! In Zukunft bin ich nicht nur mit der Containerisierung zufrieden, und ich würde gerne sorgfältig darüber nachdenken, wie ich es machen soll.