DEV Community

Cover image for Reducing Docker image size of a Nuxt SSR application

Reducing Docker image size of a Nuxt SSR application

Denis on May 17, 2021

Recently I had to create a deployment of a NuxtJS application which is running in SSR mode. I have a separate backend that is already packed in Doc...
Collapse
 
artalus profile image
Artalus

How about experiment with something like

RUN yarn install && yarn build --standalone && rm -rf node_modules && yarn add "nuxt-start@${NUXT_VERSION}"
Enter fullscreen mode Exit fullscreen mode

This should further decrease image bloat because node_modules will be created and deleted as part of a single layer creation "function".

Collapse
 
fbjorn profile image
Denis

Thanks for a suggestion, sounds pretty interesting. Need to try it out.

I'm using self-hosted agents for CI, so they keep docker cache between the builds. This way I'm able to skip yarn install part cause it's available in cache. Anyway I'll try your suggestion on the same codebase for clarity and report back soon!

Collapse
 
fbjorn profile image
Denis

@artalus please check 🙂

Thread Thread
 
artalus profile image
Artalus

My initial concern was about "why even have node_modules in final docker image at all", and I actually was hoping for 100Mb decrease. But couple of minutes after posting the suggestion I actually realized that, well, nuxt-start is a Node application itself, and it will likely require a lot of dependencies to work - because that's just the reality of Node applications ¯\_(ツ)_/¯. So the only gain would be due to removal of a slice of node_modules content that is required by yarn build but not by nuxt-start. But small gain is still a gain 🙃

Collapse
 
kcq profile image
Kyle Quest • Edited

Nice post!

It's great if Alpine works for your app and your environment. There's a lot of gotchas with it though and many people that initially adopt it migraine away from it eventually.

For some containerized apps DockerSlim is a good option. It lets you use regular and developer friendly base images minifying the images as a post-processing step. We have nuxt SSR apps too and I'll be happy to share our setup :)

Collapse
 
linkdevk profile image
Kyle L

Hey Kyle I'd be very interested to see your setup!

Collapse
 
maxim_bashevoy_74309f949e profile image
Maxim Bashevoy

Does this work for nuxt PWA or am I missing something? Getting this error: FATAL Cannot find module '@nuxtjs/pwa' Require stack: /app/node_modules/@nuxt/core/dist/core.js

Collapse
 
msoler75 profile image
Marcel Soler / Pigmalión Tseyor

Same here with strapi module:

Error: Cannot find module '@nuxtjs/strapi'

Require stack: │
│ - /app/node_modules/nuxt-start/node_modules/@nuxt/core/dist/core.js │

Collapse
 
mgfouad profile image
mg.fouad

same here while deploying on azure

"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint": "npm run lint:js"
},
"dependencies": {
"nuxt": "^2.15.8",
},
"devDependencies": {
"@nuxtjs/pwa": "^3.3.4",
"webpack": "^4.46.0"
}

Collapse
 
mgfouad profile image
mg.fouad

try to add in buildModules instead of "module" in nuxt.config

Collapse
 
mgfouad profile image
mg.fouad

Fixed:
adding the "@nuxtjs/pwa" in buildModules in case of SSR: true (default settings) , and remove "@nuxtjs/pwa" from modules

Collapse
 
hemric profile image
Hemric

Hi, i've got an issue with axios when starting the server:

Error: Cannot find module '@nuxtjs/axios'

It's the first modules loaded in my nuxt.config.ts

...
modules: [
    '@nuxtjs/axios', 
    ...
],
...
Enter fullscreen mode Exit fullscreen mode

Am i missing something ?

Collapse
 
artis3n profile image
Ari Kalfus

I hit an error with bootstrap-vue trying this on my project and didn't want to troubleshoot why that didn't get bundled into the standalone build, but overall this is great :)

Collapse
 
king11 profile image
Lakshya Singh

Great article thanks