Static content serving with Nginx

Static content should be delivered fast and preferrably without many processes on top to slow it down. Nginx is very suited for this job.

In my previous article “Further decoupling and securing WordPress API“, I have explained how I use Nginx to be the controlling gateway between the frontend and the backend. But up until now I was just loading the pages in my browser straight from my filesystem. To make my setup a bit more complete, I added another Nginx configuration to my docker-compose.yml where I can serve the static HTML frontend from.

Create a config for Nginx

Because I want to serve only a static page, I create the following front.conf that will serve as the Nginx configuration.

events {}
http {
  server {
    location / {
      root /var/www/html;
      try_files $uri $uri/index.html $uri.html =404;
    }
  }
}

This configuration is kept very compact where all files reside in /var/www/html and it will look for the URI on the file system. If it’s not found, a 404-page (Not Found) will be returned.

Add the front to Docker Compose

I add the Nginx setup to my docker-compose.yml file.

version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress
     networks:
       - db-net

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
     networks:
       - db-net
       - wp-net

   nginx:
     depends_on:
       - wordpress
     image: nginx:latest
     volumes:
       - ./conf/nginx.conf:/etc/nginx/nginx.conf
     ports:
       - 8001:80
     restart: always
     networks:
       - wp-net
       - fe-net

   front:
     image: nginx:latest
     volumes:
       - ./conf/front.conf:/etc/nginx/nginx.conf
       - ./frontend:/var/www/html
     ports:
       - 9000:80
     restart: always
     networks:
       - fe-net


volumes:
  db_data: {}

networks:
  wp-net:
  db-net:
  fe-net:

When all this is done, fire off docker-compose up on the command line and surf directly to http://localhost:9000 to see the magic unfold.

In my next article I’m going to make another page to display the article while making links in the listing of the main page.