如何在自定义域的 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一切正常，我可以通过 访问我的 Vue 应用程序local.myapp.com。但是我无法使用 Docker 以相同的方式配置它。

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

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

输入http://local.myapp.com/-yarn serve --port=80 --host=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;
        }
    }
}

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