How to Install and configure free SSL/TLS certificate for Tomcat using Let's Encrypt on Ubuntu.

How to set up a free SSL certificate for tomcat using let's encrypt on ubuntu.

Table Of Contents

• 1. Introduction
  
• 2. Prerequisites
• 3. Install certbort and create an SSL certificate
• 4. Tomcat configuartion for HTTPs
• 5. Renew certificate

1. Introduction:

Here, we are going to set up a free SSL certificate provided by a non-profit authority called Let's Encrypt. This is trusted and used by many to secure their website. The certificate is valid for only 90 days and can renew during that time. You can find out more about Let's Encrypt here. 

2. Prerequisites:

• Running ubuntu server
• Running tomcat server
• Domain name pointed to the server Ip address

3. Install certbort and create an SSL certificate:

SSH into the server where you want to create a certificate. In order to create an SSL certificate, we need to install certbot for this, go and select the appropriate ubuntu server version from here. As we are using ubuntu 18.04 LTS.

which will give the following command to install certbot.

Add Certbot PPA
 

 sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository universe
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update

Install Certbot

sudo apt-get install certbot

If you have already running service which uses port 80, stop it first otherwise you will get Address BindException.

To obtain an SSL certificate for your domain using a built-in "standalone" webserver type the following command:

sudo certbot certonly --standalone -d example.com

Here, replace the domain name you want to secure instead of example.com 

which will create a different certificate file to the directory:   /etc/letsencrypt/live/example.com/

Now, logged in as root user and go to that directory

sudo -i
cd /etc/letsencrypt/live/example.com/

Next step is to convert those certificate PEM file to password-based PFX format so that we can use in tomcat configuration. We can do this by using OpenSSL command as below.

openssl pkcs12 -export -out bundle.pfx -inkey privkey.pem -in cert.pem -certfile chain.pem -password pass:password

Replace the password with your desired one. It will create a password-protected file bundle.pfx under the same directory "/etc/letsencrypt/live/example.com/" which we need to use in tomcat configuration.

 

4. Tomcat configuration for HTTPs:

Go to your tomcat directory, and backup the server.xml file; as we are going to change the file. It's always a good approach to backup the config file before changing it.

cp conf/server.xml conf/server-copy.xml
 

Edit the server.xml file.

sudo vi conf/server.xml  // no need to type sudo if you are logged in as root user
  

You can see the following xml tag(for tomcat 8), we are going to change this: 

Replace the above tag such that the config look like as below: 

Here, we are changing port 8443 to 443, keystoreType as "PKCS12", keystoreFile as the path of the pfx file created previously and keystorePass as your password that we used while creating PFX file. 

Change the port 8080 to 80: 

Under server.xml you can find the following tag.

change the above xml tag as below:  

Here, we are changing the port from 8080 to 80 and 8443 to 443. By doing so, if your domain running with port 8080 i.e example.com:8080, now it will open with port 80 i.e example.com. If you type your domain in the browser then you can run it with both HTTP and https i.e http://example.com and https://example.com.

Save the server.xml file by clicking "Esc" key and type ":wq!" and hit Enter. 

As we want to always redirect our domain to https. To do so, open the web.xml file under conf/web.xml.

sudo vi conf/web.xml
  

And add the below code at the end of file before the end of "/web-app" xml tag.

