How to set up SSL for localhost and virtual hosts with MAMP? - apache

Question

I'm creating this "question" to document how I was able to set up SSL locally, in case I need to do this again in the future. Thought I'd document it here hoping this can be of help to others too, 'cause it's a tricky process.
I'm working on a Mac with High Sierra, MAMP v 4.2.1 and Chrome v 71
Alright, let's roll.

Answer 1

1) Create a SSL certificate for localhost
To be able to use HTTPS with localhost we actually need two certificates: a root certificate, and a domain certificate specifically created for the localhost domain.
These nifty scripts I've found take care of creating both. They're very easy to use—just follow the instructions closely and you'll be good to go. The only thing that is not so clear in the documentation is that, where it says Then mark the certificate as trusted, this means you have to click on the certificate in Keychain Access and change the Trust option to Always.
(Here you can find a more elaborate explanation of what those scripts actually do)
If everything worked for you, you should now have two files server.crt and server.key. I've created a ssl folder in /Applications/MAMP and moved the files in it; but you can put them wherever you think is best.
Let's forget about the files now and proceed to some Apache configuration.
2) Configure MAMP's Apache to accept SSL
By default, Apache is not configured to accept SSL connections, so we have to change that. Open /Applications/MAMP/conf/apache/httpd.conf and make sure the following lines are NOT commented out. If they are, remove the # at the beginning of the line:
LoadModule ssl_module modules/mod_ssl.so
Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf
Also, look for this line:
Servername localhost:443
and make sure the port is set to 443. 443 is the default port for HTTPS secured connections (regular, unsecured HTTP connections listen to port 80 by default).
Next, open /Applications/MAMP/conf/apache/extra/httpd-ssl.conf and make sure you have this line:
Listen 443
Again, this is important because we have to set up everything on the same port. To this end, you should also click on the MAMP icon in your MAC's dock, hit Preferences, go to the Ports tab and choose Set Web & MySql ports to 80 & 3306.
Stop and restart MAMP to apply the changes we've made so far.
3) Configure the default Virtual Host for SSL
While still in /Applications/MAMP/conf/apache/httpd.conf, look for these lines:
<VirtualHost _default_:443>
# General setup for the virtual host
DocumentRoot "/Applications/MAMP/Library/htdocs"
ServerName www.example.com:443
These lines set Apache's default behavior for all HTTPS connections. The ServerName is just a dummy name that you should replace with localhost; you should also make sure that the default DocumentRoot does match with your projects root folder.
So change the above lines as follows:
<VirtualHost _default_:443>
# General setup for the virtual host
DocumentRoot "/path/to/your/htdocs"
ServerName localhost
As you scroll a bit further down, while we're still in the default VirtualHost directive, you will find these two lines:
SSLCertificateFile "/Applications/MAMP/conf/apache/server.crt"
SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server.key"
Change these to wherever you put the files we genereated in step 1. Like I said before, I've put mine in "/Applications/MAMP/ssl", so I've changed the
above lines to:
SSLCertificateFile "/Applications/MAMP/ssl/server.crt"
SSLCertificateKeyFile "/Applications/MAMP/ssl/server.key"
Stop and restart MAMP to apply the changes. Now if you go to https://localhost you should be able to see the list of projects in your root folder. That's it for localhost!
4) Create a SSL certificate for custom local domains
What if you wanted to create a custom domain myproject.dev and use SSL for that too, so you could access it at https://myproject.dev?
Pretty much like what we did for localhost, we need to create a SSL certificate specifically for the myproject.dev domain, then configure a virtual host for myproject.dev. Let's start with creating the certificate.
Again, I've found this little tool called create-ssl-certificate that will generate for you an SSL certificate for a specific local domain. This too is very easy to use, the only not so clear part is that it is a NPM package that you can install globally with npm -g install create-ssl-certificate.
If everything went well with create-ssl-certificate, you should now have two files, just like it was with localhost in step 1. By default, create-ssl-certificate calls the generated files ssl.crt and ssl.key. I've renamed them as server.crt and server.key to be consistent with the localhost files. Then I've created a ssl folder in the myproject root folder, and moved the files in there.
Let's forget about the files for a moment and proceed to some Apache configuration.
4) Configure MAMP's Apache to accept Virtual Hosts
If you've created virtual hosts before, you have probably already done this, so you can skip this step.
The only thing we need to do to 'activate' the possibility of creating virtual hosts is to go to /Applications/MAMP/conf/apache/httpd.conf and uncomment this line:
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
5) Configure your local domain's Virtual Host for SSL
Now we can set up a virtual host so that we can access myproject at https://myproject.dev. First of all, edit your hosts file and add this line:
127.0.0.1 myproject.dev
Then, go to /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf and add the following:
<VirtualHost myproject.dev:443>
ServerName myproject.dev
DocumentRoot "/Users/myusername/Sites/myproject"
SSLEngine on
SSLCertificateFile "/Users/myusername/Sites/myproject/ssl/server.crt"
SSLCertificateKeyFile "/Users/myusername/Sites/myproject/ssl/server.key"
</VirtualHost>
With this configuration, you will be able to access https://myproject.dev because the server is instructed to search for the SSL certificates we've created in step 4.