Answer a question

I have created a new Laravel project in Docker and I am creating a VirtualHost domain-name for my project. My docker-compose.yml looks like this.

version: '3'

networks:
  laravel:

services:
  nginx:
    image: nginx:stable-alpine
    container_name: nginx
    ports:
      - "8080:80"
    volumes:
      - ./src:/var/www/html
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php
      - mysql
    networks:
      - laravel

  webserver:
    image: jwilder/whoami
    environment:
      VIRTUAL_HOST: my-app.localhost
  nginx-proxy:
    image: jwilder/nginx-proxy
    ports:
      - "80:80"
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro

  mysql:
    image: mysql:5.7.29
    container_name: mysql
    restart: unless-stopped
    tty: true
    ports:
      - "3306:3306"
    environment:
      MYSQL_DATABASE: homestead
      MYSQL_USER: homestead
      MYSQL_PASSWORD: secret
      MYSQL_ROOT_PASSWORD: secret
      SERVICE_TAGS: dev
      SERVICE_NAME: mysql
    networks:
      - laravel

  php:
    build:
      context: .
      dockerfile: php.dockerfile
    container_name: php
    volumes:
      - ./src:/var/www/html
    ports:
      - "9000:9000"
    networks:
      - laravel

  composer:
    image: composer:latest
    container_name: composer
    volumes:
      - ./src:/var/www/html
    working_dir: /var/www/html
    depends_on:
      - php
    networks:
      - laravel

  npm:
    image: node:13.7
    container_name: npm
    volumes:
      - ./src:/var/www/html
    working_dir: /var/www/html
    entrypoint: ['npm']

  artisan:
    build:
      context: .
      dockerfile: php.dockerfile
    container_name: artisan
    volumes:
      - ./src:/var/www/html
    depends_on:
      - mysql
    working_dir: /var/www/html
    entrypoint: ['php', '/var/www/html/artisan']
    networks:
      - laravel

When I go to my-app.localhost I get

i'm e12cf052rrf0 

And when I go to localhost:8080 I get Laravel Home-page

How can I make my-app.localhost immediately show my laravel home page?

Answers

You are serving your Laravel webpage using the docker service "nginx". The service exposes port 8080 and binds it to port 80 inside the container.

That's why when you access localhost:8080 you are seeing your Laravel homepage and when you load my-app.localhost you are actually seeing the service "webserver".

To allow the jwilder reverse proxy to route your traffic to your laravel home page you should rewrite your nginx service with the following:

version: '3'

networks:
  laravel:

services:
  nginx:
    image: nginx:stable-alpine
    container_name: nginx
    environment:
      VIRTUAL_HOST: my-app.localhost
    volumes:
      - ./src:/var/www/html
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php
      - mysql
    networks:
      - laravel

  webserver:
    image: jwilder/whoami
    environment:
      VIRTUAL_HOST: whoami.localhost
    networks:
      - laravel

  nginx-proxy:
    image: jwilder/nginx-proxy
    ports:
      - "80:80"
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
    networks:
      - laravel

  mysql:
    image: mysql:5.7.29
    container_name: mysql
    restart: unless-stopped
    tty: true
    ports:
      - "3306:3306"
    environment:
      MYSQL_DATABASE: homestead
      MYSQL_USER: homestead
      MYSQL_PASSWORD: secret
      MYSQL_ROOT_PASSWORD: secret
      SERVICE_TAGS: dev
      SERVICE_NAME: mysql
    networks:
      - laravel

  php:
    build:
      context: .
      dockerfile: php.dockerfile
    container_name: php
    volumes:
      - ./src:/var/www/html
    ports:
      - "9000:9000"
    networks:
      - laravel

  composer:
    image: composer:latest
    container_name: composer
    volumes:
      - ./src:/var/www/html
    working_dir: /var/www/html
    depends_on:
      - php
    networks:
      - laravel

  npm:
    image: node:13.7
    container_name: npm
    volumes:
      - ./src:/var/www/html
    working_dir: /var/www/html
    entrypoint: ['npm']

  artisan:
    build:
      context: .
      dockerfile: php.dockerfile
    container_name: artisan
    volumes:
      - ./src:/var/www/html
    depends_on:
      - mysql
    working_dir: /var/www/html
    entrypoint: ['php', '/var/www/html/artisan']
    networks:
      - laravel

Now your app is available at my-app.localhost and your whoami service is available at whoami.localhost.

The environment variable "VIRTUAL_HOST" is what in this case determines on which url your service is going to be exposed by the reverse-proxy

UPDATE:

I didn't realize that you were using a different network for your laravel related services and your reverse proxy.

Both the reverse proxy and the services that you want to expose must be listening on the same Docker Network

In your case the jwilder reverse-proxy is listening on the default network created by docker-compose but the nginx server is listening on a different network called 'laravel'. Docker compose will always create a network for you, unless you specify otherwise. All services that are listening on the same network will be reachable by each other.

To solve this issue then, you must register the reverse-proxy on the laravel network. You can do this by adding the network tag in the service declaration like this:

  nginx-proxy:
    image: jwilder/nginx-proxy
    ports:
      - "80:80"
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
    networks:
      - laravel

  webserver:
    image: jwilder/whoami
    environment:
      VIRTUAL_HOST: whoami.localhost
    networks:
      - laravel

Now both services behind the reverse proxy will be reachable.