Deploying a Next.js application on an AWS EC2 instance involves several steps. This guide will walk you through setting up an Ubuntu server, installing and configuring Nginx as a reverse proxy, and using PM2 to manage your next.js application process.
Connect to your instance via SSH, and proceed with the necessary setup.
Step 1:Update and Install Dependencies
Update the package lists and install the necessary packages:
sudo apt upgrade -y
sudo apt install -y nodejs
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add –
echo “deb https://dl.yarnpkg.com/debian/ stable main” | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn
sudo yarn global add pm2
pm2 startup
Step 2: Organizing project structure
Create directories for organizing your project:
mkdir repo.git app conf logs
These directories will respectively hold your Git repository, application code, configuration files, and logs, which are neatly separated, making it easier to manage and maintain the application through its lifecycle.
Step 3: Initialize and Configuring Git Repository
Initialize a bare Git repository. A bare repository is used to manage code collaboration without working copies.
git init –bare
git –bare update-server-info
# Configure the repository to work with our deployment setup
git config core.bare false
git config receive.denycurrentbranch ignore
git config core.worktree /home/ubuntu/app/
The core.bare false configuration makes the repository behave like a non-bare repository. The receive.denycurrentbranch ignore allows us to push to the currently checked-out branch. The core.worktree configuration points to the directory where our application code will live.
Create a Post-Receive Hook
A Git hook is a script that is executed at certain points in the Git workflow. We’ll use a post-receive hook to automatically deploy the code whenever a push is made to the repository.
#!/bin/bash
git checkout -f
cd /home/ubuntu/app
yarn
yarn build && pm2 restart pm2.json
EOF
chmod +x hooks/post-receive
Step 4: Configure pm2 using pm2.json
Create a pm2.json file in app directory.
“apps”: [
{
“name”: “project_name”,
“instances”: “max”,
“exec_mode”: “cluster”,
“script”: “npm”,
“args”: “start”,
“cwd”: “/home/ubuntu/app/”,
“env”: {
“HOST”: “127.0.0.1”,
“PORT”: “3000”,
“NODE_ENV”: “production”
}
}
]
}
Don’t Forget to change project name and cwd (current working directory)
Step 5: Adding remote repository in local machine
On your local machine, add the remote repository and push the code:
ssh-copy-id ubuntu@ip_address
git push prod master
Step 6: Installing and Configuring Nginx
Install and configure Nginx:
sudo systemctl enable nginx
sudo rm /etc/nginx/sites-enabled/default
Add the following configuration in nginx.conf:
listen 80;
listen [::]:80;
index index.html;
server_name domain_name.com;
# access_log /home/ubuntu/logs/nginx.access.log;
# error_log /home/ubuntu/logs/nginx.error.log;
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;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Don’t forget to replace domain_name with your own domain.
Soft-link this configuration to nginx conf.d directory
Step 6: Securing Server with SSL (Optional)
Install Certbot and configure SSL:
sudo certbot –nginx
# Follow the on-screen instructions to complete the setup.
Step 7: Check configuration and restart nginx
Test the Nginx configuration and restart the service:
sudo systemctl restart nginx
By following this guide, you will get successfully deployed your Next.js application on an AWS EC2 instance running Ubuntu, with Nginx as a reverse proxy and PM2 to manage the application process.
