[Vuejs]-Docker compose with Multi stage : why create same images?

• 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