Hey there, fellow devs❤! Hope you're all debugged and ready to roll👊!
Today, we're diving into something fresh and exciting! Imagine you've crafted a sleek Next.js project, and you're raring to get it out into the wild. Easy peasy if you're deploying straight from GitHub or your favorite version control system to your own server, right?
But hold your horses...✋
What if I told you we're taking things up a notch😏? Picture this: deploying your Next.js masterpiece on a Linux server, with Nginx and PM2 in the mix! Feeling the challenge? Don't sweat it – I've got your back!
So, buckle up, code warriors!😼 We're about to embark on an epic journey filled with twists, turns, and a sprinkle of magic.
What are the Steps?
- Install Nginx
- Install Yarn
- Install PM2
- Use GitHub or any Version Control System to get your Next.js Project from Github
- How to Pull from GitHub and Deploy nextjs Project to Ngnix
- Run PM2 to Freeze the Process
Install Nginx
sudo apt install nginx
Install Yarn
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
Install PM2
yarn global add pm2
Use GitHub or any Version Control System to get your Next.js Project from Github
If your latest code resides in a different branch, you'll want to switch to that branch. For instance, if your code lives in a branch called 'development,' simply run 'git checkout development'.
Once you've done that, fire up 'yarn install' to ensure all dependencies are in place. Then, it's time to get things cooking – run 'yarn build' to whip up a runnable version of your Next.js app.
git clone github:<YOUR-ORGANIZATION>/<YOUR-PROJECT> project
cd project
yarn install
What is your package.json look like?
I've got a bit of extra fluff in my package.json, but let's focus on the essentials. The key line here is 'start': 'next start -p 3007' under scripts. To kickstart our app from the command line, a simple 'yarn start' does the trick.
{
"name": "my-project",
"version": "1.0.0",
"description": "Description of my project",
"main": "index.js",
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start -p 8000",
"test": "NODE_ENV=test jest",
"test:watch": "NODE_ENV=test jest --watch",
"test:coverage": "NODE_ENV=test jest --coverage",
"test:cypress": "NODE_ENV=test cypress open",
"lint": "eslint .",
"lint:watch": "esw . --watch --cache",
"lint:watchAll": "esw . --watch",
"circleci:run": "circleci local execute --job $JOB"
},
"repository": {
"type": "git",
"url": "git+https://github.com/username/repository.git"
},
"keywords": [],
"author": "Your Name",
"license": "ISC",
"bugs": {
"url": "https://github.com/username/repository/issues"
},
"homepage": "https://github.com/username/repository#readme",
"dependencies": {
"dependency1": "^1.0.0",
"dependency2": "^2.0.0"
},
"devDependencies": {
"devDependency1": "^1.0.0",
"devDependency2": "^2.0.0"
}
}
Start your project with PM2
But, if you want PM2 to handle the heavy lifting for us, here's the command: 'pm2 start yarn --name "nextjs" --interpreter bash -- start'. With this, PM2 will take charge, ensuring your Next.js app runs smoothly.
pm2 start yarn --name "nextjs" --interpreter bash -- start
pm2 show nextjs
You will get output like below
Describing process with id 1 - name my-app
┌───────────────────┬──────────────────────────────────┐
│ status │ online │
│ name │ my-app │
│ version │ N/A │
│ restarts │ 3 │
│ uptime │ 42m │
│ script path │ /usr/bin/node │
│ script args │ server.js │
│ error log path │ /root/.pm2/logs/my-app-error.log │
│ out log path │ /root/.pm2/logs/my-app-out.log │
│ pid path │ /root/.pm2/pids/my-app-1.pid │
│ interpreter │ node │
│ interpreter args │ N/A │
│ script id │ 1 │
│ exec cwd │ /root/project │
│ exec mode │ fork_mode │
│ node.js version │ 14.17.1 │
│ node env │ production │
│ watch & reload │ ✘ │
│ unstable restarts │ 1 │
│ created at │ 2023-11-25T09:15:27.163Z │
└───────────────────┴──────────────────────────────────┘
Add your own code metrics: http://bit.ly/code-metrics
Use `pm2 logs my-app [--lines 1000]` to display logs
Use `pm2 env 1` to display environment variables
Use `pm2 monit` to monitor CPU and Memory usage
How to Pull from GitHub and Deploy nextjs project to Ngnix
git pull
yarn install
yarn build
pm2 restart nextjs
Set up a new Ngnix Config file
The crucial line in this Nginx config file directs traffic to http://localhost:(your_port_number) with 'proxy_pass http://localhost:(your_port_number);' nestled snugly within the 'location /' block.
# /etc/nginx/sites-available/my-app.example.com
server {
server_name my-app.example.com;
access_log /var/log/nginx/my-app_access.log;
error_log /var/log/nginx/my-app_error.log error;
location /_next/ {
alias /opt/my-app/project/.next/;
expires 30d;
access_log on;
}
location / {
# Reverse proxy for the application server
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;
# We need to remove this 404 handling
# because the application's _next folder and own handling
# try_files $uri $uri/ =404;
}
}
Run PM2 to Freeze the Process
pm2 startup
Happy Coding ✌
Tags:
NextJs