In this tutorial we will learn how to do SSL setup on AWS EC2 for NextJs application. Its common and essential security for all website or domains to keep side secure from hackers. Have a deep look into this to learn about using HTTPS on the domain.

What is SSL?

SSL stands for Secure Socket Layer, used for making site secure. Also used to making the connection between server and user’s browser secure and encrypted.

Generating SSL/TSL certificated

You can generate self signed certificate (SSL) by using openssl as the below command for setup in nextJs application.

openssl req -nodes -new -x509 -keyout server.key -out server.cert

By running this, 2 files will be generated by name server.key and server.cert

• You need to obtain an SSL/TLS certificate and a private key. You can either purchase one from a certificate authority (CA) or use a free certificate from Let’s Encrypt.
• For development purposes, you can generate a self-signed certificate. Please note that, self-signed certificates are not trusted by browsers and should only be used for testing.

Adding SSL (Secure Sockets Layer) to your Node.js server involves a few steps. Here’s a basic guide on how to set up SSL/TLS for a Node.js server:

SSL Setup in NextJs server on AWS EC2

Install ther local-proxy on aws ec2 by running following command

npm install -g local-ssl-proxy

Upload your .cert and .key certificates files on that EC2 then add this command in the package.json script as:

Note: You have to add port 443 (for HTTPS) for that instance editbound rules. And may need to stop the apache server
use > ‘sudo service httpd stop‘ to stop apache on ec2.

"dev": "local-ssl-proxy --key /etc/letsencrypt/live/domain/keyfile.pem --cert /etc/letsencrypt/live/domian/fullchainfile.pem --source 443 --target 3000 & next dev -p 3000"

like this Package.json file

{
  "name": "your-nextjs-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "local-ssl-proxy --key /etc/letsencrypt/live/domain/keyfile.pem --cert /etc/letsencrypt/live/domian/fullchainfile.pem --source 443 --target 3000 & next dev -p 3000",
    "start": "local-ssl-proxy --key /etc/letsencrypt/live/partner.spindle.club/privkey.pem --cert /etc/letsencrypt/live/partner.spindle.club/fullchain.pem --source 443 --target 3000 & next start -p 3000",
    "build": "next build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "local-ssl-proxy": "^1.3.6",
    "next": "^12.0.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

You have to add into your application’s script tag.

Why we needed to add SSL on Next.Js Application?

Enabling SSL (Secure Sockets Layer) or its successor, TLS (Transport Layer Security), for a Next.js application provides several important security benefits. There are some reasons why setting up SSL on a Next.js application is recommended:

1. Encryption of Data in Transit:
   • SSL/TLS encrypts the communication between the client (user’s browser) and the server. This encryption helps ensure that sensitive information, such as login credentials, personal data, and payment details, remains confidential during transmission.
2. Data Integrity:
   • SSL/TLS not only encrypts data but also ensures its integrity. It helps to detecting, if the data has been tampered with during transmission. This protection is crucial for preventing man-in-the-middle attacks where an attacker intercepts and modifies the communication.
3. Trust and Authentication:
   • SSL/TLS involves the use of digital certificates, which are issued by trusted certificate authorities (CAs). These certificates help establish the identity of the server to the client, adding a layer of trust. This helps users verify that they are connecting to the legitimate and intended website.
4. SEO Benefits:
   • Search engines, such as Google, give a slight ranking boost to websites that use HTTPS. Having SSL/TLS implemented can positively impact your website’s visibility in search engine results.

More Recommendations

There are some security considerations also those are as:

1. Browser Security Requirements:
   • Modern web browsers have started to mark HTTP sites as “Not Secure,” and some features (like geolocation APIs) may only work on secure (HTTPS) connections. SSL/TLS is becoming a standard practice to comply with browser security policies.
2. Progressive Web Apps (PWAs):
   • If your Next.js application is a Progressive Web App (PWA), then SSL is often required for service workers to function correctly. Service workers, which enable features like offline caching, require a secure context.
3. Compliance with Security Best Practices:
   • Implementing SSL/TLS aligns with security best practices and standards. It helps protect your users’ privacy, builds trust, and ensures your application follows industry recommendations for securing web traffic.
4. Secure Cookie Handling:
   • Cookies marked with the Secure attribute will only be sent over HTTPS connections. It helps to protect our sensitive session data from being transmitted over unencrypted connections.

Thank You for reaching out us. You can see also How to Do SSL Setup in NodeJs Application on Production Server like AWS EC2