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
Install Yarn
Install 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.
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.
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.
You will get output like below
How to Pull from GitHub and Deploy nextjs project to Ngnix
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.
Run PM2 to Freeze the Process
Happy Coding ✌
Tags:
NextJs