Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vite and Docker #4116

Closed
6 tasks done
louiss0 opened this issue Jul 4, 2021 · 32 comments
Closed
6 tasks done

Vite and Docker #4116

louiss0 opened this issue Jul 4, 2021 · 32 comments
Labels
documentation Improvements or additions to documentation help wanted Extra attention is needed

Comments

@louiss0
Copy link

louiss0 commented Jul 4, 2021

Describe the bug

vite and docker dont seem to work well together every time i develop with both the browser reloads every minute. The browser reloads up to five time per initial load . Also the server crashes at random times during development .

Reproduction

https://github.com/louiss0/vue-2-template

System Info

docker-desktop 3.35

Used Package Manager

npm

Logs

No response

Validations
@akauppi
Copy link
Contributor

akauppi commented Aug 1, 2021

@louiss0 's description maybe needs some editing, to be reproducible.

I'm also setting up Vite HMR with Docker Compose. The part where it still fails is HMR - I just don't get any changes to the browser, if Vite is being run under Docker. If I run it natively, HMR works like magic.

This issue: Vite hmr does not work in Docker was specifically about HMR but is now closed.

Want to help solving these issues. My work is currently uncommitted, but will be available and reproducible soon.

@akauppi akauppi mentioned this issue Aug 2, 2021
Closed
@paulocastellano
Copy link

It still without solution?

@axe-me axe-me mentioned this issue Sep 6, 2021
Closed
@JosephusPaye
Copy link

I had the same problem and was able to fix it by setting a custom HMR port and exposing that port from the docker container.

  • Set Vite's server.hmr.port config option to the port you want to use for HMR:
export default defineConfig({
  server: {
    hmr: {
      port: 3010,
    },
  },
  // other options...
})
  • Expose the HMR port when running the docker container: (here I'm using docker-compose)
docker-compose run \
  -p 3000:3000 \       # my dev server port (not needed if you're not using port 3000)
  -p 3010:3010 \       # the HMR port
  webservice \
  yarn dev

@louiss0
Copy link
Author

louiss0 commented Dec 1, 2021 via email

@mlaopane
Copy link

mlaopane commented Dec 17, 2021 •
edited
Loading

Thanks @JosephusPaye ❤️

In my case I was also overriding the host with 0.0.0.0 so I had configure it too :

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    hmr: {
      host: '0.0.0.0',
      port: 3010,
    },
  },
  // other options...
});

@louiss0
Copy link
Author

louiss0 commented Dec 17, 2021 via email

@bluwy
Copy link
Member

bluwy commented Mar 12, 2022

It's hard to "take action" on this issue as it's mostly an issue with Vite's behaviour and Docker not playing well together. It may be better to document the solutions instead. Feel free to contribute to the docs if y'all are familiar with setting Docker up with Vite!

@bluwy bluwy added the documentation Improvements or additions to documentation label Mar 12, 2022
@louiss0
Copy link
Author

louiss0 commented May 18, 2022 via email

This was referenced May 20, 2022
Closed
Closed
@bluwy bluwy added the help wanted Extra attention is needed label May 22, 2022
@github-actions
Copy link

Hello @louiss0. We like your proposal/feedback and would appreciate a contribution via a Pull Request by you or another community member. We thank you in advance for your contribution and are looking forward to reviewing it!

@louiss0
Copy link
Author

louiss0 commented May 23, 2022 via email

@jonathan-f-silva
Copy link

jonathan-f-silva commented May 27, 2022 •
edited
Loading

I finally did it! HMR reloading with Nginx reverse proxy and Docker Compose!

  • server key on vite.config.js for using port 3101 for HMR
server: {
  host: true,
  hmr: {
    port: 3101,
  },
}
upstream ui {
  server ui:3000;
}
upstream hmr {
  server ui:3101;
}
server {
  listen 80;
  location / {
      proxy_pass http://ui;
  }
}
server {
  listen 3101;
  location / {
      proxy_pass http://hmr;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
  }
}
  • Docker Compose setup
services:
  reverse-proxy:
    build: reverse-proxy
    ports:
      - 80:80
      - 3101:3101
  ui:
    build: ui
    ports:
      - 3000
      - 3101

@louiss0
Copy link
Author

louiss0 commented May 29, 2022

I finally did it! HMR reloading with Nginx reverse proxy and Docker Compose!

  • server key on vite.config.js for using port 3101 for HMR
server: {
  host: true,
  hmr: {
    port: 3101,
  },
}
upstream ui {
  server ui:3000;
}
upstream hmr {
  server ui:3101;
}
server {
  listen 80;
  location / {
      proxy_pass http://ui;
  }
}
server {
  listen 3101;
  location / {
      proxy_pass http://hmr;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
  }
}
  • Docker Compose setup
version: '3.9'
services:
  reverse-proxy:
    build: reverse-proxy
    ports:
      - 80:80
      - 3101:3101
  ui:
    build: ui
    ports:
      - 3000
      - 3101

Can I get the files for this I tried setting this up myself but I'm confused and stuck

@louiss0
Copy link
Author

louiss0 commented Jun 1, 2022 via email

@jonathan-f-silva
Copy link

@louiss0 I made a repo with a example explaining it on https://github.com/jonathan-f-silva/vite-docker-hmr-dev-base. Feel free to ask anything if unclear! 👍

@bluwy bluwy mentioned this issue Jun 26, 2022
Closed
4 tasks
@koyadume
Copy link

koyadume commented Jun 27, 2022 •
edited
Loading

