I deploying Vue app, and use method multi-stage ( with Nginx as server ) . Structure files :

• docker-compose.yml
• client ( folder code )
  • Dockerfile

This is files config :

docker-compose.yml

version: '3.4'

services:
  client:
    build:./client
    ports:
      - "8080:80"
    volumes:
      - "./client:/app"
      - "/app/node_modules"

Dockerfile

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

This run so smooth. But, when i changed content of source code and rebuild image with

• docker-compose build client

  docker-compose up --build

  ( or some arguments --no-cache, --force-recreate ... event set name for it )

It always will create new 2 image : 23.6MB and 333MB as below

docker images
REPOSITORY   TAG           IMAGE ID       CREATED          SIZE
root_ad      latest        236945fbfbb5   7 minutes ago    23.6MB
<none>       <none>        fbdc81e7983c   7 minutes ago    333MB
<none>       <none>        7969e4ba9ecf   18 minutes ago   23.6MB
<none>       <none>        e31655da8c88   18 minutes ago   333MB
<none>       <none>        4d5cae08a889   20 minutes ago   23.6MB
<none>       <none>        ee369d2602a9   20 minutes ago   333MB
nginx        alpine        513f9a9d8748   3 weeks ago      22.9MB
node         15.0-alpine   1e8b781248bb   11 months ago    115MB

How can i rebuild image without duplicate its ?

CodePudding user response：

when your using docker-compose, you don't need to build the container separately,

just run,

docker-compose up --build

because in your docker-compose.yml file you're already specified to build the image using client Dockerfile, build:./client.

then it will not create the same image again and again

CodePudding user response：

• 23.6MB's none is production-stage
• 333MB's none is build-stage

That is intermediate temporary images. You may delete it.

Why that appear again and again?

Even if first part:

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install

is always the same (Let's say we don't changing package*.json)

The second part:

COPY . .
RUN npm run build

Always changing because you copying updated source code at every build.

Docker needs to create every time new intermediate image to be able run

COPY --from=build-stage /app/dist /usr/share/nginx/html

from this intermediate build-stage image

After that docker creates new image production-stage (as none) and tags it as root_ad:latest.

Why here is three 23.6MB's images and only one is root_ad:latest?

Because at every build docker untag older root_ad:latest and add this tag to newer 23.6MB's none.

You may check this behaviour by edit manually image version at every build:

version: '3.4'

services:
  client:
    build:./client
  image: root_ad:version_1 # add version manually here

After that you will see something like:

docker images
REPOSITORY   TAG           IMAGE ID       CREATED          SIZE
root_ad      version_3     236945fbfbb5   7 minutes ago    23.6MB
<none>       <none>        fbdc81e7983c   7 minutes ago    333MB
root_ad      version_2     7969e4ba9ecf   18 minutes ago   23.6MB
<none>       <none>        e31655da8c88   18 minutes ago   333MB
root_ad      version_1     4d5cae08a889   20 minutes ago   23.6MB
<none>       <none>        ee369d2602a9   20 minutes ago   333MB
nginx        alpine        513f9a9d8748   3 weeks ago      22.9MB
node         15.0-alpine   1e8b781248bb   11 months ago    115MB