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

Question

基本上我想要实现的是让我的应用程序运行ning 在 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 容器中：

输入 http://local.myapp.com/ 和 yarn serve --port=80 - 给我 无效主机 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 是因为容器的本地主机与主机的本地主机不同。

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

How to run Vue Dev Server within a Docker container on a custom domain?

docker

webpack-dev-server

vue-cli

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

How to run Vue Dev Server within a Docker container on a custom domain?

docker

webpack-dev-server

vue-cli

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