I have been running vite dev server behind nginx proxy on docker and kubernetes for a long time without facing any of the issues which have been described in various threads. I even documented some suggestions in #8780 to make life of a developer easy for running vuejs apps in docker / kubernetes.

There is no reason why hmr should use a different host / port than the values used to access the application on the browser side. If vuejs/vite uses location.host and location.port for hmr host and port respectively then whole hmr section can be eliminated.

@aspiiire
Copy link

aspiiire commented Jul 4, 2022

Any update? I don't want to add Nginx

@sapphi-red sapphi-red mentioned this issue Jul 5, 2022
Merged
9 tasks
@torenware
Copy link

I have been running vite dev server behind nginx proxy on docker and kubernetes for a long time without facing any of the issues which have been described in various threads. I even documented some suggestions in #8780 to make life of a developer easy for running vuejs apps in docker / kubernetes.

Having looked at this a bit: it would be helpful if you posted a working configuration somewhere. I looked at #8780; I was not able to get that approach to work.

@tony19
Copy link
Contributor

tony19 commented Jul 22, 2022

Checkout the examples at https://github.com/sapphi-red/vite-setup-catalogue

@torenware
Copy link

Checkout the examples at https://github.com/sapphi-red/vite-setup-catalogue

These diagrams are very useful, thank you.

I just got the reverse proxy working with websockets and SSL, and will write it up soon. I also needed to add polling for bind mounts, since Vite doesn't notice otherwise that the bind mount has changed.

@torenware
Copy link

I've spent the last week working on this issue, and have a demo repo up. I've also written this up in a series of Medium articles. In general, people who commented in this issue here helped me a lot in getting things to work.

@iamjohnmills
Copy link

I was having this issue with Docker/vite. Here's what worked for me in my vite.config.ts file:

  server: {
    port: 3000,  // exposed docker image port
    host: true,
    hmr: {
      port: 3001, // exposed docker image port
      clientPort: 5001, // mapped docker container port
    },
  },

I didn't really want to put the docker container port in the config, but it does work now.

@louiss0
Copy link
Author

louiss0 commented Aug 22, 2022 via email

@4iloveg
Copy link

4iloveg commented Aug 30, 2022

I have tried many combinations. This worked for me:
server: { port: 3000, host: true, hmr: { host: 'localhost', }, },

Docker-compose: ports: - "3000:3000"

@akauppi
Copy link
Contributor

akauppi commented Aug 31, 2022 •
edited
Loading

I still think a better explanation of the bug / problem is needed.

My config (below) works without needing to define hmr. I don't use any Nginx proxy in between. If that is part of the problem, it should be mentioned in the title / description. @louiss0 changing the title to "Vite and Docker and Nginx" would be a start.

server: {
  host: true,   // needed for the DC port mapping to work
  strictPort: true,
  port: 3000
}
  • Vite 3.1.0-beta.1
  • Docker Desktop for Mac 4.11.1

@louiss0
Copy link
Author

louiss0 commented Oct 11, 2022 via email

@torenware
Copy link

torenware commented Oct 11, 2022 via email

@louiss0
Copy link
Author

louiss0 commented Oct 11, 2022 via email

@louiss0
Copy link
Author

louiss0 commented Oct 11, 2022 via email

@johnsonjo4531
Copy link

johnsonjo4531 commented Oct 13, 2022 •
edited
Loading

My problem was that Vite uses chokidar and chokidar doesn't notice updates from docker unless you provide the usePolling: true option:

usePolling (default: false). Whether to use fs.watchFile (backed by polling), or fs.watch. If polling leads to high CPU utilization, consider setting this to false. It is typically necessary to set this to true to successfully watch files over a network, and it may be necessary to successfully watch files in other non-standard situations. Setting to true explicitly on MacOS overrides the useFsEvents default. You may also set the CHOKIDAR_USEPOLLING env variable to true (1) or false (0) in order to override this option.
Chokidar docs

To fix this I added the server.watch.usePolling option:

watch: {
  usePolling: true,
},

This should be a minimum viable config:

export default defineConfig({
  server: {
    watch: {
      usePolling: true,
    },
    host: true, // needed for the DC port mapping to work
    strictPort: true,
    port: 3333,
   }
 });

@louiss0 louiss0 closed this as completed Oct 14, 2022
@louiss0
Copy link
Author

louiss0 commented Oct 14, 2022

I'm done

@louiss0
Copy link
Author

louiss0 commented Oct 14, 2022 via email

@sebastiaan-dev
Copy link

Just as an addition, I got it working by adding the repo as a volume as well. So:

export default defineConfig({
  server: {
    host: true,
    strictPort: true,
    port: 5000,
    watch: {
      usePolling: true,
    },
  },
});

With the docker-compose config being:

  client:
    container_name: frontend-client
    image: frontend-client
    restart: always
    build:
      context: .
      dockerfile: ./${PATH}/Dockerfile.local
      args:
        - PNPM_VERSION=7.13.4
        - SERVICE_PATH=${PATH}
        - PACKAGE_NAME=${PACKAGE_NAME}
    ports:
      - 5000:5000
    volumes:
      - .:/usr/app/
      - ./usr/app/node_modules
      - ./usr/app/${PATH}/node_modules

To give a bit of context, this is using a monorepo with docker compose and pnpm.

@bluwy bluwy mentioned this issue Oct 17, 2022
Closed
1 task
@github-actions github-actions bot locked and limited conversation to collaborators Oct 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests