Next.js 14 Deployment to VPS with GitHub Actions CI/CD

Рет қаралды 11,580

7 ай бұрын

💰 Get $200 in DigitalOcean Credit: m.do.co/c/37fc3499bf36
Learn how to streamline your web development workflow by deploying Next.js 14 to a Virtual Private Server (VPS) effortlessly with the power of GitHub Actions Continuous Integration/Continuous Deployment (CI/CD).
My Notes ( + links and resources): raddy.dev/blog/how-to-deploy-nextjs-app-on-a-vps-using-github-actions/
DigitalOcean: m.do.co/c/37fc3499bf36
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyTheBrand
Discounts:
⚡ Hostinger: www.hostg.xyz/aff_c?offer_id=408&aff_id=69300
⚡ SiteGround: www.siteground.com/index.htm?afcode=09595c7fe587c29769c4e54e3464a14f
⚡ Elementor: be.elementor.com/visit/?bta=26518&brand=elementor
⚡ DigitalOcean: m.do.co/c/37fc3499bf36
Recording Equipment:
◾ Microphone: amzn.to/3uX0yvP
◾ Shotgun Mic: amzn.to/3aRsSJb
◾ Camera: amzn.to/3IMumkx
◾ Lens: amzn.to/3ARxvh8
◾ Lighting: amzn.to/3PBetj2
Computer Gear:
◾ Keyboard: amzn.to/3RCXRcC
◾ Headphones: amzn.to/3aIvskX
◾ Mouse: amzn.to/3VfVuxO
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.uk/newsletter
Chapters:
◾ 0:00 Introduction:
◾ 0:34 Plan
◾ 2:28 Project Setup
◾ 5:48 ENV
◾ 8:08 VPS Setup
◾ 13:11 Reserved IP
◾ 13:54 SSH
◾ 16:34 Updates + New User
◾ 19:25 Installing NodeJS + PM2
◾ 22:55 Action Runner Setup
◾ 27:06 Work Flow
◾ 30:06 PM2
◾ 41:50 Domain
◾ 44:17 Nginx
◾ 48:52 SSL
◾ 51:04 Final Build
◾ 52:11 Ending
#nextjs #vps #ubuntu

Пікірлер: 95

@RaddyDev 7 ай бұрын

This was a tough one to put chronologically. Please share your reasons for choosing a VPS over one-click deploy platforms? * Just wanted to mention that 1GB Ram might not be enough for a slightly bigger project.

@ALVIERIDEVELOPER 2 ай бұрын

i keep receiving build errors. I use 1GB RAM. Could this be the reason ? EDIT: Yes that was the reason. I just had to increase my CPU size to 2GB (about $12/month ) and rebuild. All was good

@mrdza96 Ай бұрын

@@ALVIERIDEVELOPER I had my pipeline timed out, I think it was some github action error 137. I just added virtual memory and everything worked fine after that. If you had this problem try with this and save $6.

@ALVIERIDEVELOPER Ай бұрын

@@mrdza96 added the virtual memory on DO or on git. Please clarify

@mrdza96 Ай бұрын

@@ALVIERIDEVELOPER On Digital Ocean

@BrewskaySA 2 ай бұрын

Amazing Tutorial/Course, you simplified everything and made this super easy to following along and understand. Great Work!!!! Thank you So Much!!!!

@gurvirbaraich Ай бұрын

Thank you so much!! Was looking for something like this, you saved so much time of mine. Thanks again

@leo-phiponacci 2 ай бұрын

Very simple, right to the point, thank you

@collinsk8754 2 ай бұрын

Very clear and easy to follow 👏👏

@harrypham6337 3 ай бұрын

Thank you so much for the video. You save my day!!!

@ryanp787 6 ай бұрын

Awesome video and super easy to follow!! Would love to see this exact example but have GitHub actions build a new docker image of NextJS when pushed to main, push to docker hub, and have docker-compose re-pull the new jmage on the VPS

@rsym.4397 4 ай бұрын

this is so underrated video! thank you!

@RaddyDev 4 ай бұрын

Glad you liked it!

@tsykin 7 ай бұрын

Great vide! I choose VPS to be less dependant on Vercel. I think there are a lot of benefits to hosting on VPS, since you have full control over your server.

@Shourov-ko5pw 6 ай бұрын

We would be happy if you make a video all the same stuff with docker.

@shadiflo 3 ай бұрын

Amazing tutorial Thanks so much!!!

@franalcaraz1676 4 күн бұрын

Amazing tutorial!!

@HarikrishnanSrinivasan Ай бұрын

Thanks a ton for this!

@MohamadOmar-oi3ur 4 ай бұрын

That's exactly what I was looking for

@DanielPenaloza-fj8yo 2 ай бұрын

What an awesome and extremely useful video, thanks a lot! I've been searching for something like this for a long time. Can you do this with Docker? It would've great, anyway, a new subscriber.

@codewithmorkeh 3 ай бұрын

This is great

@ahsanamin3818 3 ай бұрын

excellent explanation

@RaddyDev 3 ай бұрын

Thank you!

@saharilarshad1628 Ай бұрын

Awesome. RaddyDev, please make a tutorial for multiple apps, nextjs, react app (frontend), nodejs (backend). Enjoys your tutorials videos.. Thanks

@user-zo7vy6tc8y 7 ай бұрын

nice tutorial!!

@RaddyDev 7 ай бұрын

Glad you think so!

@laduniestu 6 ай бұрын

Awesome video!! can you show me how to setup prisma for the ORM with t he database too?

@gabrielmegiatoreloferreira5860 4 ай бұрын

TKS

@user-bf8hi1ev7m 2 ай бұрын

Great tutorial. Thank you. By the way, how we deploy different environments which are bound to different branches

@prashlovessamosa 6 ай бұрын

Thanks 🙏.

@RaddyDev 6 ай бұрын

😎👌

@RaddyDev 6 ай бұрын

😎👌

@Johnny-rf4iu 4 ай бұрын

Thank you this covers a lot of stuff. I have a request. Can you please set up development previews?? That would be awesome

@RaddyDev 4 ай бұрын

That's something that I haven't done and it would be pretty cool to do. I need to think about how it could be done

@mohdsahil226 3 ай бұрын

Hi Thank you for great content. Would you please also help on how to setup dev branch on sub domain, since the port is same, it always goes to main branch.

@armandaarif 3 ай бұрын

Thankyou for the tutorial. In my case, the actions/setup-node is always fetching node from github, and it takes forever. My fix is to use nvm to manage the node version on the server, then skip the actions/setup-node in the .yml file

@dogzrgood 7 ай бұрын

Great video as always. Can you also show how to host multiple NextJs websites on a single VPS droplet? Thanks

@RaddyDev 7 ай бұрын

Thank you. It would be a matter of adding a new site and starting another process with pm2

@jefrycayo4582 7 ай бұрын

you know how lazy we are. I suggest you make a video about. It is going to be amazing coming from you@@RaddyDev . Thanks for your effort on making these great videos!!

@danimusbar 3 ай бұрын

Please make another tutorial using different stack like phoenix framework for this CI CD

@Anonymose43 4 ай бұрын

Amazing bro! Well done 🎉 But what if I want a staging sub-domain ? Do I need to have a separate folder/project or just point nginx to pickup changes flow from staging branch? Considering having another yml file called staging?

@RaddyDev 4 ай бұрын

I am not sure if there is a better way than the one you mentioned. Basically setting up a subdomain and creating a new project with a new flow

@alyxx997 3 ай бұрын

Thanks a lot for help. Is there any way to prevent next.app going offline for that time build is running? I tried to achieve this but cant find any solutions to have my next app running while new build is being built.

@RaddyDev 3 ай бұрын

Have you tried run: pm2 reload 0 instead of restart? That might help with the website going offline

@alleggs Ай бұрын

please make same video with multiple variables and domains for dev and prod 🙏

@ArturComunello Ай бұрын

Hello @RaddyDev, great tutorial, quick question. What can be done so we prevent the app return 502 Bad gateway during the build process?

@RaddyDev Ай бұрын

You can try replacing the last line in your yml with Reload instead: run: pm2 reload 0

@4717user 4 ай бұрын

so does this generate static next js website? or can I use all things like ISR, revalidate and SSR?

@RaddyDev 4 ай бұрын

You can use all features like SSR, API, ISR etc

@AirdropLuck 4 ай бұрын

Hey ! Thank you so much for this tutorial! I have a question about how to set up nginx config in order to be able to check whick user-agent client is using? In dev mode i used this hook in order to show mobile and desktop layouts depending on ua: 'use server' export const useDevice = () => { const headersList = headers(); const { device } = userAgent({ headers: headersList }); const device = device.type === 'mobile' ? 'mobile' : 'desktop'; return { device }; }; But for some reason when i deployed it with your tutorial a get only mobile layout even i check domain from pc, could you help me?

@RaddyDev 4 ай бұрын

I just checked it on my server and it seems to work quite well. It must be something else that you are missing. I tried const {device} = useDevice(); and then I just display {device} on the page. When I use my PC I get "Desktop", and when I use my phone, I get "Mobile"

@AirdropLuck 4 ай бұрын

@@RaddyDev yeah thnx I figured that out) i removed “use server” and it started working! Thanks for fast reply!

@ALVIERIDEVELOPER 2 ай бұрын

please do with docker

@benevbright 3 ай бұрын

How about starting app on 80 and no nginx setup? What would be problems?

@gomo5628 3 ай бұрын

maybe multidomain/sites/apps use cases might be facing issues, also ssl etc...really have no idea, just speculating...but gotta be really good reason why all the devs are suggesting to proxy with nginx...really home someone can actually give more sensible answer on why is this the case.

@KhanhNguyen-bi7ow Ай бұрын

I don't have folder _work in action_runner but i run cmd ./run.sh, so how to fix it. Thanks

@RaddyDev Ай бұрын

That's a bit strange... did you manage to figure it out?

@friendly-notsofriendly Ай бұрын

