N
Nuxt•6mo ago
tmorgan497

High CPU Usage in Docker when running Nuxt in dev

When I run nuxt with yarn run dev in my docker container, the CPU usage of the container is high. Also, every few seconds, the logs output this: 
frontend-container    | [nitro-runtime] request: 0.04ms
frontend-container    | [nitro-runtime] render:html: 0.058ms
frontend-container    | [nitro-runtime] render:response: 0.009ms
frontend-container    | [nitro-runtime] beforeResponse: 0.006ms
frontend-container    | [nitro-runtime] dev:ssr-logs: 0.007ms
frontend-container    | [nitro-runtime] afterResponse: 0.306ms
frontend-container    | [nitro-runtime] request: 0.039ms
frontend-container    | [nitro-runtime] request: 0.04ms
frontend-container    | [nitro-runtime] render:html: 0.058ms
frontend-container    | [nitro-runtime] render:response: 0.009ms
frontend-container    | [nitro-runtime] beforeResponse: 0.006ms
frontend-container    | [nitro-runtime] dev:ssr-logs: 0.007ms
frontend-container    | [nitro-runtime] afterResponse: 0.306ms
frontend-container    | [nitro-runtime] request: 0.039ms
I don't know if that is expected behavior, but when I run yarn run dev outside of the container, the CPU usage is a lot lower and the nitro-runtime logs don't occur. Here's my Dockerfile: 
# frontend/frontend.Dockerfile
FROM node:20.10.0-alpine AS dev
ENV HOST 0.0.0.0
WORKDIR /code/frontend
RUN apk --no-cache add curl
COPY package.json ./
RUN yarn cache clean && yarn install
COPY . .
# frontend/frontend.Dockerfile
FROM node:20.10.0-alpine AS dev
ENV HOST 0.0.0.0
WORKDIR /code/frontend
RUN apk --no-cache add curl
COPY package.json ./
RUN yarn cache clean && yarn install
COPY . .
and my compose file for the frontend container: 
    frontend:
        env_file:
            - ./.env
        environment:
            - BASE_URL=${BASE_URL}
        working_dir: /code/frontend
        container_name: ${FRONTEND_CONTAINER_NAME:-frontend}
        build:
            context: ./frontend
            dockerfile: ./frontend.Dockerfile
            target: ${STAGE:-dev}
        ports:
            - ${FRONTEND_9000_PORT:-9000}:9000
            - ${FRONTEND_8080_PORT:-8080}:8080
            - 3000:3000
        volumes:
            - ./frontend:/code/frontend:rw
            - frontend_node_modules:/code/frontend/node_modules
        tmpfs: /tmp
        command: /bin/sh -c "cd /code/frontend && yarn run dev --host"
    frontend:
        env_file:
            - ./.env
        environment:
            - BASE_URL=${BASE_URL}
        working_dir: /code/frontend
        container_name: ${FRONTEND_CONTAINER_NAME:-frontend}
        build:
            context: ./frontend
            dockerfile: ./frontend.Dockerfile
            target: ${STAGE:-dev}
        ports:
            - ${FRONTEND_9000_PORT:-9000}:9000
            - ${FRONTEND_8080_PORT:-8080}:8080
            - 3000:3000
        volumes:
            - ./frontend:/code/frontend:rw
            - frontend_node_modules:/code/frontend/node_modules
        tmpfs: /tmp
        command: /bin/sh -c "cd /code/frontend && yarn run dev --host"
5 Replies
tmorgan497
tmorgan497OP•6mo ago
and my nuxt.config.ts: 
import * as path from 'path';
const auraPath = path.join(__dirname, 'pv-presets', 'aura').replace(/\\/g, '/');

export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: false,
  watchers: {
    webpack: {
      ignored: /node_modules/
    }
  },

  css: [
    '~/assets/css/main.css',
  ],

  typescript: {
    includeWorkspace: true
  },

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  modules: [
    'nuxt-icon',
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    'nuxt-primevue',
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],

  primevue: {
    options: { unstyled: true, ripple: true },
    importPT: { as: 'Aura', from: auraPath },
    components: {
      // prefix: 'P',
      exclude: ['Editor', 'Chart']
    }
  },
})
import * as path from 'path';
const auraPath = path.join(__dirname, 'pv-presets', 'aura').replace(/\\/g, '/');

export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: false,
  watchers: {
    webpack: {
      ignored: /node_modules/
    }
  },

  css: [
    '~/assets/css/main.css',
  ],

  typescript: {
    includeWorkspace: true
  },

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  modules: [
    'nuxt-icon',
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    'nuxt-primevue',
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],

  primevue: {
    options: { unstyled: true, ripple: true },
    importPT: { as: 'Aura', from: auraPath },
    components: {
      // prefix: 'P',
      exclude: ['Editor', 'Chart']
    }
  },
})
tmorgan497
tmorgan497OP•6mo ago
Here's a minimal app with docker that reproduces the issue: https://github.com/tmorgan497/minimal-nuxt-docker
GitHub
GitHub - tmorgan497/minimal-nuxt-docker: A minimal Nuxt App with Do...
A minimal Nuxt App with Docker. Contribute to tmorgan497/minimal-nuxt-docker development by creating an account on GitHub.
tmorgan497
tmorgan497OP•6mo ago
I may have narrowed it down to chokidar. When i comment out the environment variable CHOKIDAR_USEPOLLING=true, the CPU usage goes down to a normal level (under 1%). IIRC, chokidar is used for HMR, so I usually leave it active during development so I don't have to restart the container everytime I make a change. Any thoughts on how to reduce its CPU usage? I added a watcher ignore param to my nuxt.config.ts, but it doesn't seem to do anything to help reduce the CPU usage. 
  watchers: {
    webpack: {
      ignored: /node_modules/
    }
  },
  watchers: {
    webpack: {
      ignored: /node_modules/
    }
  },
tmorgan497
tmorgan497OP•6mo ago
I created a new issue on the nuxt github. https://github.com/nuxt/nuxt/issues/27617
GitHub
High CPU Usage with Nuxt Dev Server in Docker · Issue #27617 · nuxt...
Environment - Operating System: Windows_NT - Node Version: v20.10.0 - Nuxt Version: - - CLI Version: 3.12.0 - Nitro Version: - - Package Manager: unknown - Builder: - - User Config: - - Runtime Mod...
tmorgan497
tmorgan497OP•6mo ago
Tested on NixOS. I don't get the same issue with high CPU usage. Maybe it's a Windows issue only. I'll try to rule out an issue with my own machine by running it on another Windows machine when I get a chance. https://github.com/nuxt/nuxt/issues/27617#issuecomment-2173371370
GitHub
High CPU Usage with Nuxt Dev Server in Docker · Issue #27617 · nuxt...
Environment - Operating System: Windows_NT - Node Version: v20.10.0 - Nuxt Version: - - CLI Version: 3.12.0 - Nitro Version: - - Package Manager: unknown - Builder: - - User Config: - - Runtime Mod...
Want results from more Discord servers?
Add your server