Recently, I was working with an OAuth provider that didn’t accept non https endpoints. For this, I wanted to setup SSL on my local vagrant. I expected the process to be long but it turned out to be quite easy.
If you also need to add SSL to localhost, you can do it in 5 minutes. Here’s a step by step tutorial.
Note: I’m using Ubuntu 14.04 guest on macOS. Instructions for other OS may be different.
Step 1: Generate the SSL Key and Certificate
On macOS, open terminal, go to your project folder (or vagrant root, vagrant needs to have access to these files) and enter following commands:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| openssl genrsa -out example.com.key 2048 | |
| openssl req -new -x509 -key example.com.key -out example.com.cert -days 3650 -subj /CN=example.com |
Make sure to replace example.com with your local development URL.
Step 2: Install Certificate on Vagrant’s Apache
Do a vagrant ssh to ssh into your vagrant box. Your apache configuration file should be under /etc/apache2/sites-enabled. In my case, it was 000-default.conf.
Here, we need to do two things:
- Add SSL certificate and key
- Redirect http to https
Add SSL Certificate and Key to Apache
To add SSL certificate and key, edit the file and look for a line that says DocumentRoot and paste following lines below it:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #adding custom SSL cert | |
| SSLEngine on | |
| SSLCertificateFile /vagrant/example.com.cert | |
| SSLCertificateKeyFile /vagrant/example.com.key |
Redirect http to https
Next, we need to redirect your local http site to https. Without it, you may get a browser error. Look for a line that says <VirtualHost *:80> and change it to <VirtualHost *:443>. This line tells apache to listen on port 443 for https requests. But, we still need to redirect non https traffic to https. For that, paste following block above the block that starts with <VirtualHost *:443> :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <VirtualHost *:80> | |
| ServerName local.example.com | |
| DocumentRoot /vagrant | |
| Redirect permanent / https://local.example.com/ | |
| </VirtualHost> |
Again, don’t forget to replace local.example.com with your development site address.
Enable SSL Module in Apache
If you restart apache now, you may get a configuration error like this:
Invalid command 'SSLEngine', perhaps misspelled or defined by a module not included in the server configuration
This may happen if mod_ssl_ is not enabled. To enable it, just run this command:
sudo a2enmod ssl
Step 3: Accept Certificate on Host
If you restart apache now, everything should be fine. Visit the site in the browser and you will see this scary warning:
At this stage, you can click Advanced in Chrome and proceed. It will be better to make your OS trust this certificate however. To do that, open Keychain Access and drag cert file into System under Keychains.
Once it is imported, right click the imported certificate and click Get Info. Change first dropdown to Always Trust. Screenshot:
And we are done
Visit the site in your browser now and it should show up without any errors or warnings, with a secure icon and text in front of it:
And you are done. Did I miss anything?
Let me know and follow me on twitter for more tutorials and interesting tech and gaming related articles.
Love the walk through, and I feel like it *almost* worked. But I’m still getting the warning in the browser when I access the page.
Hi Mark, thank you for the comment. Did you add the certificate (Step 3?). Without that, browser may not recognise the certificate. Which browser/OS are you using?
Hello,
can you advice me where exactly “/vagrant” is located on Mac?
I mean to proper direct therein this line?
SSLCertificateFile /vagrant/example.com.cert
Hi Sven,
There’s no /vagrant on Mac. You need to SSH into your Vagrant box (step 2) and then follow the commands, the folder is mounted on your VM.
Thanks, I followed this and it works, but not completely. The redirect caused a loop and wouldn’t load the page, so I disabled it. Https is working, but it’s not detected by Woocommerce which is what I’m using. This might be the problem https://docs.woocommerce.com/document/ssl-by-proxy-problems-network-solutions/
My setup is different to yours in that it’s a site running within the Vagrant folder (instead of DocumentRoot being /vagrant it’s /vagrant/../..). When I changed 80 to 443 it causes http requests to go to the Vagrant folder. Do I need a section for 80 if I’m using a different folder as the root? Is there another way to implement the redirect so it doesn’t cause a loop?
Thanks Ishan, this worked a treat, thanks!
Just one thing to note is that restarting apache with the new port will fail unless it’s restarted with sudo, like this:
`sudo service apache2 restart`
SHA1 is being phased out. To make the certificate SHA256, just add `-sha256` after `-x509` here:
`openssl req -new -x509 -sha256 -key example.com.key -out example.com.cert -days 3650 -subj /CN=example.com`
Also, make sure that you’re domain doesn’t have .dev as first level. You will face issues because of that:
https://ma.ttias.be/chrome-force-dev-domains-https-via-preloaded-hsts/
How to do this on windows 10?
Hi, I don’t have a Windows system around, so won’t be able to help much. I think the only difference would be trusting the certificate, everything else should be same.
Hi, Chromium and firefox don’t let me validate ssl, chromium shows this error “/domain_name/ sent an invalid response. ERR_SSL_PROTOCOL_ERROR”. And firefox this other error: “An error occurred during a connection to /domain_name/. SSL received a record that exceeded the maximum permissible length. Error code: SSL_ERROR_RX_RECORD_TOO_LONG” I think I did all steps from this article what could be wrong? I am using a vagrant with ubuntu 14.04 and apache.
Firsts, to create certificates ssl
openssl genrsa -out /domain_name/.key 2048
openssl req -new -x509 -key /domain_name/.co.key -out /domain_name/.cert -days 3650 -subj /CN=/domain_name/
Then, to add custom SSL cert
SSLEngine on
SSLCertificateFile /home/vagrant//domain_name/.cert
SSLCertificateKeyFile /home/vagrant//domain_name/.key
Finaly I called these commands
sudo a2enmod ssl
sudo /etc/init.d/apache2 restart
Thanks!
Hi guys, I forgot to switch port to 443, now works greatly
Hi! Thank you for the article, it’s really helpful.
Not sure if you know already, but I thought I’d note that when you were obfuscating your domain name in the screenshots, you missed a spot in the header of the Keychain Access window here
https://kf2np18cdh1ksfyh-zippykid.netdna-ssl.com/wp-content/uploads/2017/01/Keychain_Adding_Certificate-540×455.png
great tutorial almost worked but I am getting an error after sudo service apache2 restart
SSLCertificateFile: file ‘/home/vagrant/fcmsoft.local.com.cert’ does not exist or is empty
Action ‘configtest’ failed.
The Apache error log may have more information.
I misunderstood the vagrant directory. I changes the path to the path of my working folder and it worked, however ssh works but its still not trusted.
Hi Ishan, thanks for your blog, it helped me.
One question, do you have the instructions for ngix (instead of Apache) or are they the same?