I just have one doubt about vps ,once we are done hosting then in future do we have to take care of something like maintainance or something like that?

@RaddyDev Ай бұрын

It does involve ongoing maintenance, and if something goes wrong, you'll have to identify and fix the problem. For most websites I run on a VPS, I hardly have to do anything after the initial setup. Initially, I did have to implement a lot of security measures to comply with standards and pass audits. However, I've also had some websites that needed constant care.

@friendly-notsofriendly Ай бұрын

@@RaddyDev ohhk thanks ✨️

@naolfekadu6101 Ай бұрын

why no docker??

@vigor-ds 5 ай бұрын

Hi Buddy, great video. It seems like everytime i commit the my codebase. The application will be down during the build. Is there any solution for that?

@RaddyDev 5 ай бұрын

In your workflow file (yml) instead of using "restart" you can use "reload". So at the end of your node.js.yml file, you can: "run: pm2 reload 0". That should give you zero downtime

@muhammadaryomuzakki 3 ай бұрын

Isn't the reason was because pm2 watching is enabled for all files? (32:50). During the build, pm2 will reload as much as the file changes within specified time. In 38:54, it restart/reload the app 46 times, (I don't know if there is a skipped moment here) I think the solution will be to specified which directory to watch and within the particular time frame

@HuyLe-tu4pj 7 ай бұрын

Could you try with aws ec2 and code deploy?

@RaddyDev 7 ай бұрын

The process should be more or less the same. I actually ended up using lightsail for one of my projects as the pricing is predictable. As soon as you setup the SSH or use the build in one it's all the same. Maybe I could look into making a separate video in the near future

@benevbright 3 ай бұрын

39:37 I think changing directory is not needed? We're already in the right directory.

@mehemmedrustemov9154 2 ай бұрын

Hello, it gives error when I fetch api from graphql. I can not find out real reason, does anyone have any idea ?

@RaddyDev 2 ай бұрын

What error do you get?

@mageshyt2550 6 ай бұрын

how can i deploy my app in SiteGround ?

@RaddyDev 6 ай бұрын

I am not sure if you can. Their services are mainly WordPress if I am not mistaken. I've only used WP hosting with them. You could try any platform that offers VPS. Digital Ocean, ES2, AWS LightSail, Google Cloud etc...

@therajuahammad 2 ай бұрын

is need to run git pull command to update the vps server code with github?

@RaddyDev 2 ай бұрын

No, you won't have to do that. Just got push and then the GitHub Server actions will talk to the server and push the latest changes to deploy

@therajuahammad 2 ай бұрын

@@RaddyDev thanks. If I want setup another project at same VPS. Do need make another actions runner folder or a actions runner enough?

@mohammedal-khafaji7298 2 ай бұрын

when try to add the runner on the vps , I didn't get the "_word" dir .. why ?

@RaddyDev 2 ай бұрын

I am not so sure what it coud be. Did you get any errors? I wonder if it's anything to do with permission, so running the commands with sudo or root user

@mohammedal-khafaji7298 2 ай бұрын

@@RaddyDev I found the issue.. line in node.yaml

@mohammedal-khafaji7298 2 ай бұрын

Amazing. It's worked perfectly, But I have one issue I hope you give me how to fix it. I have API in my app like "app/api/story/route.ts" and this API works as well on localhost and also on "Vercel" server without any issue, but on Ubuntu server when I open the link /api/story" and all other API routes same I got an empty page without any data. I hope you can help me or give me the steps to solve this issue because I need to send this API to React Native app

@RaddyDev 2 ай бұрын

In this case, your URL will become /api/api/story . To test I just made a route like that and I can confirm that it works locally and on Ubuntu. Are you sure that it's not something else? Are you getting any errors?

@Chris...S 6 ай бұрын

I' tried this and my env variables are not being picked up in my app.

@Chris...S 6 ай бұрын

I figured it out by adding the following to the workflow: - name: Set Environment Variables run: | echo "DATABASE_URL= ${{secrets.DATABASE_URL}}" >> .env.production Ensure to put this above the build

@RaddyDev 6 ай бұрын

I am glad that you figured it out. To anyone else this creates a ".env.production" file inside your main directory with the variables listed. You can add more variables by copying the "echo" line. To test you can also print the contents of the .env file: - name: Print contents of .env.production file run: cat .env.production

@muhammedabdulganiyyishola9500 5 ай бұрын

Please how can we make secrets we have in our .evn file in GitHub secrets that are not prefixed with NEXT_PUBLIC work with this approach? only variables prefixed with NEXT_PUBLIC seem to work. @@RaddyDev

@breakjee163 5 ай бұрын

GitHub says to use secrets, so is it safe to create a .env file instead. And i dont understand why doesn't it work only in nextjs

@michaelhurley3437 4 ай бұрын

Why don't any of you guys who post these videos of the CI/CD pipeline ever link your githubs? I can't find one video with any of you guys linking your github so I can just see the set up for the yml file, which is the only thing I care about seeing in any of these videos.

@RaddyDev 4 ай бұрын

Posted on my blog including .env example and reload. Link in the description :-)