如果你正在從事 Web 開發(fā)，那么你可能已經(jīng)了解過容器化的概念以及它的優(yōu)點。

但是，當(dāng)使用 Docker 時，鏡像大小是一個很大的問題。僅僅是從 create-react-app 中得到的樣板項目就通常超過 1.43 GB。

今天我們將會容器化一個 ReactJS 應(yīng)用程序，并學(xué)習(xí)一些關(guān)于如何減小鏡像大小以及同時提高性能的技巧。

這些技巧將會展示給 ReactJS，但它同樣適用于任何 NodeJS 應(yīng)用程序。

步驟1：創(chuàng)建您的項目

把你的終端打開，輸入以下命令：

npx create-react-app docker-image-test

然后create-react-app將為您提供基本的 React 應(yīng)用程序。

之后，進(jìn)入根目錄并運行項目。

cd docker-image-testyarn installyarn start

然后轉(zhuǎn)到http://localhost:3000查看您的應(yīng)用程序是否已啟動并正在運行。

步驟2：構(gòu)建您的第一個圖像

在項目的根目錄中，創(chuàng)建一個名為Dockerfile的文件并將以下代碼粘貼到其中。

FROM node:12
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "start"]

請注意，我們正在從 docker hub 獲取基本映像 node:12，安裝依賴項并運行基本命令。（這里不深入docker命令的細(xì)節(jié)）

現(xiàn)在從您的終端，為您的容器構(gòu)建圖像。

docker build -t docker-image-test .

Docker 將構(gòu)建您的映像。完成后，您可以使用此命令查看您的圖像。

docker images

列表頂部是我們新創(chuàng)建的圖像，在最右側(cè)，我們可以看到圖像的大小?，F(xiàn)在是1.43GB 。

我們可以使用以下命令運行圖像

docker run --rm -it -p 3000:3000/tcp docker-image-test:latest

您可以轉(zhuǎn)到瀏覽器并刷新頁面以驗證它是否仍在運行。

步驟3：更改基礎(chǔ)圖像

在之前的配置中，我們使用node:12作為基礎(chǔ)鏡像。但傳統(tǒng)上，節(jié)點圖像是基于Ubuntu的，這對于我們簡單的React應(yīng)用程序來說是不必要的沉重。

從 DockerHub（官方 docker image registry）可以看出，基于 Alpine 的鏡像比基于 Ubuntu 的鏡像要小得多，而且它們只打包了最小的依賴。

這些基本圖像的大小比較如下所示。

 現(xiàn)在我們將使用node:12-alpine作為我們的基礎(chǔ)鏡像，看看會發(fā)生什么。

FROM node:12-alpine
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "start"]

然后我們像以前一樣構(gòu)建圖像并查看大小。

 哇！我們的圖像大小只減少到580MB。這是一個很大的進(jìn)步。但我們能做得更好嗎？

步驟4：多階段構(gòu)建

在我們之前的配置中，我們將所有源代碼復(fù)制到工作目錄中。

但這是不必要的，因為我們只需要構(gòu)建文件夾來為我們的網(wǎng)站提供服務(wù)。所以現(xiàn)在，我們將使用多階段構(gòu)建的概念來減少最終圖像中不必要的代碼和依賴項。

配置看起來像這樣。

# STAGE 1
FROM node:12-alpine AS build
WORKDIR /app
COPY package.json ./
RUN yarn  install
COPY . /app
RUN yarn build
# STAGE 2
FROM node:12-alpine
WORKDIR /app
RUN npm install -g webserver.local
COPY --from=build /app/build ./build
EXPOSE 3000
CMD webserver.local -d ./build

在第一階段，我們安裝依賴項并構(gòu)建我們的項目。

在第二階段，我們從上一階段復(fù)制構(gòu)建文件夾的內(nèi)容，并使用它來為我們的應(yīng)用程序提供服務(wù)。

這樣，我們的最終圖像中就沒有不必要的依賴項和代碼。

接下來，我們構(gòu)建圖像并像以前一樣從列表中查看圖像。

 現(xiàn)在我們的圖像大小只有97.5MB。那有多棒？

步驟5：使用 NGINX

我們正在使用節(jié)點服務(wù)器來提供ReactJS應(yīng)用程序的靜態(tài)資產(chǎn)，這不是提供靜態(tài)內(nèi)容的最佳選擇。

我們可以使用更高效、更輕量級的服務(wù)器，如Nginx來服務(wù)我們的應(yīng)用程序，看看它是否提高了我們的性能并減小了大小。

我們最終的 Docker 配置文件將如下所示。

# STAGE 1
FROM node:12-alpine AS build
WORKDIR /app
COPY package.json ./
RUN yarn  install
COPY . /app
RUN yarn build
# STAGE 2
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

我們正在更改 docker 配置的第二階段，以使用 Nginx 為我們的應(yīng)用程序提供服務(wù)。

然后我們使用當(dāng)前配置構(gòu)建我們的鏡像。

 圖像大小僅減少到22.4MB！

同時，我們正在使用性能更高的服務(wù)器來為我們出色的應(yīng)用程序提供服務(wù)。

我們可以使用以下命令驗證我們的應(yīng)用程序是否仍在運行。

docker run --rm -it -p 3000:80/tcp docker-image-test:latest

請注意，我們將容器的 80 端口暴露給外部，因為默認(rèn)情況下，Nginx將在容器內(nèi)的端口 80 上可用。

這些是您可以應(yīng)用于任何NodeJS項目的一些簡單技巧，可以大幅減小圖像大小?，F(xiàn)在您的容器確實更加便攜和高效。

到此這篇關(guān)于 Docker鏡像瘦身大小從1.43 GB減少到22.4MB的文章就介紹到這了,更多相關(guān) Docker鏡像瘦身內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論