Welcome Back!

If you've kept up till now with this series your application is hopefully/mostly functional on your home server with Heroku hosting its' backend API but you keep getting an error of "net::ERR_CERT_COMMON_NAME_INVALID" or "net::ERR_CERT_AUTHORITY_INVALID".

Fear not! This is a pretty common SSL error during the loading of a website that, in most cases, is due to certificate misconfiguration on a server or lack of a certificate on a server.

At this point of this process this error actually makes since because

1. I actually haven't configured any SLL yet.
2. A new server is not automatically configured to have a HTTPS certificate.
3. Specific to my case, this error occurs because I am pointing my local DNS to the generic herokuapp.com Heroku endpoint, which is not able to be certified for my local server.

To fix this error we have a few things we could do:

• Create our own self-signed Certificate and configure Heroku to accept it specifically for testing.
• Use the SSL host name provided by Heroku for purchase: "herokudns.com" or "herokussl.com" depending on your setup.
• Get a Certificate from a Trusted Certificate Authority; which is very similar to the Heroku specific SSL host names, but through different third parties.

For this part of the series I will be showing how I created my own self-signed certificate on my server that I will be using when I set up my backend API in the next part of this series.

Table Of Contents

Step 1: Adding SSL Module and Creating the Certificate
Step 2: Configuring Apache to Use SSL

So you want to create your own Certificate and configure it for testing. It's great to lean about how this is done as certificates are and important part of the encryption process of HTTPS. It should be noted that there is some not-so-pretty math involved with encryption and should really be left to the experts in a production environment; so take this all with a grain of salt as I am no encryption expert. As for me, I am just curious to see how a general certificate is made and signed so here is how I did it and the tutorial I used to get around configuring Heroku.

Step 1: Adding SSL Module and Creating the Certificate

By following the DigitalOcean tutorials previously, I already have some things set up so I can jump right into Step #1 of the tutorial

1. Enable mod_ssl module on Apache by running the command sudo a2enmod ssl.
   • mod_ssl is an Apache module that provides support for SSL encryption.
2. Restart the Apache Service on the server with sudo systemctl restart apache2.
3. Create the SSL certificate by running sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/ssl/private/apache-selfsigned.key -out /etc/ssl/certs/apache-selfsigned.crt. Once run this command will prompt you for some basic information about your site/company like this image.
   • You can name the cert anything but I was following the tutorial so I left it as "apache-selfsigned".
   • The req flag is like "request" with a 'Q' and not a 'G'. This caught me up when setting up mine.

{Back to the Table Of Contents}

Step 2: Configuring Apache to Use SSL

Now that the Apache module is enabled and the certificate is created Apache needs to be configured to use SSL. To do this you will need to modify the application's conf file and redirecting any HTTP requests to HTTPS.

1. Run sudo nano /etc/apache2/sites-enabled/etcpasswdapp.conf to open the apps conf file for editing.
2. Add the SSL configuration to the file below the "DocumentRoot" section. Yours will look similar as the image below, but with whatever you named your cert.
3. While still in the conf file add in a second <VirtualHost> at the bottom to separate out requests for HTTPS requests on port 443 and HTTP requests on port 80. As shown below, you can see that the second <VirtualHost> for port 80 has a redirect option in it that will take any traffic from an HTTP request to your site and redirect it to the HTTPS address.
4. Save the file and exit the editor.
5. Restart the Apache service by running systemctl restart apache2.

After all this is set up you still might have some issues with your browser giving you an error about the site being self-signed and is not safe. This is bad for a production site but for development it's fine for now because the only way to fix this is to get a official signed certificate for a Certificate Authority like Cloudflare. To get around this now click on the "advanced" and tell the browser you are in that it is safe.

{Back to the Table Of Contents}

Up Next...

Now with the app functional with Heroku hosting its API, it's now time to migrate the API and database into the server.

Happy Hacking

Resources:

1. https://create-react-app.dev/docs/deployment/#static-server
2. https://stackoverflow.com/questions/42308879/how-to-solve-npm-error-npm-err-code-elifecycle
3. https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments
4. https://serverless-stack.com/chapters/environments-in-create-react-app.html
5. https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-20-04
6. https://www.digitalocean.com/community/tutorials/how-to-create-a-self-signed-ssl-certificate-for-apache-in-ubuntu-20-04