Doesn't work with docker container

Question

Doesn't work with docker container

Cally99 opened this issue 3 years ago · comments

Tom Callaghan commented 3 years ago

Versions

nuxt-vite: v0.1.1
nuxt: v2.15.7

Reproduction

To reproduce this error.

"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.11",
"nuxt-vite": "^0.1.1",
"browser-env": "^3.2.5",
"eslint": "^4.19.1",
"eslint-plugin-vue": "^4.0.0",
"require-extension-hooks": "^0.3.2"
},

frontend:
build:
context: ./frontend
dockerfile: docker/Dockerfile.dev
volumes:
- "./frontend:/app/"
- "/app/node_modules"
ports:
- "3000:3000"
environment:
- API_URI=http://backend:8000/api
networks:
- main

FROM node:14.15.5

WORKDIR /app/

COPY . /app/

ENV SENTRY_DISABLED=true
ENV HOST 0.0.0.0

EXPOSE 3000

ENTRYPOINT ["sh", "docker/start_dev.sh"]

#!/bin/bash

npm rebuild node-sass
npm config set save-prefix=''
npm install
npm install --save nuxt

npm run dev

run docker compose up -d

Description

Page keeps refreshing when running in docker container.

buildModules: [
// https://go.nuxtjs.dev/typescript
'nuxt-vite',

],
build: {
/*
** Run ESLint on save
*/
},
vite: {
ssr: true,
server: {
fs: {
strict: false
}
}
}
}

Bobbie Goede · Answer 1 · Thu Aug 19 2021 22:54:30 GMT+0800 (China Standard Time)

I had the same issue, the page keeps refreshing because vite tries to connect to websocket on port 24678 (default) in dev mode. You need to expose the port by adding - "24678:24678" to ports in your compose file.

Giles Butler · Answer 2 · Fri Aug 20 2021 13:27:44 GMT+0800 (China Standard Time)

I also had the same issue but only exposing the 24678 port didn't work for me, I also had to add the following to my Vite config...

server: {
    hmr: {
      protocol: 'ws',
      host: 'localhost'
    }
  },

Taken from vitejs/vite#3002
Thanks for the heads up re the port though @BobbieGoede 👍

ROBJkE · Answer 3 · Mon Mar 21 2022 21:49:01 GMT+0800 (China Standard Time)

Had the same issue with Docker and a nuxt3 blank project.
@BobbieGoede solution helped

So if you are faceing [vite] connecting... and [vite] server connection lost. polling for restart... in your console and you are using a docker setup, dont forget to expose port 24678 too

Richard Rohrig · Answer 4 · Sat Apr 02 2022 19:30:00 GMT+0800 (China Standard Time)

I noticed with a fresh install exposing 24678 did the trick.

However, after installing tailwind css the error resumed.

Then creating a vite.config.js with:

export default { server: { hmr: { protocol: 'ws', host: 'localhost' } }, }
got things working smoothly again.

Thanks @BobbieGoede and @gilesbutler

Dan Pastori · Answer 5 · Thu Apr 21 2022 06:52:30 GMT+0800 (China Standard Time)

We had this working through docker using @gilesbutler 's config until we updated to Nuxt 3 RC 1:

nutxt.config.ts:

  vite: {
    server: {
      hmr: {
        protocol: 'ws',
        host: 'localhost'
      }
    }
  },

docker-compose.dev.yml:

version: '3.8'
services:
  node:
    volumes:
      - .:/usr/src/app:cached
    networks: 
      - roast-api_development
    ports: 
      - 24678:24678
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.roast.rule=Host(`roast.dev.test`)"
      - "traefik.http.routers.roast.entrypoints=websecure"
      - "traefik.http.routers.roast.tls=true"
      - "traefik.http.services.roast.loadbalancer.server.port=3000"
      - "traefik.http.services.roast.loadbalancer.server.scheme=http"
    command: "yarn dev"

networks:
  roast-api_development:
    external: true

Is anyone else having issues after upgrading to Nuxt 3 RC1?

Sébastien Palluel · Answer 6 · Tue May 03 2022 18:10:04 GMT+0800 (China Standard Time)

I have the same HMR issue with vite when running nuxt3 on Docker. It's reloading the page indefinitely. The port 24678 is open and the config seems right. This issue arise on both RC1 and RC2.

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    buildModules: ['@nuxtjs/stylelint-module', '@nuxtjs/eslint-module'],
    css: ['vuetify/styles'],
    build: {
        transpile: ['vuetify', '@apollo/client', 'ts-invariant/process']
    },
    vite: {
        server: {
            hmr: {
                protocol: 'ws',
                host: 'localhost'
            }
        }
    }
})

nuxt3.dockerfile

# Dockerfile
FROM node:16-alpine3.14

# create destination directory
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

# update and install dependency
RUN apk update && apk upgrade
RUN apk add git

# copy the app, note .dockerignore
COPY package.json .
RUN yarn install
COPY . .
RUN yarn build

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000

