How to reduce the image size of Node in a react project with Dokcerfile?

Question

I am building a Docker image for production. I am trying to reduce the final size of the image that is built using docker build. I have tried using multi stage for approach for building the image itself following this article, so I have some changes that uses serve.

1. I want to build the docker image with that installs only the dependencies and..
2. Serve it with serve.

Previous Dockerfile was like so.

Dockerfile.staging

FROM node:14.19.1-alpine
WORKDIR /app
COPY package*.json ./
COPY yarn.lock ./
RUN yarn install
COPY . .
RUN yarn build:staging
RUN yarn global add serve
EXPOSE 3006
CMD ["serve" ,"-s","build","-l","3006"]

This works and builds the image. But this Dockerfile the image that is being built is over 700mb.

Here is my Dockerfile.staging

FROM node:12-alpine AS build
WORKDIR /app
COPY package.json ./
RUN yarn  install --production
COPY . /app
RUN yarn build:staging


FROM node:12-alpine
WORKDIR /app

RUN yarn global add serve
COPY --from=build /app/build ./build

EXPOSE 3006
CMD ["serve" ,"-s","build","-l","3006"]

When I run:

docker build -f Dockerfile.stage -t stagebuild:my-app-front-end .  

I am getting this error:

[+] Building 4.5s (12/12) FINISHED                                                                                                                                                                        
 => [internal] load build definition from Dockerfile.stage                                                                                                                                           0.0s
 => => transferring dockerfile: 331B                                                                                                                                                                 0.0s
 => [internal] load .dockerignore                                                                                                                                                                    0.0s
 => => transferring context: 34B                                                                                                                                                                     0.0s
 => [internal] load metadata for docker.io/library/node:12-alpine                                                                                                                                    2.1s
 => [build 1/6] FROM docker.io/library/node:12-alpine@sha256:d4b15b3d48f42059a15bd659be60afe21762aae9d6cbea6f124440895c27db68                                                                        0.0s
 => [internal] load build context                                                                                                                                                                    0.0s
 => => transferring context: 31.68kB                                                                                                                                                                 0.0s
 => CACHED [build 2/6] WORKDIR /app                                                                                                                                                                  0.0s
 => CACHED [stage-1 3/4] RUN yarn global add serve                                                                                                                                                   0.0s
 => CACHED [build 3/6] COPY package.json ./                                                                                                                                                          0.0s
 => CACHED [build 4/6] RUN yarn  install --production                                                                                                                                                0.0s
 => [build 5/6] COPY . /app                                                                                                                                                                          0.1s
 => [build 6/6] RUN yarn build:staging                                                                                                                                                               1.0s
 => ERROR [stage-1 4/4] COPY --from=build /app/build ./build                                                                                                                                         0.0s 
------                                                                                                                                                                                                    
 > [stage-1 4/4] COPY --from=build /app/build ./build:
------
failed to compute cache key: "/app/build" not found: not found

I am using craco to build my project. Here is package.json scripts.

  "scripts": {
    "start": "PORT=3006 craco start",
    "start:development": "REACT_APP_ENV=development PORT=3006 craco start",
    "start:staging": "REACT_APP_ENV=staging PORT=3006 craco start",
    "start:prod": "REACT_APP_ENV=production PORT=3006 craco start",
    "build": "craco build",
    "build:dev": "env-cmd -f .env.development craco build",
    "build:staging": "env-cmd -f .env.staging craco build",
    "build:prod": "env-cmd -f .env.production craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

Answer 1

It looks like you are using an old version. Which docker version are you using?

Multistage build syntax was introduced in Docker Engine 17.05.