Next.js 14 Deployment to VPS with GitHub Actions CI/CD
Vložit
- čas přidán 27. 07. 2024
- 💰 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
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.
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
@@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 added the virtual memory on DO or on git. Please clarify
@@ALVIERIDEVELOPER On Digital Ocean
We would be happy if you make a video all the same stuff with docker.
Amazing Tutorial/Course, you simplified everything and made this super easy to following along and understand. Great Work!!!! Thank you So Much!!!!
Thank you so much!! Was looking for something like this, you saved so much time of mine. Thanks again
Very simple, right to the point, thank you
Very clear and easy to follow 👏👏
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
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.
Thank you so much for the video. You save my day!!!
That's exactly what I was looking for
Amazing tutorial Thanks so much!!!
this is so underrated video! thank you!
Glad you liked it!
Thanks a ton for this!
Amazing tutorial!!
excellent explanation
Thank you!
This is great
Awesome. RaddyDev, please make a tutorial for multiple apps, nextjs, react app (frontend), nodejs (backend). Enjoys your tutorials videos.. Thanks
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.
nice tutorial!!
Glad you think so!
Awesome video!!
can you show me how to setup prisma for the ORM with t he database too?
Great tutorial. Thank you.
By the way, how we deploy different environments which are bound to different branches
Thank you this covers a lot of stuff.
I have a request. Can you please set up development previews?? That would be awesome
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
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.
Thanks 🙏.
😎👌
😎👌
Great video as always. Can you also show how to host multiple NextJs websites on a single VPS droplet? Thanks
Thank you. It would be a matter of adding a new site and starting another process with pm2
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!!
TKS
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
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?
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
Please make another tutorial using different stack like phoenix framework for this CI CD
please do with docker
Hello @RaddyDev, great tutorial, quick question. What can be done so we prevent the app return 502 Bad gateway during the build process?
You can try replacing the last line in your yml with Reload instead: run: pm2 reload 0
please make same video with multiple variables and domains for dev and prod 🙏
why no docker??
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.
Have you tried run: pm2 reload 0 instead of restart? That might help with the website going offline
How about starting app on 80 and no nginx setup? What would be problems?
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.
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?
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.
@@RaddyDev ohhk thanks ✨️
I don't have folder _work in action_runner but i run cmd ./run.sh, so how to fix it. Thanks
That's a bit strange... did you manage to figure it out?
so does this generate static next js website? or can I use all things like ISR, revalidate and SSR?
You can use all features like SSR, API, ISR etc
39:37 I think changing directory is not needed? We're already in the right directory.
Could you try with aws ec2 and code deploy?
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
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?
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"
@@RaddyDev yeah thnx I figured that out) i removed “use server” and it started working! Thanks for fast reply!
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
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?
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?
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
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
Hello, it gives error when I fetch api from graphql. I can not find out real reason, does anyone have any idea ?
What error do you get?
is need to run git pull command to update the vps server code with github?
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
@@RaddyDev thanks. If I want setup another project at same VPS. Do need make another actions runner folder or a actions runner enough?
how can i deploy my app in SiteGround ?
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...
when try to add the runner on the vps , I didn't get the "_word" dir .. why ?
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
@@RaddyDev
I found the issue.. line in node.yaml
I' tried this and my env variables are not being picked up in my app.
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
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
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
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
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.
Posted on my blog including .env example and reload. Link in the description :-)
so many useless steps making the video long, we all know how to setup a vps and make it accessible via ssh key.
Some people may want to know tbh
I think that's why there's timestamp.. 🤔😂
@@shafiq_ramli sure nice seeing people still active on this video. Wishing you Goodluck on your deployment