如何在容器中运行WebPack DevServer？

Question

假设由于X-Frame-Options和其他浏览器的保护，我们希望在not localhost的环境中进行开发，但不想每次都进行完整部署。

特别是在Windows上，Vue JS和Traefik代理。

理想情况下不创建新图像。

Answer 1

为此，您需要启用更改I am getting an "Invalid Host header" message, when running my React app in a Webpack dev server on Cloud9.io中记录的公共主机名的功能>

对于Vue，我刚添加了具有最简单但最不安全的解决方案的文件vue.config.js，请检查链接的解决方案以获得更安全的解决方案。

module.exports = {
  configureWebpack: {
    devServer: {
      compress: true,
      disableHostCheck: true,
    }
  }
}
利用Using Docker-Compose, how to execute multiple commands中的技术，我们可以cd到/work/文件夹并运行npm run serve（或与您的框架等效的任何命令）。

services:
  vue:
    image: node:lts
    networks:
      - intranet
    volumes:
      - /d/p/spring-cloud-demo/vue-app:/work
    command: >
      bash -c "cd /work
      && npm run serve"
    deploy:
      labels:
        - traefik.enable=true
        - traefik.http.routers.vue.rule=PathPrefix(`/`)
        - traefik.http.services.vue.loadbalancer.server.port=8080
为了使文件监视卷在Windows计算机中正常工作。您需要https://github.com/merofeev/docker-windows-volume-watcher，它将向文件已更改的Docker容器广播更改，以便devServer触发构建。