How to host a WordPress site in docker with nginx

So this is my first post on my new blog. I thought it would be quite fitting if I made a post about how I set this site up. We’re gonna use docker to host WordPress & nginx to reverse proxy it. We will then use Cloudflare SSL certificates to secure it. Let’s get started!

---

Step one: Prerequisites

We first need to install the things we need before we start. We also need to set up our domain in Cloudflare.

We can first update our packages using apt by running:

sudo apt update && sudo apt upgrade -y
Code language: Bash (bash)

Then you need to install docker. I won’t go into detail on how to do it. You can read through how to install it here. Then you can install docker compose, which is what we’ll be using to create our docker container. We can do that by running:

sudo apt install docker-compose
Code language: Bash (bash)

Step two: Installing up WordPress

Now we can start. Create a new directory called WordPress (by running mkdir wordpress) then create a new file called docker-compose.yml (by running nano docker-compose.yml). Now paste the following into it:

version: '3.1'

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: wordpressdb
      WORDPRESS_DB_USER: wpdbuser
      WORDPRESS_DB_PASSWORD: verystrongpassword1234
      WORDPRESS_DB_NAME: wpdb
    volumes:
      - wordpress:/var/www/html

  wordpressdb:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: wpdb
      MYSQL_USER: wpdbuser
      MYSQL_PASSWORD: evenstrongerpassword
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - wordpressdb:/var/lib/mysql

volumes:
  wordpress:
  wordpressdb:
Code language: YAML (yaml)

Now you can create the docker container by running:

docker-compose up
Code language: Bash (bash)

Wait for it to set up the docker container, and then we’re good to go!

Step three: Setting up Cloudflare SSL

Again in our root folder we’re going to create a folder called certs. This is the folder where our certificates will be stored. Make sure you have your domain routed through Cloudflare. Read this guide to see how.

First of all, go to your domain and at the top, click on “SSL/TLS”

Now click on the “Origin Server” menu and create a certificate. You can leave all your settings as it is (including domains). Now in the folder we created earlier, create a file called cert.pem. Paste the contents of the Origin certificate text box into this file and save it. Then create a file called key.pem and paste the contents of your private key into that file. Finally, make sure your domain that you want (e.g. nucker.me or blog.nucker.me) is pointing towards your IP (in an A record) and is proxied.

Step four: Installing and setting up nginx

We’re gonna first off install Nginx. We can do this by running the following:

sudo apt install nginx
Code language: Bash (bash)

Now navigate to /etc/nginx/sites-enabled/ and delete the file in there (rm ./*). Create a new file called default (nano default) and paste the following into it:

server {
    server_name yourdomain.com; # Change this to your domain
    listen 443 ssl;

    location / {
            proxy_pass    http://127.0.0.1:8080; # Check that your wordpress is running on this port
            proxy_set_header    X-Real-IP $remote_addr;
            proxy_set_header    Host      $http_host;
            proxy_set_header X-Forwarded-Proto https;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    }

    ssl_certificate     /home/user/certs/cert.pem; # Change this to your certs folder path
    ssl_certificate_key /home/user/certs/key.pem; # And this
    ssl on;

}
Code language: Nginx (nginx)

Make sure to change the server_name to the address it will be accessed from; change proxy_pass to the address of the WordPress installation and ssl_certificate and ssl_certificate_key to the correct paths.

Now run:

nginx -t

You might get a couple warnings, however you can ignore those. Finally, just run:

systemctl restart nginx.service
Code language: CSS (css)

And that’s it! It should all be working.

Conclusion:

I think it’s quite a neat setup how this works. You can use this method to self-host other things such as pastebins and image servers. You can host them on http on another port (any port) and reverse proxy it using the nginx code above!

If you run into any problems, just reply with a comment, and I’ll help you out! I’ll be back soon to make another post.