CMD [ "yarn", "dev" ]

docker-compose.dev.yml

version: '3.9'

services:
  nuxt3:
    build:
      context: .
      dockerfile: nuxt3.dockerfile
    ports:
       - 3000:3000
       - 24678:24678

Sébastien Palluel · Answer 7 · Wed Jun 01 2022 21:18:13 GMT+0800 (China Standard Time)

The solution was to remove this config from the nuxt.config.ts:

server: {
    hmr: {
        protocol: 'ws'
        host: 'localhost'
    }
}

As long as you bind port 24678 to the 24678 port of your host you should see the vite hmr module as connected and it shouldn't loop.

The twist after that is to completely clear the cache of your browser as described in here: nuxt/nuxt#11956

Alex Balatsky · Answer 8 · Sun Jun 12 2022 23:28:32 GMT+0800 (China Standard Time)

+1 here. I have two exactly same configs for Nuxt (RC3) and pure Vite. Vite is working fine, Nuxt is not. Even if I set hmr: false it keeps infinite reloading. Nuxt is running inside docker container behind Traefik proxy.

defineConfig({
  server: {
    host: '0.0.0.0',
    hmr: {
      clientPort: 443,
    }
  },
})

defineNuxtConfig({
  vite: {
    server: {
      host: '0.0.0.0',
      hmr: {
        clientPort: 443,
      },
    }
  }
})

Miksser · Answer 9 · Sun Aug 07 2022 03:03:26 GMT+0800 (China Standard Time)

Problem is not resolved in 3.0.0 RC6. Need to open 24678 port =(

Cellarion · Answer 10 · Thu Aug 11 2022 21:36:11 GMT+0800 (China Standard Time)

On Mac computer, adding port 24678 in docker compose works fine, but changing to a computer with linux pop os, it does not work. I must stop and boot my docker container to see some changes.
Furthermore there is infinite looping when I add the folowing lines in nuxt.config.ts :

vite: {
        plugins: [svgLoader()],
        server: {
            hmr: {
                protocol: 'ws',
                host: 'localhost'
            }
        }
    },

Firefox browser says it can't connect to 24678 port.

Sebastien HUG DE LARAUZE · Answer 11 · Sun Aug 21 2022 22:04:20 GMT+0800 (China Standard Time)

When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to { usePolling: true }. This is due to a WSL2 limitation with the Windows filesystem. (from Server Options - Vite)

export default defineNuxtConfig({
  vite: {
    server: {
      watch: { usePolling: true }
    }
  }
})

I had the issue that my project did not refresh when updating my source code when working in devcontainer (with Docker Desktop / Win10).

Sergey Vilkov · Answer 12 · Wed Sep 07 2022 01:29:06 GMT+0800 (China Standard Time)

Is this issue still being solved? Do you have any solution?

m0dch3n · Answer 13 · Tue Sep 20 2022 15:42:14 GMT+0800 (China Standard Time)

I'm also encountering this issue.

Pure vite works great with

server: {
    hmr: {
      clientPort: 443,
    },

when proxying the docker container to https nginx

However in Nuxt it doesn't work...

What I found out, and which influences where the browser tries to connect to:

    hmr: {
      host: 'ip of docker container',
      clientPort: 443,
    },

makes the binding work, however the browser then tries to connect to 'ip of docker container':443/_nuxt/ (which does not work outside the container)

When changing to

    hmr: {
      host: '0.0.0.0',
      clientPort: 443,
    },

Binding works too, but the browser then tries to connect to 0.0.0.0:443/_nuxt/ (which does also not work)

When changing to

    hmr: {
      host: myhttpsdomain.com,
      clientPort: 443,
    },

the binding does no longer work, because the docker does not resolve my domain...

I could trick around, and make my domain resolve differently within the docker container (for example to the docker ip), but then I have further issues because the resolved ip is also used in other cases...

So I suppose the solution to this, is that hmr.host should not influence where the browser tries to connect to. It should simply take the same domain/ip it is loading the devserver.

Jay Rogers · Answer 14 · Fri Nov 11 2022 02:23:13 GMT+0800 (China Standard Time)

(Removed intentionally to prevent confusion between Nuxt 2 & Nuxt 3)

Daniel Roe · Answer 15 · Fri Nov 11 2022 02:27:04 GMT+0800 (China Standard Time)

@jaydrogers This is a module for nuxt 2. It sounds like you are running Nuxt 3 instead?

Jay Rogers · Answer 16 · Fri Nov 11 2022 02:28:52 GMT+0800 (China Standard Time)

@danielroe: Correct, we are on Nuxt 3. Sorry, I if I need to remove my previous comment and drop it on another issue, let me know 👍

Daniel Roe · Answer 17 · Fri Nov 11 2022 02:55:49 GMT+0800 (China Standard Time)

I would recommend raising it in the issue you linked or in another one on nuxt/framework. Ideally with a reproduction so Pooya or I can investigate further.