Docker multiple sites on different ports - macos

Question

Right now, I have a single static site running in a docker container, being served on port 80. This plays nicely, since 80 is the default for public traffic.
So in my /etc/hosts file I can add an entry like like 127.0.0.1 example.dev and navigating to example.dev and it automatically uses port 80.
What if I need to add an additional 2-3 dockerized dev sites to my environment? what would be the best course of action to prevent having to access these sites solely by port, i.e. 81,82,83,etc? Also, it seems under these circumstances, I would be limited to being able to rewrite only the dev site tied to port 80 to a specific hostname? is there a way to overcome this? what is the best way to manage multiple docker sites from different ports?
Note, I was hoping to access the docker container via the container's IP address i.e. 172.21.0.4 and then simply add a hostname entry to my hosts file, but accessing containers by IP address doesn't work on Mac.
docker-compose.yml
version: '3'
services:
mysql:
container_name: mysql
build: ./mysql
environment:
- MYSQL_DATABASE=example_dev
- MYSQL_USER=test
- MYSQL_PASSWORD=test
- MYSQL_ROOT_PASSWORD=0000
ports:
- 3307:3306
phpmyadmin:
container_name: myadmin
image: phpmyadmin/phpmyadmin
ports:
- 8080:80
links:
- "mysql:db"
apache_site1:
container_name: apache_site1
build: ./php-apache
ports:
- 80:80
volumes:
- ../:/var/www/html
links:
- mysql:db
./php-apache/Dockerfile
FROM php:7-apache
COPY ./config/php.ini /usr/local/etc/php/
EXPOSE 80
thanks in advance

Answer 1

Your problem is best handled using a reverse proxy such as nginx. You can run the reverse proxy on port 80 and then configure it to route requests to the specific site. For example,
http://example.dev/site1 route to site1 at http://example.dev:8080
http://example.dev/site2 route to site2 at http://example.dev:8081
And thus you run your sites on ports 8080, 8081...

Answer 2

Specific solution
Based on the docker-compose file in the question. Edit the docker-compose.yml file, adding this service:
nginx-proxy:
image: jwilder/nginx-proxy
ports:
- "80:80"
volumes:
- /var/run/docker.sock:/tmp/docker.sock:ro
Then, change the apache_site1 service in this way:
apache_site1:
container_name: apache_site1
build: ./php-apache
volumes:
- ../:/var/www/html
links:
- mysql:db
environment:
- VIRTUAL_HOST=apache-1.dev
Run the docker-compose file and check that your apache-1 website is reachable:
curl -H 'Host: apache-1.dev' localhost
Or use the Chrome extension as described below.
More websites
When you need to add more websites, just add an apache_site2 entry like you want and be sure to set a VIRTUAL_HOST environment variable in its definition.
Generic solution
Use a single nginx with multiple server entries
If you don't want to use a reverse proxy with a subpath for each website,
you can setup a nginx reverse proxy listening on you host 80 port, with one server entry for each site/container you have.
server {
listen 80;
server_name example-1.dev;
location / {
proxy_pass http://website-1-container:port;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
server {
listen 80;
server_name example-2.dev;
location / {
proxy_pass http://website-2-container:port;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
... and so on
Then, you can use the Host header to request different domains to your localhost without changing your /etc/hosts:
curl -H 'Host: example-2.dev' localhost
If you're doing web development, and so you need to see web pages, you can use a browser extension to customize the Host header at each page request.
Already made solution with nginx and docker services
Use a docker-compose file with all your and use the jwilder/nginx-proxy image that will auto configure a nginx proxy for you using environment variables. This is an example docker-compose.ymlfile:
version: "3"
services:
website-1:
image: website-1:latest
environment:
- VIRTUAL_HOST=example-1.dev
website-2:
image: website-2:latest
environment:
- VIRTUAL_HOST=example-2.dev
nginx-proxy:
image: jwilder/nginx-proxy
ports:
- "80:80"
volumes:
- /var/run/docker.sock:/tmp/docker.sock:ro
Apache solution
Use apache virtual hosts to setup multiple websites in the same way described for nginx. Be sure to enable the Apache ProxyPreserveHost Directive to forward the Host header to the proxied server.