Install an ssl on localhost for development (ubuntu)

Installing an SSL certificate on your local development environment (localhost) allows you to test your applications under HTTPS, which is increasingly important given the push for web security and the “HTTPS Everywhere” approach. Using HTTPS locally can help catch potential mixed content issues or ensure features that require HTTPS work correctly.

Here’s how to set up an SSL certificate for your localhost using mkcert, a tool that creates valid SSL certificates for local development:

Install mkcert:

sudo apt update
sudo apt install libnss3-tools
# or apt-get install libnss3-tools for older versions
wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64
sudo mv mkcert-v1.4.3-linux-amd64 /usr/local/bin/mkcert
sudo chmod +x /usr/local/bin/mkcert

install the local CA (Certificate Authority):

Once you’ve installed mkcert, the first thing you need to do is create & install a local CA.

mkcert -install

Generate the certificate for localhost:

Now that the local CA is set up, you can create a certificate valid for specific domains or IP addresses. In this case, we’ll create one for localhost.

mkcert localhost

1. This command will generate two files:
   • localhost.pem (the certificate)
   • localhost-key.pem (the private key)
2. Configure your development server: (assuming apache)
   
3. If you’re using Apache on Ubuntu, setting up an SSL certificate for localhost development involves a few more configuration steps. Continuing from where we left off with mkcert, here’s how to set it up for Apache:
4. Generate the certificate for localhost (if you haven’t):

mkcert localhost

1. This will give you localhost.pem (the certificate) and localhost-key.pem (the private key).
2. Move the generated certificate and private key to the appropriate directories:Typically, the default location for SSL certs on Apache is /etc/ssl/. For our purpose, you can create a directory under /etc/ssl/localcerts:

sudo mkdir /etc/ssl/localcerts
sudo mv localhost.pem /etc/ssl/localcerts/
sudo mv localhost-key.pem /etc/ssl/localcerts/

Update the Apache configuration:

First, ensure that the ssl module is enabled:

sudo a2enmod ssl

Then, either edit your existing VirtualHost or create a new configuration file. Here’s a basic example of an SSL VirtualHost configuration:

sudo nano /etc/apache2/sites-available/000-default-ssl.conf

Add or modify the following:

<VirtualHost *:443>
    ServerAdmin webmaster@localhost
    ServerName localhost
    DocumentRoot /var/www/html

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    SSLEngine on
    SSLCertificateFile      /etc/ssl/localcerts/localhost.pem
    SSLCertificateKeyFile   /etc/ssl/localcerts/localhost-key.pem

    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>
</VirtualHost>

Activate the SSL site:

If you created a new configuration file instead of modifying an existing one, you’ll need to enable that site:

sudo a2ensite 000-default-ssl.conf

Restart apache:

sudo systemctl restart apache2

If you have a domain like wordpressbuddha.com pointing to your local Ubuntu machine and you wish to set up SSL for it during development, you can use the mkcert tool we discussed earlier, but with a few modifications to accommodate the domain.

Here’s how to set up SSL for wordpressbuddha.com on your local Ubuntu machine:

1. Generate a certificate for wordpressbuddha.com and www.wordpressbuddha.com:

mkcert wordpressbuddha.com www.wordpressbuddha.com

1. This will provide you with:
   • wordpressbuddha.com+1.pem (the certificate)
   • wordpressbuddha.com+1-key.pem (the private key)
2. Move the generated certificate and private key to the appropriate directories:

sudo mkdir -p /etc/ssl/localcerts
sudo mv wordpressbuddha.com+1.pem /etc/ssl/localcerts/
sudo mv wordpressbuddha.com+1-key.pem /etc/ssl/localcerts/

Update the Apache configuration:

Assuming you already have the ssl module enabled (via sudo a2enmod ssl), either modify your existing VirtualHost for wordpressbuddha.com or create a new one.

For instance:

sudo nano /etc/apache2/sites-available/planb-ssl.conf

Add or modify the configuration as follows:

<VirtualHost *:443>
    ServerAdmin webmaster@wordpressbuddha.com
    ServerName wordpressbuddha.com
    ServerAlias www.wordpressbuddha.com
    DocumentRoot /var/www/planb

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    SSLEngine on
    SSLCertificateFile      /etc/ssl/localcerts/wordpressbuddha.com+1.pem
    SSLCertificateKeyFile   /etc/ssl/localcerts/wordpressbuddha.com+1-key.pem

    <Directory /var/www/planb>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>
</VirtualHost>

1. Adjust DocumentRoot and Directory directives as needed based on where your website’s files are stored.
2. Activate the SSL site:

sudo a2ensite planb-ssl.conf

Then, reload Apache:

sudo systemctl restart apache2

1. Access your site:Now, you should be able to access your website at https://wordpressbuddha.com. Since you installed the local CA using mkcert, the certificate will be trusted on your machine, and you shouldn’t see any SSL errors.

Note: If your domain is publicly resolvable but points to your local machine (through a hosts file entry or local DNS), only devices that have the mkcert root certificate installed will trust the certificate. Otherwise, they will receive an SSL warning.