Setting up a Static Website
There are 2 methods to get a second static website up and running
- Let the proxyserver point to another directory where the other site resides. (Simple solution)
- Create a completely different container with a webserver pointing to the second website (Complex solution)
Let's go for the complex solution, just for the fun of it, and to show the independence of the web applications and the proxyserver.
Why the extra webserver?
Well, the only thing the Proxyserver does is get all incoming traffic, check for which domainname this is, and send the request on to the appropriate Docker Container.
If this Docker Container only has a bunch of HTML files, it cannot do anything.
So, every Docker Container should be able to handle incoming traffic. This is done by either:
- A NodeJS Server if you have a NodeJS API running
- An Uvicorn Server in case you have a Python FastAPI running
- Or a small webserver if you have only a bunch of HTML files (like a static website or the result of a ReactJS-Build)
This part of the tutorial does the last bullet, since it's the simplest one.
Set up directories
cd deployProject
mkdir -p staticwebsite/site
Create the website
In deployProject/staticwebsite/site/index.html create some simple HTML
<html lang="en">
<head>
<title>Static Site</title>
</head>
<body>
<h3>Static Website</h3>
</body>
</html>
Obviously this is too simple. But think of this as a ReactJS website you build (unless it needs Server Side Rendering, in that case you need a NodeJS Server)
Get a simple webserver
We will use Nginx for that. The defaults for the Nginx Docker Container are sufficient for our Static Site.
Realise that this is a different Nginx. A bunch of HTML files do not have Webserver functionality like a NodeJS Application. So, there needs to be something serving those webpages.
Below is the docker-compose.yml file which resides in deployProject/staticwebsite/docker-compose.yml
version: '3.9'
services:
proxyserver:
image: nginx:1.21.4
container_name: staticsite
working_dir: /usr/share/nginx/html
volumes:
- ./site:/usr/share/nginx/html:ro
- ./deployment/etc/nginx/conf.d:/etc/nginx/conf.d:ro
networks:
my-net:
ipv4_address: 172.30.0.20
networks:
my-net:
external: true
name: my-net
Notice that there is no need for a Ports section in the docker-compose file. The container is not directly accessible from the Host but only via the Proxyserver via the IP Address in the Proxyserver Nginx configuration.
If we would take all the Nginx defaults, then we would not need a mapping to the /etc/nginx/conf.d, but we're going to do something fun with ports.
Add the second site to the Proxyserver
To be clear: This is the Proxyserver routing traffic to the Static Website Webserver.
Add the snippet below in deployProject/proxyserver/deployment/etc/nginx/conf.d/default.conf or create a new file (called static.website.conf) in the same directory.
server {
listen 80;
server_name www.mydomain.com;
access_log /var/log/nginx/www_mydomain_access.log main;
error_log /var/log/nginx/www_mydomain_error.log;
location / {
proxy_pass http://172.30.0.20:7777;
}
}
It shows that our Proxyserver forwards all requests on port 80 and domain www.mydomain.com to port 7777 on IP number 172.30.0.20.
So, we need something listening on IP 172.30.0.20 port 7777. Let's fix that.
Oh no, not port 7777 !!
If we took the default port 80 of Nginx, then we would almost be ready. But since some fool had the idea to use a port 7777 for the Static Website Server, we need to do some extra steps.
(It makes things clear if you don't take the defaults all the time)
The Nginx config, delivered to you in the Nginx standard Docker Image, creates a default.conf with port 80. We need to overwrite that:
The new default.conf in staticsite directory
As mentioned, our Static Website needs a Webserver. The config for that Webserver is this default.conf
Put this in deployProject/staticsite/deployment/etc/nginx/conf.d/default.conf
server {
listen 7777;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
It says:
- Hey, I'm a Nginx webserver,
- and I'm listening on port 7777 on localhost.
- Any requests will be taken from /usr/share/nginx/html (which is Nginx default)
Define the domain name
The domainname for this Static Site is http://www.mydomain.com/
Since you probably are not the owner of 'mydomain.com', the domainname will be defined in the /etc/hosts file on the Host (OSX in this case). But it is the same as specifying a domainname on a DNS Provider like GoDaddy.
127.0.0.1 www.mydomain.com
The website is located on the Host. This means that a request on the Host to www.mydomain.com must be picked up by something listening to port 80 on localhost. Well, that is the ProxyServer we already have running. And the Proxyserver will pass it on to IP address 172.30.0.20 on port 7777.
Test the site
We need to start the container for this Static Website
$ cd deployProject/staticsite
$ docker-compose up -d
[+] Running 1/1
⠿ Container staticsite Started 0.4s
Restart the Proxyserver
$ cd deployProject/proxyserver
$ docker-compose down
[+] Running 1/1
⠿ Container proxyserver Removed
$ docker-compose up -d
[+] Running 1/1
⠿ Container proxyserver Started
$ docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
c7e9df08a67c nginx:1.21.4 "/docker-entrypoint.…" 4 seconds ago Up 3 seconds 0.0.0.0:80->80/tcp proxyserver
9a63a1ed1465 nginx:1.21.4 "/docker-entrypoint.…" 2 minutes ago Up About a minute 80/tcp staticsite
And now you see something strange: The staticsite has "80/tcp" in the Ports column.
The reason is that the Nginx Image itself Exposes port 80. But this is ignored in our setup. And inside the Docker Container there is nothing listening to port 80 because our Nginx default.conf was rewritten to listen to port 7777.
Show results
Start up a browser and go to http://www.mydomain.com/
You should see your "Static Website".