Setting up SSL for One-Click Wordpress Droplet with Let's Encrypt and Nginx

March 15, 2017 3.9k views
Let's Encrypt Nginx WordPress Ubuntu 16.04
brianjacildo
By:
brianjacildo

I have a somewhat working configuration going on. The idea is to use one of my Ubuntu 16.04 instances as a load balancer with nginx to redirect traffic to the WordPress instance I have with a Let'sEncrypt SSL cert. I believe the nginx config below is working, I can see the address bar changes to https://www.domain.io.

The problem is that the page resources are still being requested over http which logs an error on the browser console: Mixed Content: The page at 'https://www.domain.io/' was loaded over HTTPS, but requested an insecure script....

Another problem is that if I set the WordPress values of WPHOME and WPSITEURL to https://www.domain.io, accessing the admin panel on /wp-admin causes a 307 Internal Redirect to http://www.domain.io which creates a non-stop loop.

How do I go about making sure Wordpress is set to request everything in https?

Below is my nginx block, running nginx -t shows no error. Is there something I'm missing?

server {
        listen 80;
        server_name domain.io www.domain.io;
        return 301 https://www.domain.io$request_uri;
}

server {
        listen 443;
        server_name domain.io;

        # ...
        # SSL stuff removed for brevity
        # ...

        return 301 https://www.domain.io$request_uri;
}

server {
        listen 443 ssl;
        server_name domain.io www.domain.io;

        # ...
        # SSL stuff removed for brevity
        # ...

        location / {
                proxy_pass http://<Private IP of Wordpress Instance>;
                #proxy_set_header Host $host;
                #proxy_set_header X-Real-IP $remote_addr;
                #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                #proxy_set_header X-Forwarded-Proto $scheme;

                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

}
Log In to Comment
3 Answers
hansen March 15, 2017

Change this:

server {
        listen 443 ssl;
        server_name domain.io www.domain.io;

to this:

server {
        listen 443 ssl;
        server_name www.domain.io;
Reply
  • brianjacildo March 15, 2017

    Thanks for the answer. I updated that block, but still doesn't fix the problem that the WordPress sites load the resources over http. Here is one (out of dozens) of similar errors:

    Mixed Content: The page at 'https://www.domain.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.domain.io/wp-content/themes/twentyseventeen/style.css?ver=4.7.3'. This request has been blocked; the content must be served over HTTPS.

brianjacildo March 17, 2017

I actually found a fix, forgot to post it here when I figured it out. Hope this helps anyone in the future.

I had to revert the settings I commented out in the location block and remove the extra settings I added:

location / {
                proxy_pass http://<Private IP of Wordpress Instance>;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
}

Then in /var/www/html/wp-config.php, I added the following lines. 

define('WP_HOME', 'https://www.domain.io');
define('WP_SITEURL', 'https://www.domain.io');

define('FORCE_SSL', true);
define('FORCE_SSL_ADMIN',true);
if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
       $_SERVER['HTTPS']='on';
Reply
jasonjpeters March 17, 2017

I am not to familiar with the One-Click installs, but if you do have shell access. Install WP-CLI (http://wp-cli.org/), SSH to your server and directory root, and issue the command wp search-replace 'http:' 'https:'

Next wp flush cache

Sometimes it helps to cycle the permalinks in Settings > Permalinks from one setting to another and back again.

Reply
Have another answer? Share your knowledge.

Related Questions