如何在容器中运行WebPack DevServer？

Question

假设我们希望在一个不是localhost的环境中开发，因为X-Frame-Options和其他浏览器保护，但不希望每次都进行完全部署。

具体来说，在Windows上，Vue JS和Traefik代理。

理想情况下无需创建新图像。

Answer 1

要使其工作，您需要启用更改公共主机名，如在Cloud9上的Webpack dev服务器中运行我的React应用程序时收到的“无效主机头”消息中所述。木卫一

对于Vue，我刚刚添加了一个文件Vue。配置。js对于最简单但最不安全的解决方案，请检查链接的解决方案以获得更安全的解决方案。

module.exports = {
  configureWebpack: {
    devServer: {
      compress: true,
      disableHostCheck: true,
    }
  }
}

利用Docker Compose中的技术，如何执行多个命令，我们可以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触发生成。