如何在自定义域的 Docker 容器中运行 Vue Dev Server？答案

【问题标题】：How to run Vue Dev Server within a Docker container on a custom domain?如何在自定义域的 Docker 容器中运行 Vue Dev Server？
【发布时间】：2021-09-18 21:14:31
【问题描述】：

基本上我想要实现的是让我的应用在local.myapp.com 而不是localhost 上运行。

注意：在 /etc/hosts 内的主机上，我有 127.0.0.1 local.myapp.com 条目，我的 docker-compose 配置有 ports: 80:80。

当我在主机上运行此命令时：yarn serve --port=80 --host=local.myapp.com 一切正常，我可以通过local.myapp.com 访问我的 Vue 应用程序。但是我不能使用 Docker 以同样的方式配置它。

以下所有命令都在 docker 容器中运行：

用yarn serve --port=80 输入http://local.myapp.com/ - 给我无效的主机头

用yarn serve --port=80 --host=local.myapp.com 输入http://local.myapp.com/ - 给我ERR_EMPTY_RESPONSE。

在容器内执行wget http://local.myapp.com:80 有效。

我错过了什么？

【问题讨论】：

你能发布整个 docker-compose 文件吗？

标签： docker webpack-dev-server vue-cli

【解决方案1】：

除了运行您的 Vue 容器之外，您还需要设置一些其他的东西才能使其正常工作。

假设您的 Vue 应用程序已经有一个 Dockerfile，您需要为反向代理设置一个额外的容器。它可能看起来像这样：

services:
  ...
  
  proxy:
    image: nginx
    restart: always
    depends_on: 
      - vue
    ports:
      - 80:80
    volumes:
      - ./nginx_conf/:/etc/nginx

还有nginx_conf里面的配置

http {
    server {
        listen 80;
        server_name local.myapp.com;
        location / {
            proxy_pass http://vue;
            proxy_buffering on;
            proxy_buffers 12 12k;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;
        }
    }
}

您收到空响应和无效主机标头的原因是容器的本地主机与主机的本地主机不同。

【讨论】：