How to Deploy a Next.js Application on an AWS EC2 Ubuntu Instance

Linux commands

1. Launch an EC2 Instance

  • Log in to your AWS Management Console.
  • Navigate to EC2 and click "Launch Instance."
  • Give a name as desired (e.g., my_next_app).
  • Choose the Application and OS Image (e.g., Ubuntu).
  • Select Instance Type (e.g., t2.micro).
  • Configure Key Pair:
  •    Create a new key pair or select an existing one.
  •    Name the key (e.g., RSA, .pem format).
  • Network Settings:
  •    Create a security group.
  •    Check all three network traffic options (e.g., SSH, HTTP, HTTPS).
  • Configure storage (as desired).
  • Click "Launch Instance."

2. Associate an Elastic IP ( Optional )

  • Navigate to "Elastic IPs" in the left sidebar.
  • Click "Allocate Elastic IP address."
  • Keep all settings default and click "Allocate."
  • Select the Elastic IP, then choose "Associate Elastic IP address" from the Actions menu.
  • Check "Allow this Elastic IP address to be reassociated."
  • Click "Associate."

3. Instance Connection

  • Select your instance in the EC2 dashboard.
  • Click "Connect" to the instance.
  • Open the terminal in the browser (or use SSH with your .pem key).

4. Update the System and Install Dependencies

Run the following commands:

1. Refresh the package list to ensure the latest software versions are available.

sudo apt update

2. Upgrade all installed packages to their latest versions without prompting.

sudo apt upgrade -y

3. Install Node.js and npm to run and manage your Next.js application.

sudo apt install -y nodejs npm

4. Install Git to enable cloning and managing your project repository.

sudo apt install -y git

5. Install Nginx to serve as a web server and reverse proxy for your app.

sudo apt install -y nginx

6. Navigate to the '/var/www/html' directory to clone your repository here.

cd /var/www/html

7. After cloning the repository, grant permissions to the project directory.

sudo chmod -R 777 /var/www/html

8. Download your Next.js project from the specified repository URL into /var/www/html.

git clone [your-repo-url]

9. Globally install PM2 to keep your Next.js app running in the background.

sudo npm install -g pm2

10. Open the default Nginx configuration file for editing in the nano text editor.

sudo nano /etc/nginx/sites-available/default

11. Add the following configuration.

server {
      server_name your-ip-or-domain;

      root /var/www/html/myapp/.next;

      location / {
          proxy_pass http://localhost:3000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
      }
  }

12. Test the Nginx configuration file for syntax errors before applying changes.

sudo nginx -t

13. Start the Nginx service to reload the updated configuration..

sudo systemctl start nginx

14. Change the current directory to '/myapp' where your Next.js app resides.

cd /var/www/html/myapp

15. Install project dependencies:

npm install

16. Build the Next.js app:

npm run build

17. Launch your Next.js app using PM2, naming the process 'next-app'.

pm2 start npm --name "next-app" -- start

18. Save the current PM2 process list to persist after system reboots.

pm2 save

19. Restart Nginx to apply changes

sudo systemctl restart nginx

20. Open a browser and visit 'http://your-ip-address' to access your running Next.js application.