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

Подписаться 32 тыс.

Просмотров 11 тыс.

50% 1

💰 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-...
DigitalOcean: m.do.co/c/37fc3499bf36
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyThe...
Discounts:
⚡ Hostinger: www.hostg.xyz/aff_c?offer_id=...
⚡ SiteGround: www.siteground.com/index.htm?...
⚡ Elementor: be.elementor.com/visit/?bta=2...
⚡ 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

Опубликовано:

13 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 93

@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 Месяц назад

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 29 дней назад

@@ALVIERIDEVELOPER On Digital Ocean

@Shourov-ko5pw 5 месяцев назад

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

@gurvirbaraich Месяц назад

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

@BrewskaySA Месяц назад

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

@tsykin 6 месяцев назад

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.

@ryanp787 5 месяцев назад

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

@saharilarshad1628 12 дней назад

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

@leo-phiponacci Месяц назад

Very simple, right to the point, thank you

@collinsk8754 2 месяца назад

Very clear and easy to follow 👏👏

@harrypham6337 2 месяца назад

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

@rsym.4397 4 месяца назад

this is so underrated video! thank you!

@RaddyDev 4 месяца назад

Glad you liked it!

@HarikrishnanSrinivasan 21 день назад

Thanks a ton for this!

@MohamadOmar-oi3ur 3 месяца назад

That's exactly what I was looking for

@shadiflo 3 месяца назад

Amazing tutorial Thanks so much!!!

@ahsanamin3818 3 месяца назад

excellent explanation

@RaddyDev 2 месяца назад

Thank you!

@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 2 месяца назад

This is great

@user-zo7vy6tc8y 7 месяцев назад

nice tutorial!!

@RaddyDev 6 месяцев назад

Glad you think so!

@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

@prashlovessamosa 6 месяцев назад

Thanks 🙏.

@RaddyDev 6 месяцев назад

😎👌

@RaddyDev 6 месяцев назад

😎👌

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

@gabrielmegiatoreloferreira5860 4 месяца назад

TKS

@laduniestu 5 месяцев назад

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

@alleggs Месяц назад

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

@user-bf8hi1ev7m 2 месяца назад

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

@danimusbar 2 месяца назад

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

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

@Anonymose43 3 месяца назад

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 3 месяца назад

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 2 месяца назад

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

@friendly-notsofriendly 29 дней назад

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 27 дней назад

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 27 дней назад

@@RaddyDev ohhk thanks ✨️

@ArturComunello 19 дней назад

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

@RaddyDev 18 дней назад

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

@armandaarif 2 месяца назад

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

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

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

@4717user 3 месяца назад

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

@RaddyDev 3 месяца назад

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

@ALVIERIDEVELOPER Месяц назад

please do with docker

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

@vigor-ds 4 месяца назад

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 4 месяца назад

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 2 месяца назад

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

@naolfekadu6101 23 дня назад

why no docker??

@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

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

@HuyLe-tu4pj 6 месяцев назад

Could you try with aws ec2 and code deploy?

@RaddyDev 6 месяцев назад

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

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

@mageshyt2550 6 месяцев назад

how can i deploy my app in SiteGround ?

@RaddyDev 5 месяцев назад

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

@benevbright 3 месяца назад

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

@Chris...S 5 месяцев назад

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

@Chris...S 5 месяцев назад

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 5 месяцев назад

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 4 месяца назад

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 3 месяца назад

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 3 месяца назад

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