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:

1. AWS Account and EC2 Access:

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

2. Running EC2 Instance:

   Make sure you have an EC2 instance that is up and running.

3. Elastic IP Association:

   Associate an Elastic IP with your EC2 instance to provide a static IP address.

4. File Transfer with Filezilla:

   Set up Filezilla with a connection to your EC2 instance for easy file transfer.

5. Secure Shell Access with PuTTY:

   Configure PuTTY to establish a secure shell connection to your EC2 instance.

6. 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:

1. Create a new directory for your Next.js project:

   mkdir my-nextjs-app
   cd my-nextjs-app

2. Open a terminal or command prompt and run the following command to create a new NextJS app:

   npx create-next-app

3. Move into the project directory:

   cd next-js

4. 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

5. 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

6. 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.

7. 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.

1. Make sure that your EC2 instance is operational and running.

   

   Photo Credit to CodeToFun

2. Establish a connection to the EC2 instance using PuTTY.

   

   Photo Credit to CodeToFun

3. Make sure that Node.js and npm are installed on your Amazon Ubuntu Instance.

   

   Photo Credit to CodeToFun

4. Create a directory on your Amazon Ubuntu EC2 instance with the provided command.

   sudo mkdir nextjs-website

5. 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

6. 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}`);
     });
   });

7. 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

8. Next, use PuTTY to globally install PM2. Use the following command to install PM2.

   sudo npm i -g pm2

   

   Photo Credit to CodeToFun

9. Navigate to the website directory and run the following command:

   sudo npm i

10. 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

11. 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.

12. 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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Telegram 450

Author

👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All