skip to Main Content

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 ?

2

Answers


  1. 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

    Login or Signup to reply.
    • 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
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search