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

[@RaddyDev]

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]

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.

[@mrdza96]

@@ALVIERIDEVELOPER On Digital Ocean

[@Shourov-ko5pw]

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

[@ryanp787]

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

[@tsykin]

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.

[@Iago-Toledo]

This is pure gold, thank you so much!!!

[@MohamadOmar-oi3ur]

That's exactly what I was looking for

[@BrewskaySA]

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

[@dogzrgood]

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

[@RaddyDev]

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

[@jefrycayo4582]

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!!

[@rsym.4397]

this is so underrated video! thank you!

[@RaddyDev]

Glad you liked it!

[@Johnny-rf4iu]

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

[@RaddyDev]

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

[@saumyaranjannayak2101]

Best tutorial ever!

[@laduniestu]

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

[@leo-phiponacci]

Very simple, right to the point, thank you

[@saharilarshad1628]

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

[@collinsk8754]

Very clear and easy to follow 👏👏

[@DanielPenaloza-fj8yo]

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.

[@HarikrishnanSrinivasan]

Thanks a ton for this!

[@gribcovcomedy]

Nice, thanks Any video of how dockerize this setup?

[@RaddyDev]

I haven't done a dockerized setup, but there might be something you can find on youtube. Have a look at Coolify or Dokku anyway. They make the setup a lot easier

[@Anonymose43]

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]

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

[@IlkhomMaksadkulov]

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

[@ahmedkhabar]

Thanka a lot for this amazing easy to follow tutorial

[@harrypham6337]

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

[@armandaarif]

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

[@franalcaraz1676]

Amazing tutorial!!

[@examinatork57]

the website goes down when it is being deployed....it takes 30min to deploy my site..meaning 30min downtime...any solution?

[@mohdsahil226]

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.

[@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

[@examinatork57]

​@@RaddyDev the next app goes offline during the "build" step, and the runner does'nt get to the "pm2 restart or reload" line yet

[@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 ✨️

[@shadiflo]

Amazing tutorial Thanks so much!!!

[@alleggs]

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

[@alyxx997]

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]

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

[@examinatork57]

@@RaddyDev the next app goes offline during the "build" step, and the runner does'nt get to the "pm2 restart or reload" line yet

[@kareemadelawwad]

Thanks ❤

[@ahsanamin3818]

excellent explanation

[@RaddyDev]

Thank you!

[@AirdropLuck]

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]

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]

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

[@danimusbar]

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

[@codewithmorkeh]

This is great

[@Janiya.S.K]

Hello "Error: Dependencies lock file is not found in /home/janitha/actions-runner/_work/wedding-directory/wedding-directory. Supported file patterns: package-lock.json,npm-shrinkwrap.json,yarn.lock" in this wedding-directory folder I have separate folders for frontend and backend. I just spent several hours but couldn't figure it out how to run git action in frontend. Can you help me?

[@RaddyDev]

Look up "monorepo github actions" examples online. Maybe even ask chatgpt to help you configure one based on your project folder structure

[@gabrielmegiatoreloferreira5860]

TKS

[@benevbright]

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

[@metalhumans]

hi i have hosted on vps kvm2 Hostinger , but images are braking (next js , typescript, tailwind, mongodb - project) do we need any special settings for nginx or need any url changes i have purchased envato subscription and downloaded images stored them in public folder of next js project working well in localhost but breaking images after getting deployed

[@RaddyDev]

You don't need a special setup. The images should work, so it's most likely a path issue. When you deploy your website, inspect the images sources and see if you can spot the problem.

[@metalhumans]

@@RaddyDev Haa i have forgotten to setup gitlfs in server and that has caused the issue, anyway thanks for responding

[@vigor-ds]

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]

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]

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

[@examinatork57]

@@muhammadaryomuzakki i think this may be the right answer

[@BlueCell]

what if I need env file in my project? I didn't get this, you added env in node.js.yml, but is env creating in the app folder or not?

[@RaddyDev]

The .env is created on build using the secure keys from GitHub. You'll have to list them one by one in the node.js.yml file. Example with two keys pushed to a file called .env.production: - name: Create env file run: | echo "NEXT_WEBSITE_URL=${{ secrets.NEXT_WEBSITE_URL }}" >> .env.production echo "NEXT_PUBLIC_NEXT_GA_TRACKING_ID=${{ secrets.NEXT_PUBLIC_NEXT_GA_TRACKING_ID }}" >> .env.production working-directory: ${{ github.workspace }}

[@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?

[@ALVIERIDEVELOPER]

please do with docker

[@4717user]

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

[@RaddyDev]

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

[@mohammedal-khafaji7298]

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]

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?

[@benevbright]

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

[@gomo5628]

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.

[@naolfekadu6101]

why no docker??

[@Chris...S]

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

[@Chris...S]

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]

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]

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]

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

[@prashlovessamosa]

Thanks 🙏.

[@RaddyDev]

😎👌

[@RaddyDev]

😎👌

[@liebespaar93]

nice tutorial!!

[@RaddyDev]

Glad you think so!

[@AhmadRaza-mw7ux]

Hi, I followed all your steps. Whenever GitHub action is running, website goes down. And after completing all steps, website comes live. Is there any fix for it?

[@RaddyDev]

Try run: "pm2 reload 0" instead of restart. That should help with the website going down

[@AhmadRaza-mw7ux]

@@RaddyDev Ok I will check

[@examinatork57]

@@RaddyDev the next app goes offline during the "build" step, and the runner does'nt get to the "pm2 restart or reload" line yet

[@mehemmedrustemov9154]

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

[@RaddyDev]

What error do you get?

[@mohammedal-khafaji7298]

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

[@RaddyDev]

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]

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

[@therajuahammad]

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

[@RaddyDev]

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]

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

[@mageshyt2550]

how can i deploy my app in SiteGround ?

[@RaddyDev]

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...

[@michaelhurley3437]

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]

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

[@iamvinny]

so many useless steps making the video long, we all know how to setup a vps and make it accessible via ssh key.

[@dekafmusic]

Some people may want to know tbh

[@shafiq_ramli]

I think that's why there's timestamp.. 🤔😂

[@dekafmusic]

@@shafiq_ramli sure nice seeing people still active on this video. Wishing you Goodluck on your deployment

[@Ziko2687s8]

I didn't know, this was perfect for me 👍