<security-constraint>
  <web-resource-collection>
  <web-resource-name>Entire Application</web-resource-name>
   <url-pattern>/*</url-pattern>
 </web-resource-collection>
  <!--auth-constraint goes here if you requre authentication-->
 <user-data-constraint>
 <transport-guarantee>CONFIDENTIAL</transport-guarantee>
 </user-data-constraint>
 </security-constraint>

Which will always redirect to HTTPs.

 

5. Renew certificate:

The certificate is valid for only 90 days so we need to renew before expiry. For this, stop tomcat and type the following command:

sudo certbot renew
 

sudo -i
cd /etc/letsencrypt/live/example.com/
openssl pkcs12 -export -out bundle.pfx -inkey privkey.pem -in cert.pem -certfile chain.pem -password pass:password
 

Don't forget to use your existing password. And restart the tomcat server.

Read More

Tunnel local server to the public internet with https using Ngrok.

How to tunnel our local server to the public internet with https using Ngrok.

Table Of Contents

• 1. Introduction
  
• 2. Install and setup on windows system
• 3. Install and setup on linux system

1. Introduction:

It seems to be daunting if we need to test our application locally over Https. Generally, when we need to listen webhook from any other service provider, testing applications locally will be difficult. In this tutorial, I will show how to tunnel the local server into the live one using ngrok.

Create an account from ngrok from which we can get tunnel auth token which we will use to get persistent Https URLs even if the outage of the internet until ngrok is running.

2. Install and set up on windows system:

Download ngrok for windows system here and unzip. After that, you will see the ngrok binary file, to run that file double click it. Make sure the path of ngrok, you will see the command prompt as bellow.

Now you are ready to tunnel your local server port. Simply execute the following command.

ngrok.exe http 80

Here, port 80 is the server port running; you need to use the respective port of your running local server like 8080, 8090 etc.

We have successfully tunnel our local server running at port 80. We can see the two forwarding URLs which are accessible publicly. As we can see the session expires in about 8 hrs which means those URLs will be changes every 8 hrs; here we need an auth token to prevent this. Execute the following command.

ngrok.exe authtoken 5AXFH2DjGMu9NFHntjxZf_73wZyVZiKeCxrA1hwZWqX

Use your own auth token from your account instead. You can see the message in the command prompt.

Authtoken saved to configuration file: C:\Users\yourUser/.ngrok2/ngrok.yml

We will use this file to set up for multiple port tunnels. Now again run your local server port you will see the final tunneling URLs without session expires limit.

Now its time to tunnel more than one port if you need it. For this, we are using ngrok.yml config file as below:


ngrok.yml

tunnels:

 backend:

  addr: 8080
  proto: http
  
 frontend:

  addr: 8081
  proto: http

Here, I have running two applications on port 8080 and 8081. Now again run the ngrok.exe file and run the following command to start and tunnel all ports.

ngrok.exe start -all

We have successfully tunnel a multi-port server.

Note: if you get Invalid Host header error while running that URLs, start tunneling port with the following command instead:

ngrok.exe http 8080 -host-header="localhost:8080"

or

ngrok.exe http --host-header=rewrite 8080

For multiport tunnels

tunnels:

 backend:

  addr: 8080
  proto: http
  host_header: "localhost:8080"
  
 frontend:

  addr: 8081
  proto: http
  host_header: "localhost:8081"

3. Install and set up on Linux system:

Download ngrok for the Linux system here. Go to download path and simply right click and extract the file. You will see the ngrok binary file, we need to make it executable so, copy this file to usr/bin directory. 

sudo cp ~/Downloads/ngrok-stable-linux-amd64/ngrok /usr/bin/

Now type ngrok command in the terminal you can see the following output if it is successfully installed.

If it is not installed then go to the ngrok binary file path and open terminal and type command ./ngrok instead of ngrok to run and tunnel your server port.

For the persistent URLs, setup auth token using command:

ngrok authtoken 5AXFH2DjGMu9NFHntjxZf_73wZyVZiKeCxrA1hwZWqX

Use your auth token from your ngrok account, which will configure ngrok config file in your home directory.

Authtoken saved to configuration file: /home/36olearntocode/.ngrok2/ngrok.yml

If you want to tunnel single port then simply run following command and you will see the following output.

ngrok http 80

Use the respective port of your server.  

If you want to tunnel multiple ports then set up ngrok config file as:





ngrok.yml

tunnels:

 backend:

  addr: 8080
  proto: http
  
 frontend:

  addr: 8081
  proto: http

Now again run the command to start:

ngrok start -all

Output:

Note: if you get Invalid Host header error while running that URLs, start tunneling port with the following command instead:

ngrok http 8080 -host-header="localhost:8080"

or

ngrok http --host-header=rewrite 8080

For multiport tunnels

tunnels:

 backend:

  addr: 8080
  proto: http
  host_header: "localhost:8080"
  
 frontend:

  addr: 8081
  proto: http
  host_header: "localhost:8081"

We have successfully tunnel our two port 8080 and 8081 over https.

Read More

Create a Simple VueJs Progressive Web Apps (PWA) and Deploy to Firebase

In this tutorial, we are going to create a simple VueJs PWA application and also show you how to deploy it to firebase. As we know that PWA is being more famous these days due to its very fast performance and can be used for different platforms with a single code base as well as the offline functionality and caching support.

1. Install Vue CLI

If you haven't installed the Vue CLI, open the command prompt or terminal and run the following command to install it globally. 

- For npm package manager:

npm install -g @vue/cli

- For yarn package manager:

yarn global add @vue/cli

2. create a VueJs PWA project:

vue create vue-pwa

Now, select the manual option

Select Progressive Web App (PWA) Support option from the list. As you need to go to that option using the down arrow on the keyboard and hit the spacebar to select that option. Also select the other option if you are going to use them like Router, Vuex, etc.

Now, go to the project directory and run the application.

cd vue-pwa
yarn serve

Vue CLI created a sample demo application for us so, we are using the same for this tutorial. If you look into the Application tab by doing the inspect element of the above running project, there you can see the Service Workers. The main heart of the PWA is this service worker. As if we run the PWA application locally the service worker will not work, as it required an HTTPS secure connection.

 

The service worker is the script that will run in the background separately from the application which helps to install, activate, caching of our application. There are more thing about service worker, will discuss in the future article.

So how we can test the PWA application. As we can use some third-party services as well as we can simply deploy to firebase.

3. How to test our PWA application locally:

- Build the application in production mode:

yarn build

This will create the deployment-ready dist folder.

First, run this locally using http-server package. In order to do the show first install it globally.

npm install http-server -g

Now, run the dist folder:

http-server dist/

Which will run the application. Now what we need to do is tunnel our local server with HTTPS. Please follow this Tunnel local server to the public internet with HTTPS using Ngrok. This will tunnel our local server over HTTPS. Now open the tunneled URL. You can see the service worker as follows.

Also, you can see the + icon to install your PWA app in the browser.

If you run the same tunneled URL on the mobile then you will get the following screen to install your PWA application.

Add vue-pwa to Home screen if you click this, it will add the application to the home screen so that you can later open it by simply clicking it.

4. Deploy to firebase.

Now, let's deploy the build dist folder in the firebase server.

- Go to the firebase console "https://console.firebase.google.com/"

- Create a project by giving the project name.

- Installing firebase in our system.

 Open the command prompt or terminal and install firebase globally.

npm install -g firebase-tools

Initialize the project: Make sure to go to the project directory.

firebase login

This will ask for a google login. You can authenticate the google account where your firebase console project is created. If you want to logout use the following command.

firebase logout

Now, initialize the project:

firebase init

This will ask a couple of question make sure you insert the right as below:

We are simply using it for hosting our application so chose the same option.

Make sure the above setting. The public directory will be dist in our case, as we are deploying the dist folder.

This will create two files in our project:

- .firebaserc

where you can find the project's configuration. Make sure you have the same project name in the "default" section to that create on the firebase console. While deploying it, will use the same firebase console project created. In my case, it is "vue-pwa-7ed80". The config file looks like below.

{
  "projects": {
    "default": "vue-pwa-7ed80"
  }
}

- firebase.json

where all the hosting configuration is done. The config file looks like below.

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Deploy our application.

First, build the application:

yarn build

Now, deploy the build dist folder

 

firebase deploy

This will deploy our application to the firebase server. You can see the deployment history and track from the console under the Hosting section inside the firebase console.

Firebase gives the live HTTPS URL which you can see in the firebase console. If you run that URL you will see the service worker will register and can be run the application as a PWA application.

Finally, we created a simple VueJs application with PWA support and successfully deployed it to the firebase.

Read More