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.

Listing WordPress articles on a static HTML page running on Nginx.
W00t! End-to-end separation of all constraints

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.


Michelangelo van Dam

Michelangelo van Dam is a senior PHP architect, PHP community leader and international conference speaker with many contributions to PHP projects and community events.

Privacy Preference Center

Strictly Necessary Cookies

Cookies that are necessary for the site to function properly. As example we require a cookie to indicate you have agreed with our privacy settings and accepted the usage of cookies.

gdpr, PHPSESSION, JSESSIONID, wfvt_{hash}

Comment Cookies

When visitors comment on our news articles, and they have opted-in to save their details, we store a cookie on their computer to save their information. This is purely a convenience, so that the visitor doesn't need to re-type all their information again when they want to leave another comment.

They expire a little under one year from the time they're set.

comment_author_{HASH}, comment_author_email_{HASH}, comment_author_url_{HASH}

Marketing Cookies

For marketing purposes we use Google Analytics that will set cookies to capture your information.

_ga, _gid, _gat

3rd Party Cookies

These cookies are provided by third-party solutions providers from who we use their services (e.g. Twitter).

Depending on your own relationship with these services yourself, they also might set some cookies. Please review their privacy policy and cookie usage for more information.

_twitter_sess, ct0, guest_id, personalization_id, eu_cn, tk_tc, tk_ai, tk_qs, twostep_auth, wp-settings-{user_id}
_twitter_sess, ct0, guest_id, personalization_id, eu_cn
tk_tc, tk_ai, tk_qs, twostep_auth, wp-settings-{user_id}