Recently I’ve created a NuxtJS application that will run in SSR mode, this is deployed to Cloud Run on GCP via a docker image.
In order to allow the autoscaling to work quicker and to allow quicker start ups I wanted to reduce the docker size of the application to as small as possible.
When you’re first starting with NuxtJS they recommend a dockerfile you can use for your application, but it isn't optimized work size.
Below is the typical dockerfile for Nuxt applications.
FROM node:16
WORKDIR /usr/src/app COPY . ./ RUN yarn EXPOSE 8080
ENV HOST=0.0.0.0
ENV PORT=8080 RUN yarn build CMD [ "yarn", "start" ]
On a standard application, this will create an image size around 500MB.
What can we do to reduce the docker image size?
The node module folder is one of the largest folders in the application. This is because the dockerfile above will install all the dependencies needed for both development and production.
But if you’re deploying the application from this dockerfile you don't need development dependencies such as jest.
Use the --production option in the yarn install command.
yarn install --productionThis will install all packages in the dependencies property and ignore all in devDependencies within your package.json.
When you run nuxt build it will create the client and server files the applications needs to run the application.
These are stored in the .nuxt/dist folder, but the server.js file will still depend on files stored in the node_modules folders.
Therefore you will need to install all the dependencies rather than just the dependencies needs to run the Nuxt application.
There is an option on the build command called Standalone. This will move the dependencies used from node_modules into the .nuxt/dist/server.js file, so we don't need the node_modules anymore.
If after the build is successful you get errors about modules missing from node_modules folder then you might have modules loaded in your nuxt.config.js modules property. For standalone to work correctly you need to move these over to buildModules.
The only package you would need to run nuxt is nuxt package itself, but you don't need the entire nuxt package you can use nuxt start to run your application.
There’s a separate package that you can use which is optimized for running SSR bundles.
FROM node:16 as builder WORKDIR /usr/src/builder ADD . ./ RUN yarn install --production
RUN yarn build --standalone FROM node:16-alpine as starter WORKDIR /usr/src/app RUN yarn add "nuxt-start@2.15.8" COPY --from=builder /usr/src/builder/.nuxt /usr/src/app/.nuxt
COPY --from=builder /usr/src/builder/nuxt.config.js /usr/src/app/
COPY --from=builder /usr/src/builder/static /usr/src/app/ ENV HOST=0.0.0.0
ENV PORT=8080
ENTRYPOINT ["npx", "nuxt-start"] EXPOSE 8080
Originally published at https://paulund.co.uk.
