Tutorials

Deploy Next.js Application on an EC2 Instance with Express.js

Posted in AWS Tutorial

Updated on Sep 22, 2024

By Mari Selvan

👁️ 119 - Views

⏳ 4 mins

💬 1 Comment

Deploy Next.js Application on an EC2 Instance with Express.js

Photo Credit to CodeToFun

🙋 Introduction

Deploying a NextJS application on an Amazon Elastic Compute Cloud (EC2) instance allows you to host your application on a scalable and reliable cloud infrastructure.

In this tutorial, we'll walk through the process of deploying a NextJS application on an EC2 instance.

📚 Prerequisites

Before we begin, make sure you have the following prerequisites:

AWS Account and EC2 Access:

Ensure you have an AWS account with access to the EC2 service.
Running EC2 Instance:

Make sure you have an EC2 instance that is up and running.
Elastic IP Association:

Associate an Elastic IP with your EC2 instance to provide a static IP address.
File Transfer with Filezilla:

Set up Filezilla with a connection to your EC2 instance for easy file transfer.
Secure Shell Access with PuTTY:

Configure PuTTY to establish a secure shell connection to your EC2 instance.
Node.js and NPM Installation:

Ensure Node.js and NPM are installed on your EC2 instance for running your Node.js application.

🖥️ Creating a Simple NextJS App

Let's create a simple NextJS web application using the specified commands:

Create a new directory for your Next.js project:
```
mkdir my-nextjs-app
cd my-nextjs-app
```
Open a terminal or command prompt and run the following command to create a new NextJS app:
```
npx create-next-app
```
Move into the project directory:
```
cd next-js
```
Now, use npm run dev command to start the development server.

This command triggers the development mode, which includes features like hot code reloading, error reporting, and other optimizations for a smoother development experience.
```
npm run dev
```
By default, it will start the server on http://localhost:3000/. You can access your Next.js application at this address in your web browser.

Photo Credit to CodeToFun
Open your code editor and navigate to the project folder. The main NextJS components are located in the src/App directory. You can modify the src/App/page.js file to make changes to the default app.
We will now proceed to deploy the NextJS application on an AWS Ubuntu EC2 instance.

🚀 Launching an EC2 Instance

After completing the prerequisites, proceed with the following steps to deploy your NextJS application on an EC2 instance.

Make sure that your EC2 instance is operational and running.

Photo Credit to CodeToFun
Establish a connection to the EC2 instance using PuTTY.

Photo Credit to CodeToFun
Make sure that Node.js and npm are installed on your Amazon Ubuntu Instance.

Photo Credit to CodeToFun
Create a directory on your Amazon Ubuntu EC2 instance with the provided command.
```
sudo mkdir nextjs-website
```
Grant permission to the directory to enable file uploads.

Before granting permission, the directory name appears in blue color with transparent background.

After granting permission, the directory name appears in blue color with green background.

Run the following command to grant permission.
```
sudo chmod 777 /home/ubuntu/nextjs-website
```
Photo Credit to CodeToFun

Create a index.js file in the root of your Next.js project with the following content:

index.js

Copied

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('*', (req, res) => {
    return handle(req, res);
  });

  const PORT = process.env.PORT || 80;
  server.listen(PORT, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${PORT}`);
  });
});

Transfer your website files and folders from your local machine to an EC2 instance using Filezilla, excluding .git and node_modules folder.

Photo Credit to CodeToFun
Next, use PuTTY to globally install PM2. Use the following command to install PM2.
```
sudo npm i -g pm2
```
Photo Credit to CodeToFun
Navigate to the website directory and run the following command:
```
sudo npm i
```
Before deploying, you need to build your NextJS app. If you haven't built it yet, you can do so with the following command:
```
sudo npm run build
```
Now, initiate the application with pm2 by executing the following command:
```
sudo pm2 start index.js
```
Photo Credit to CodeToFun

Congratulations! We have successfully initiated our NextJS application using pm2. You can now close PuTTY.
Proceed to step 1, where you should copy the Public IPv4 DNS or Public IPv4 address, then paste it into the URL and press Enter.

Photo Credit to CodeToFun

Our NextJS application is running successfully on our Amazon Ubuntu EC2 instance.

🎉 Conclusion

Congratulations! You've successfully deployed a NextJS application on an EC2 instance. Remember to monitor your application, set up security measures, and consider using a domain name for a production environment.