Why is my Docker Image so large for AstroJS app?

Question

I'm working on a webpage built with Astrojs. I'm fairly newbie as a frontend developer, and definitely not a full expert in Docker, but my current working folder is 270MB in size, dependencies included, yet when i build the docker image it gets to 1.32GB

This is my package.json in case it helps

{
  "name": "personalsite",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/image": "^0.5.1",
    "@astrojs/svelte": "^1.0.0",
    "@astrojs/tailwind": "^1.0.0",
    "svelte": "^3.50.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@tailwindcss/typography": "^0.5.7",
    "astro": "^1.2.1",
    "autoprefixer": "^10.4.8",
    "daisyui": "^2.25.0",
    "postcss": "^8.4.16",
    "svelte-fa": "^3.0.3"
  }
}

This is my DockerFile

FROM node:lts-alpine

ENV NODE_ENV=production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]

RUN yarn install
COPY . .

EXPOSE 3000
RUN chown -R node /usr/src/app
USER node
CMD ["yarn", "run", "start", "--host"]

I've even used the alpine image for Node.js, but it still seems so large for me. Do you know what might be the issue here?

EDIT: I followed the tips from the users in the comments and got a multistage dockerfile, but the image size is still kinda large? Now it's 654MB in size.

I know it's a big improvement but I'm still confused as how can this be still so large, since the source code is 60KB in size (it's just a small personal porfolio site with a couple animations)

This is the new updated dockerfile, did I miss something?

FROM node:lts as builder

ENV NODE_ENV=production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]

RUN yarn install --silent --production=true --frozen-lockfile
COPY . .

FROM node:lts-slim 
# I used slim because there were people online who recommended to not 
# mix and match distros and lts-alpine uses a different linux distro

WORKDIR /usr/src/app
COPY --from=builder /usr/src/app /usr/src/app 

EXPOSE 3000
RUN chown -R node /usr/src/app
USER node
CMD ["yarn", "run", "start", "--host"]

This is because your image is consist of botj node image well as your code files. — YJR, Sep 18 '22 at 17:49
That was my guess also, but how can I change that? How can I run my app without the code? — RabidTunes, Sep 18 '22 at 21:19
Create a multi-stag dockerfile. In early stages you do the install, and on the last stage you only copy the file. — BertC, Sep 19 '22 at 06:47
Updated post with new dockerfile, but it's still a bit large (650MB) — RabidTunes, Sep 19 '22 at 10:53
how big is the /usr/src/app folder? Also node:lts-alpine should be smaller than node:lts-slim but I'm not positive on that. — Michael Hobbs, Sep 23 '22 at 21:14

score 1 · Accepted Answer · answered Sep 26 '22 at 09:31

I realized that, for my use case, I just wanted the output of astro build which is a bunch of static html files with some javascript on certain parts, since I don't have server side rendering enabled.

I just changed completely the Dockerfile to the following and now it's really small, only 9.81MB

# ---> Build stage
FROM node:18-bullseye as node-build

ENV NODE_ENV=production
WORKDIR /usr/src/app
COPY . /usr/src/app/
RUN yarn install --silent --production=true --frozen-lockfile
RUN yarn build --silent

# ---> Serve stage
FROM nginx:stable-alpine
COPY --from=node-build /usr/src/app/dist /usr/share/nginx/html

Why is my Docker Image so large for AstroJS app?

1 Answers1