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

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

these instructions got me 99% of the way there in MAMP 7, but i was still getting an apache error when i started the server - to get it running i commented out these lines in httpd-ssl.conf:

#SSLSessionCache         "dbm:/Applications/MAMP/Library/logs/ssl_scache"
#SSLSessionCache        "shmcb:/Applications/MAMP/Library/logs/ssl_scache(512000)"
#SSLSessionCacheTimeout  300

thanks for posting.

Answer 2

Seems no longer working with MampPro 7 this way except creating certificates.

Answer 3

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.