Self host Next.js website on an Ubuntu server with Auto Deploy on commits!

Рет қаралды 1,486

Күн бұрын

To host Next.js app/website you only need a server running Node.js. In this video you will learn how to host a next.js website or app on an ubuntu (linux) server in the cloud which you can get from Digital ocean or AWS. As a note, In this example we are not using Vercel, Netlify or any of the app hosting platforms on digital ocean or aws as those are also abstractions. We are setting up a clean instant ubuntu (linux) server from scratch and hosting Next.js on it. On Digital Ocean you can use droplets. On AWS you can use EC2. Either way you are setting up a linux server. The only packages needed on the server are: ngnix, npm, node and pm2
Note: I made a couple of mistakes when trying to start the website using pm2. They are corrected in the video right away. I decided to keep the error and the correction in the video as I thought it is more helpful for you to see me first make the mistake and the correction, because they are very common.
Intro: 0:00
Server purchase: 2:43
Server setup: 6:04
SSH for pulling: 11:28
Create boiler plate Next.js: 14:00
Clone Next.js onto server: 16:30
NGINX config file: 18:29
Enable config file: 21:33
Launch app with pm2: 24:00
- pm2 mistake 1: 24:48 (make sure to cd into the app directory before launching)
- pm2 mistake 2: 26:02 (make sure to launch the app on the same port that's in the config file)
Live next.js site: 27:02
Add domain to config file: 27:34 (also have access to DNS records on your domain name)
Add free SSL: 30:01
Setup auto-deployment: 31:33
- Add private SSH to GitHub: 35:18
- Add GitHub Actions with yml file: 36:21
-GIST--
Gists for reference to all commands and config files used in the video:
Server setup: gist.github.com/oelbaga/50196...
nginx config file: gist.github.com/oelbaga/50196...
yml file for auto deployment:
gist.github.com/oelbaga/50196...
ssh steps for auto deployment:
gist.github.com/oelbaga/50196...
CONNECT ON MY DISCORD COMMUNITY:
/ discord
SOCIALS:
Twitter: / omarel
Website: www.omarel.com
LinkedIn: / omarelbaga
GitHub: github.com/oelbaga

Пікірлер: 22

@achrefmtir8250 13 күн бұрын

this content is legendary !

@deanelie7775 2 ай бұрын

Your tutorials are absolute gold! Thank you so much! 😊

@thedigitalceo 2 ай бұрын

Wowza, thank you!

@alexkey9372 2 ай бұрын

You are back!! great news!

@sakshambista0 Ай бұрын

LIFE SAVER ❤

@Shasa.t Ай бұрын

The KZfaq algorithm brought this to me right when I needed it! getting myself a droplet and learning

@ywywywyw612 Ай бұрын

There is a slight problem with this and it is that you cannot run build while running PM2 because building causes the files that are being served by PM2 to be modified, you have to copy them to another directory before hand, I think you can use `next build [directory to which you copied the files]` to fix this, otherwise awesome video! edit: use next JS standalone mode, not `next build [directory]`!

@thedigitalceo 26 күн бұрын

A good point. I haven’t run into a lot of issues in most cases but what you suggested is definitely best practice. Thank you!

@samsHandle 2 ай бұрын

Awesome tutorial! Any idea on how DigitalOcean pricing compares to AWS?

@thedigitalceo 2 ай бұрын

I think Digital Ocean is going to be the best value and very easy. The interface is so clean and easy. Aws interface is very confusing and the pricing is complex. The servers may be similar in cost but with AWS there’s added cost to bandwidth which makes it even more elusive. If you’re scaling something massive AWS would be good if you will use other services . For most apps Digital Ocean is really nice.

@MrAlao675 2 ай бұрын

This is absolutely amazing... Been looking/waiting for this. What about full stack with something like prisma? Thank you!

@thedigitalceo 2 ай бұрын

Thanks! Yeah that's another wonderful aspect, you can put a database on the server too.

@bphil4859 2 ай бұрын

mongodb in host bro !

@thedigitalceo 2 ай бұрын

Right! I'm all about mysql, but that's another cool thing about your own server, you can place the database on the same server! mongodb, or any other.

@alleggs 8 күн бұрын

something wrong with this. i tries to run two apps on same domain with subomains, but only one app runs on domain

@AyushKumar-ow1od Ай бұрын

sir i am facing this issue ubuntu@13.200.235.21: Permission denied (publickey). Error: Process completed with exit code 255.

@thedigitalceo Ай бұрын

It means when you created the server you didn’t place your ssh key on the server. If creating from digital ocean you need to add the ssh key during the process of creating the server. If it’s not added when creating you won’t be able to login. You can delete the server and start over.

@Benni1000games Ай бұрын

nvm, pm2 and npm should not be running as root, this is dangerous and asking for trouble. If anybody wants to follow this guide I really highly recommend that you create a separate user account for this and also for cloning and updating the code. Root is the Linux equivalent of an admin user and anything that does not require admin privileges should never run as root. If there is ever an RCE in your code or nextJS and you are running this setup the attacker has full admin access to your server. Create a sandboxed user account with limited privileges, a separate SSH key and read/write only allowed to their own files for every project, project A should not be able to read files from project B.

@thedigitalceo 26 күн бұрын

That is a good point. I believe I mentioned this the tutorial. Just kept root for the demo. Thank you for clarifying