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

Question

基本上我想要实现的是让我的应用程序在 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 访问我的 Vue 应用程序.myapp.com。但是我无法使用 Docker 以相同的方式配置它。

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

使用 yarn serve --port=80 输入 http://local.myapp.com/ - 给我 Invalid Host header

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

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

我错过了什么？

Answer 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;
        }
    }
}

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