AWS SSL Certificate setup for WordPress site hosted on Nginx + CloudFront

Hello friends. Today I’m going to talk you through the process of setting up a free SSL certificate with Amazon ACM. This is specifically for those of you who have your sites served via Nginx running on AWS EC2 instances and have everything going through CloudFront. It’s quite a specific setup, but it’s a good setup. Here we go then!

Step 0: Make sure you can receive admin emails on your domain

When we request the SSL certificate Amazon will send an email to the following email address formats. You can’t specify alternatives so the first thing to do is make sure you can receive messages at at least one of the following:

administrator@your_domain
hostmaster@your_domain
postmaster@your_domain
webmaster@your_domain
admin@your_domain

Step 1: Order your certificate

To use an ACM Certificate with CloudFront, you must request the certificate in the US East (N. Virginia) region so choose N. Virginia from the location menu in the top-right of the AWS dashboard.

Now you need to go to your list of CloudFront distributions and edit the one for the site that needs SSL.

On the Distribution Settings page you should see a ‘Request an ACM certificate’ button. Clicking that button will whisk you away to the certificate request form. Here you must enter your domain name as follows:

*.yourdomain.com

(for a wildcard certificate)
OR

shop.yourdomain.com

(for a specific sub domain)

If you’re using the naked domain (i.e without www. or any other subdomain) make sure to enter that, the wildcard alone won’t work. You will likely have two entries (e.g. yourdomain.com and *.yourdomain.com)

Click the ‘Review and request’ button followed by ‘Confirm and request’ on the next screen.

Step 2: Approve the certificate request

You should soon receive an email from Amazon Certificates. Click on the approval link in the email and then the ‘I Approve’ button on the linked page. You should be shown a success message.

Step 3: Select your new certificate in CloudFront

Go back to the CloudFront Distribution Settings page where you earlier clicked the grey ‘Request an ACM certificate button’.

Selecting the ‘Custom SSL Certificate (example.com)’ radio button will enable the dropdown list of certificates for you to choose from. You may need to click the refresh button first. Select your new certificate and click the blue ‘Yes Edit’ button.

Step 4: Update your server settings

You’ll need to update your Nginx site config. Here’s an example:

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

server {
        server_name  origin.yourdomain.com;
        listen       80;

        if ($http_user_agent !~ “Amazon CloudFront”) {
                return 303 https://www.yourdomain.com$request_uri;
        }

        root            /var/www/yourdomain/htdocs;
        index index.php;

        # For PHP:
        location ~ \.php$ {
                fastcgi_pass unix:/var/run/php5-fpm.sock;
                include fastcgi_params;
                fastcgi_param SERVER_NAME $host;
                fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
        }

        location / {
                try_files $uri $uri/ /index.php?$args;
        }

        if (!-e $request_filename) {
                rewrite ^(.+)$ /index.php?q=$1 last;
        }

    location ~*  \.(jpg|jpeg|png|gif|ico|css|js|woff)$ {
        expires 7d;
    }

    location ~*  \.(pdf)$ {
        expires 7d;
    }

You’ll need to reload Nginx on your server for the changes to take effect.

sudo service nginx reload

Step 5: Install the SSL Insecure Content Fixer WordPress plugin

I’ve found it necessary to install the SSL Insecure Content Fixer plugin for WordPress to get everything working as expected with this specific setup. I believe this is to do with the fact that WordPress cannot detect SSL on the server because that’s actually being handled by CloudFront. If you know a way round this please let me know!

After installing and activating the plugin change HTTPS detection to ‘unable to detect HTTPS’ on the Plugin’s settings page.

Step 6: Update WordPress URL

You’ll need to tell WordPress that your site URLs should now include https. You can do this from WordPress’ Settings > General page. I prefer however to add the following to the top of my wp-config.php file:

$scheme = “https://“;
$website_url = ‘www.yourdomain.com’;
$_SERVER[“HTTP_HOST”] = $website_url;
define(“WP_HOME”, $scheme.$website_url);
define(“WP_SITEURL”, $scheme.$website_url);

define(‘FORCE_SSL_ADMIN’, true);
$_SERVER[“HTTPS”] = ‘on’;

Step 7: Check everything works

After making that last WordPress URL change you’ll get booted from the Admin area and need to log in again. If something has gone wrong you may get a redirect loop. If everything’s working fine though you’ll be able to log in and everything should appear normal, only now with bonus securitay! Check the front end of your site is loading over SSL too. You may need to force a CloudFront invalidation to speed things up.

The last thing to do is check the SSL itself which you can do at https://www.ssllabs.com/ssltest/ — This test can take quite a few minutes so be patient.

Pete Clark

Pete Clark has been working with websites since the 1990s, which seems like a very very long time ago now. You can follow him on Twitter @ClarkCX