Adding SSL in OS X local development environment

Enabling TLS/SSL is the default option for new sites I establish. If I’m working on an existing site I recommend enabling it. Given I develop sites on a local development environment I looked into how I can set up SSL in OS X local development environment in a way which worked with my broader local development workflow.

Specific to my local dev environment to reduce repetition

Before describing the bash script which generates new TLS/SSL certificates and keys I need to make it clear that it relies on the way I structure my development sites. These things can be updated to match your set up.

To give you some background, I structure my development sites to all use .fleming TLD (top-level domain). The same TLD for all my development sites allows me to create a wildcard DNS record via DNSmasq which resolves all requests ending in .fleming to my localhost 127.0.0.1. I chose to use fleming as the TLD of my dev sites because this is also the name of my OS X user account, and I can return that value with the whoami command.

I also always use the domain name of the site as the name of the directory containing the sites files. For example, if the site was available at www.example.fleming I would create a directory for the site’s files at ~/Sites/example. This way, if I run the script from ~/Sites/example I can get the domain name of the site via the pwd command.

The two steps above allow me to use the script below without having to edit it for each site and is therefore faster.

I assume you’re using Apache and required modules are enabled and ports open

The majority of my work uses WordPress so I’m using a LAMP stack. Apache is not configured for TLS/SSL by default so you will need to enable modules and open ports. I can recommend macOS 10.13 High Sierra Apache Setup: SSL by Andy Miller for details on configuring Apache.

Script to generate keys and certificates for each site and add them to your list of  ‘trusted certificates’ in Keychain

The key files required to set up SSL in OS X local development environment are .crt and .key files which must be generated in combination for each site. This bash script allows me to quickly generate required files without having to look up the commands each time. The script completes three steps:

1. Create an OpenSSL configuration file with the required information. Note the use of pwd and whoami to avoid hardcoded values.
2. Generate certificate and key files via openssl.
3. Add the new certificate to my list of trusted certificates

The vast majority of the script above came from another Gist by Jed Schmidt describing how he tackled SSL in OS X local development environment. The steps Jed describes for adding certificates to your Keychain however didn’t work for me so I looked for more info elsewhere and found another Gist by Jonathan Neal which used different commands which did work. My script above is a combination of these two.

Create a VirtualHost for each site

The final step to complete before you can get to see a nice green padlock in the address bar when visiting your dev sites is to edit your httpd-vhost.conf file and create a VirtualHost entry for port 443 which provides the locations of the certificate and key files. This is the VirtualHost block I use.

Save the edited httpd-vhost.conf file and restart Apache for the changes to take effect.