Add SSL to a website on AWS EC2 Ubutnu with Nginx

Buy a domain name from Namecheap, You will learn how to set up SSL, mutli domain name like yourwebsite.com, admin.yourwebsite.com and api.yourwebsite.com. And with nginx service we will handle that in one Ubuntu server. Let me show you my tutorial.

Buy SSL on any provider, here we're using Namecheap.

Let's just use the cheapest one, you can figure out what are the different between each option later.

Once purchased, we have the new SSL available to use:

Click on “Activate”:

Now, let's connect to your EC2 and generate new CSR for your domain:

To generate CSR in ubuntu, we must SSH connect to EC2 and use following command:

openssl req -new -newkey rsa:2048 -nodes -keyout yourwebsite.key -out yourwebsite.csr

then fill information for the following section below:

1. Country Name (2 letter code) [US]
2. State or Province Name (full name) [BC]
3. Locality Name (e.g., city) [Vancouver]
4. Organization Name (e.g., company) [My Company Ltd]
5. Organizational Unit Name (e.g., section)
6. Common Name (e.g., your name or your server’s hostname)
7. Email Address

If your website have front end and backend on the same server, I suggest you to use wildcard as common name. For example, I want domain yourwebsite.com point to front end, and domain api.yourwebsite.com point to backend. In order to do that, I will fill common name like this “*.yourwebsite.com”.

After filling full of information above, you will see "extra" section (Password, Optional name, ..), in this step, please press enter and don't type any thing to skip this section. 

After that copy content from yourwebsite.csr and fill to SSL INFO form.

And keep in eye on yourwebsite.key, you will use it later.

Now add CNAME to activate the SSL

Get record:

Add CNAME to the domain config:

Next step, is depend for your Web service and server. We will use nginx to handle this.

First let install nginx by command:

sudo apt update
sudo apt install nginx

Then we remove default config:

sudo rm -rf /etc/nginx/sites-enabled/default

Then create your own config file for web server:

sudo vim /etc/nginx/sites-enabled/yourwebsite

The content of the config file will include two sections: Listen SSL through port 443 and Listen to web server from port 80 or another port. A tip for port 80 that, if your server host a lot of website, I recommend you not to use port 80 any more.

#force ssl for www.yourwebsite.com
server {
       server_name yourwebsite www.yourwebsite.com;
       return 301 https://yourwebsite.com$request_uri;
}

#point yourwebsite.com to port 3000 (Especially for Next.JS)
server {
       listen 443 ssl;
       listen [::]:443 ssl;

       server_name yourwebsite www.yourwebsite.com;
       
       # Certificate
       ssl_certificate /etc/nginx/ssl/yourwebsite.crt;
       
       # Private Key
       ssl_certificate_key /etc/nginx/ssl/yourwebsite.key;
       location / {
               proxy_pass http://localhost:3000;
               proxy_set_header Host $http_host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
       }
}

#force ssl for api.yourwebsite.com
server {
       server_name api.yourwebsite www.api.yourwebsite.com;
       return 301 https://api.yourwebsite.com$request_uri;
}

#point api.yourwebsite.com to port 3001
server {
       listen 443 ssl;
       listen [::]:443 ssl;

       server_name api.yourwebsite www.api.yourwebsite.com;
       
       # Certificate
       ssl_certificate /etc/nginx/ssl/yourwebsite.crt;
       
       # Private Key
       ssl_certificate_key /etc/nginx/ssl/yourwebsite.key;
       location / {
               proxy_pass http://localhost:3001;
               proxy_set_header Host $http_host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
       }
}

Oh what about Certificate and Private Key:

You will receive certificate key from email, after you fill your csr key to SSL Info form, copy that content of certificate key and create this file to paste this content.

sudo vim /etc/nginx/ssl/yourwebsite.crt

And private key you get from step (Generate CSR), copy that file to path 

/etc/nginx/ssl/yourwebsite.key

After that, run this command to reload your nginx config.

sudo systemctl reload nginx.service