docker - 如何在容器中运行 WebPack DevServer？

Question

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

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

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

Answer 1

为此，您需要启用更改公共(public)主机名，如 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 触发构建。