When you hear the words WordPress, Secure and Proxy you might start having nightmares. But there is no reason for that. Just by following the instructions hereunder, and setting up the proxy carefully, you should be able to carry out this tiresome task easily.
Why a Proxy?
Well, basically because it is easier to implement and faster to scale when you want to serve multiple applications in the same host.
In the following section you will find several scripts to run Docker containers, each one detailing both, its purpose and its configurations.
So, first you should start setting up the file structure that will be used all over the post:
│ └─ wordpress-init-db.sql
│ └─ default.conf
│ └─ 000-default.conf
Before running the MySQL container you need to mount a pre-loaded WordPress database named as wordpress that has already defined the SITE_URL and HOME variables with the url for your site, like http://wordpress.example.com. Next you will find the create script for the container:
Once the MySQL container is created and running properly, you should create the WordPress container, and override the default Apache configuration with a custom defined settings like the ServerName that will be used in the next step. Hereafter you will find the creation script for the container and a summary of the Apache configuration:
Now let’s create the Nginx container that will act as a proxy for your WordPress site. It’s important to link it with the WordPress container and setup the default.conf configuration file for the Nginx container. Next you will find the creation script for the container and a summary of the Nginx configuration. Be aware of the proxy_set_header defined there:
First we need to setup execution grants to all the *.sh files with:
Be sure to run all these scripts in the root folder
- Run the create_wordpress_mysql.sh script and wait until it is ready and the database is created.
- Run the create_wordpress.sh script and wait until it is ready.
- Run the create_proxy_nginx.sh script.
- Add in your /etc/hosts an alias wordpress.example.com that points to `127.0.1.1`.
Now, you should be able to browse http://wordpress.example.com and see the WordPress site properly
Fixing Mixed Content Error easily
Fixing protocol errors
You may face “Mixed Content Error” thrown by WordPress when there are some assets being loaded by http instead of https.
To solve it, you need to install a plugin SSL Insecure Content Fixer.
- Open a browser
- Navigate to http://wordpress.example.com/wp-admin
- Log in with the credentials used before when running the wordpress container
- Install and activate the SSL Insecure Content Fixer
- Navigate to Settings -> SSL Insecure Content
- Set HTTPS detection to HTTP_X_FORWARDED_PROTO (e.g. load balancer, reverse proxy, NginX)
The following extra steps are just in case you are still seeing the error.
- Navigate to Settings -> General
- Set the WordPress Address (URL) and Site Address (URL) to your new HTTPS address, in our case https://wordpress.example.com
That’s it! You should now enjoy your secure WordPress application running properly.
Nice, but where is the trick?
The first trick is that all the
--link containers have an alias defined in the /etc/hosts in the host containers. This is why in the location / closure inside of the Nginx configuration file the line proxy_pass http://wordpress; appears.
And the other trick is just a couple of headers that you need to define in order to allow the WordPress plugin (SSL Insecure Content Fixer) to be aware that it’s receiving a proxy redirection request.
In our next post you will learn how to test your SSL certificates locally in your Chrome browser to be sure that is it working fine and that your site will be ready when you decide to go live.