Creating a Self Signed SSL for Local Development with Vagrant / NGINX

Okay, so I’ve been looking at a way of creating a local self signed SSL so I can test out some scheme work I’ve been doing with secure services and came across a few conflicting bits and pieces on the internet about the best way to do this. Here’s the method that I used and it works well for me…

This covers adding SSL capability to your local Vagrant Dev Env. The basic steps are we’ll need to create a self signed SSL and then update the NGINX config to use our new certificate. In addition, I use port forwarding in Vagrant for both secure and non secure connections as it means I can have a local dev env and a Vagrant dev env if needs be, and also means I can instantly see at a glance if the app is running in Vagrant or not – that’s optional though.

If you have followed my set up for auto-redirecting in your NGINX Vagrant set up then this just adds to it, but if not you’ll need to add the configs for NGINX to any server blocks / config files you have.

Okay, so let’s start by generating a self-signed SSL. You can store the file anywhere but I find it easier to keep everything in the NGINX folder for now – you know where you’re going then.

Creating a Self-Signed SSL:

Let’s create a directory where we’ll keep our SSL data

$ sudo mkdir [path to NGINX conf dir]/certs

Now we’ll create the key, csr and certificate:

$ cd [path to NGINX conf dir]/certs/
# Generate a new private key
$ sudo openssl genrsa -out "devcert.key" 2048

# Generate a CSR using the private key for encryption
# You can pretty much enter anything for the variables below
# except the Common Name - use *.dev for my auto-redirect or enter
# your server name if using individual config files
$ sudo openssl req -new -key "devcert.key" -out "devcert.csr"
> Country Name:
> State:
> City:
> Organization Name:
> Organizational Unit:
> Common Name: *.app # Based on my auto-redirect config
> Email:
> Password:
> Company Name:

Now we need to sign and generate the certificate:

$ sudo openssl x509 -req -days 365 -in "devcert.csr" -signkey "devcert.key" -out "devcert.crt"

You should now see you have a generated devcert.crt which you can use.

Updating NGINX Config

Edit your NGINX config (either your auto-load config, or any of your server configs / server blocks and add the following: Add the following to the listen directive (you should already have listen 80:)

listen 80:
listen 443 ssl;

then add the following somewhere in the server block:

ssl_certificate     [path to NGINX conf dir]/certs/devcert.crt;
ssl_certificate_key [path to NGINX conf dir]/certs/devcert.key;

Save the file, and then you should be able to simply run the following to enable your changes:

$ sudo service nginx restart

Using Port Forwarding

As mentioned earlier, I use port forwarding to avoid any issues with my local dev env and running Vagrant, which basically means I forward anything from ‘:4567’ to port 80 in my Vagrant server. My Vagrant file config is below, and once initiating the SSL certificate, I then also forwarded port ‘:7654’ to 443 in my Vagrant box to ensure I know exactly what’s going on: Vagrantfile:

# Network Configuration:
config.vm.network :forwarded_port, host: 4567, guest: 80
config.vm.network :forwarded_port, host: 7654, guest: 443

This basically means if I want to access the insecure version of my local app, I can simply enter

"http://myapp.app:4567/index"

 or if I want to use the secure certificate and test out SSL / HTTPS I can simply use

"https://myapp.app:7654/index"

That’s about it really – you should now have a self signed local SSL certificate for you to test secure connections with – obviously you will get the initial warning when viewing this about the certificate not being signed, but just click the continue equivalent in your browser (in Chrome, it’s under the advanced bit near the warning) and you should be good to go.

Advertisements

2 thoughts on “Creating a Self Signed SSL for Local Development with Vagrant / NGINX

  1. This Guide worked great!

    Just wanted to let you know that in the second part of the “Updating NGINX Config” section, one of the spaces in the code did not render properly and is shown as ” “. Otherwise, thanks for the tutorial!

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s