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

Question

Basically what I'm trying to achieve is to have my app running on local.myapp.com instead of localhost.

Notice: On the host machine inside /etc/hosts I have 127.0.0.1 local.myapp.com entry and my docker-compose configuration has ports: 80:80.

When I run this command on the host machine: yarn serve --port=80 --host=local.myapp.com everything works and I can access my Vue application by local.myapp.com. However I can't configure it the same way using Docker.

All commands below are run within the docker container:

Entering http://local.myapp.com/ with yarn serve --port=80 - gives me Invalid Host header

Entering http://local.myapp.com/ with yarn serve --port=80 --host=local.myapp.com - gives me ERR_EMPTY_RESPONSE.

Doing wget http://local.myapp.com:80 inside container works.

What am I missing?

Answer 1

Aside from just running your Vue container, there are a few other things that you need to setup for this to work.

Assuming you already have a Dockerfile for your Vue app, you need to set an extra container for a reverse proxy. It might look something like this:

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

and a configuration inside 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;
        }
    }
}

The reason you're getting empty response and invalid host header is because the container's localhost is different from the host's localhost.