As the browser vendors are moving towards https, it is useful to keep the local development environment on https too. Here are couple simple ways for doing it.
First step in getting your page to be served over https is to have certificates. Here’s how:
openssl req -nodes -sha256 -days 365 -newkey rsa:2048 -new -x509 -subj \ "/C=GC/ST=Garbage/L=Collector/O=ProgrammerMan/OU=Codeland/CN=localhost.ssl/emailAddressfirstname.lastname@example.org" \ -keyout localhost.ssl.key -out localhost.ssl.cert
Feel free to change the fields to be better fit for you (e.g. ProgrammerMan, Codeland, etc.)
To view the certificate info use
openssl x509 -in localhost.ssl.cert -noout -text
Serve static files over https
Sometimes all you need is to serve some static html/js/css from a folder. Here’s how to do it.
- Install sinatra
gem install sinatra
- Use the following start script to start simple web app
config.ru file for the simple rack application
require 'sinatra' class Webapp < Sinatra::Base set :public_folder, File.dirname(__FILE__) + '/webapp' end run Webapp
start shell script for starting thin web server with ssl
thin start -p 3001 --ssl --ssl-key-file ../localhost.ssl.key --ssl-cert-file ../localhost.ssl.cert
Now the contents in
webapp are available from https://localhost.ssl:3001/index.html
With nginx things are simple. Basically the only directive needed is the
root. Complete config for getting nginx to serve over https is below:
Notice the mime type definitions. Nginx will use these to send back proper response header (Content-Type). It must be correct because browsers do not render css for example when the content type is wrong (e.g.
Installation depends on your system, but on OS X it’s common to use Homebrew:
brew install nginx
Https using nginx for static files
Below is example config for getting nginx to serve the same webapp folder but now over 3002 port. Https is turned on with the ssl keyword in listen instruction. Also the ssl_certificate and ssl_certificate_key are important.
reload files are provided for your conveniency. They allow starting the nginx example in self-contained way and isolated in case there is nginx already running on the machine.
Start the nginx with provided config using
./start and see the result in https://localhost.ssl:3002/index.html