Auto Deploy React & Node.js with Github Actions CI/CD
Вставка
- Опубліковано 13 лип 2024
- Today we are going to deploy a react app and node.js to Digital Ocean platform using Continuous integration and Continuous delivery with GitHub Actions tutorial, and Nginx server
★☆★ Digital Ocean $100 Credit: m.do.co/c/53edbc93587b/
★☆★ My Courses: telmoacademy.com/
★☆★ 1-on-1 Mentorship: calendly.com/telmosampaio
★☆★ SkillShare 2 Months FREE : skl.sh/2Q2LsTi
Time stamps:
00:00 - Intro
01:09 - Create Node.js server
03:08 - Create React app
15:35 - Create GitHub repository
16:56 - Push code to GitHub
18:05 - Create Digital Ocean linux server
20:27 - Create SSH Keys
27:05 - Connect to Digital Ocean server with SSH
27:39 - Install Nodejs
29:38 - Install Nginx
31:48 - Create a new user
38:10 - Install GitHub actions runner
44:25 - Configuring Nginx to display our project
49:43 - Run Nginx without SUDO command
51:11 - Create GitHub actions workflows
01:01:05 - Install Pm2
01:02:20 - Start React and Node on server
★☆★UDEMY COURSES:
*The Complete JavaScript Course 2018: bit.ly/2Ci2Fzk
*Modern JavaScript From The Beginning: bit.ly/2Br13BM
*JavaScript: Understanding the Weird Parts: bit.ly/2Epdgu2
*React 16.6 - The Complete Guide (incl. React Router & Redux): bit.ly/2Br2ikq
*The Complete React Web Developer Course (with Redux): bit.ly/2zXq9IH
* React Front To Back: bit.ly/2STDUPo
★☆★Best laptops for Coding:
Acer Aspire: amzn.to/2FJrOVh
Macbook Pro 2013: amzn.to/2NbYIUp
Asus VivoBook Pro: amzn.to/2YgrCUG
Macbook Pro 2019: amzn.to/2Xzi4qG
★☆★Best JavaScript Books
John Duckett JavaScript: amzn.to/2EAEvkj
JavaScript Easy Steps: amzn.to/2VRM4sN
JavaScript Good Parts: amzn.to/2EFul1V
Eloquent JavaScript: amzn.to/2Quq5qH
You dont know JavaScript: amzn.to/2K9I9VX
My Social Media:
Twitter: / devtelmo
Instagram: / sampaiotravels
How can we overcome an issue, when deploying the website it crashes for a while, does anyone have a solution about that? So that even while redeploying the website doesn't crash, and also when build failed the website crashes.
Great question, I'm actually in the process of creating a video that solves that problem, we can use for example load balancers that helps split the traffic between 2 applications, and will guarantees us some zero downtime deployments, so no crashes visible to the users :)
@@Telmosampaio Great to hear that, I have researched a lot but not succeed. Instead I did my own logic to run two projects if one crashes serve another, using bash script. But I am new to this so hopefully you will come with an awesome solution. Waiting for that video. ♥️
@@Telmosampaio Sound beautiful, but where this video?
This is all what we need in order to go ahead and master self hosting our projects, amazing job bro!
I appreciate it!
This was amazing.... watched the entire video in one seating.
Awesome! best video for explaining this! cheers telmo!
Very detailed video. Hope to see a lot from you. Thanks for sharing!
Sir, you are the best anytime i'm watching your videos, i feel like you're teaching me in person
Hello sir. I want to say thank you for your concise tutorial. Now I'm able to deploy my project automatically to VPS
Thank you for all your hard work on this.
Incredibly helpful. Thank you so much!
Just awesome video for the full process. Thank you. ❤️
I like your style, smooth and simple, keep going.
It is the best video for Github actions, just a few things can be improved- It would have been great if we have a file or page from where we can copy the commands you wrote and if you can explain a bit more about commands and yml configuration commands otherwise superb video, the speed was perfect for a newbie like me. Keep up the good work.
Thanks, I followed your tutorial and it was succesfully done.
Telmo, you saved my day. Thanks man.
thanks bro, is amazing, i find this tuto and never found one is perfect but this is amazing
Splendid work 👍
great video, it very helped me, thank you Telmo
Thank you for an amazing tutorial.
Good Job,
This is the one that I tried to find one.
Thanks
Thanks a lot for the tutorial. It was awsome.
Nice one, i exactly want this ... thanks 😊
Huge effort you did Telmao for this explanation thank you really , if you guys have found other solutions less complicated plz
Just what I wanted !!
Great tutorial!
Great video!
Thank you for this amazing video....
THIS IS AMAZING ! I hope you'd make a video of the same project with docker !
someone give him a medal
Damn this tutorial is really good
Great tutorial.
GREAT CONTENT
good work, thanks
Superb!!
this guy save my life :)
Thanks a lot!
Very useful tutorial, and bravo.However, it would be very good if you explained in more details some of the code and commands that where copy/pasted from your notes.But, awesome job
Granda Telmo, Portugal tambem tem bons professores pa !
Obrigado Andre, Portugal tem que ser representado 😁
Cool~ so the runner on server is to automatically detect any local push to master branch then server will git pull and run the cicd?
Hey Telmo this practice realy helpful. Especially for beginners like me
I have a questions what is the difference between build CI/CD with docker and without
I watched several videos before watching your's. Those are a little bit misunderstable but yours easy to understand
can you make video with Docker like this one.
Very good tutorial but you don't have the cors problem on local environment ?
nice
Awesome. This same will work with AWS Lightshail Ubuntu also right?
Really nice tutorial. Let me switch from pm2.deploy to Github CI/CD Thanks
very good pronouncation
Lot of Docker videos are not understandable. Hope you'd post one sooner. Awaiting 🐣
Hi from vietnam
I love you
Excellent, how to do the same for deploying into AWS ?
It worked perfectly for me friend, I uploaded my app (backend in Nodejs) and just like your steps work perfectly. Now I have a question if you could help me... I have my front end in firebase and my backend I will have in digitalocean, how could I connect with a domain and subdomains both so that they work? Thanks in advance for your advice.
Hi. I actually want to send only build folder to the remote server. How can we do that ? Because present approach(whatever you explained) is sending source code as well to the remote
Mern app deploy in aws using cid cd pipeline.please make details video on this ans also cover how to make server fast after launching in aws
Hello, after deploying to my server , I created "uploads" folder where will be the images of my users.but after redeploying this folder was deleted. Is there any way to keep this folder
I am only able to go to /home route in react not able to go to other routes
How do you write multiple branches ?
What is your visual studio code theme?
Check react packaging config webpack for build remove the directory name for double folder issue...
hi , why you didn't use pm2 restart ?
at 47:12, there seems a type "cidcd" at the end of "root" command, why there is no error
how to use env file in your workflows when module build
github actions, with complete deployment on nodejs application how we can working on self hosted runners. Thanks
EDIT: Turns out I need to add - run: pm2 resurrect at the end of my actions so it rebuilt the processes that were removed.
Maaan, I keep getting an issue where my processes (orphan processes) created by pm2 get removed.
It runs fine and throws no errors but the pm2 processes never appear onto my server even thought it seems like they are created okay during the actions running.
When done manually using the terminal it works fine. Just not through actions.
When the actions are completed I can go into my server and type pm2 resurrect and it works okay.. But I dont want them to be cleaned up.
Any ideas?
I did exactly same steps but I couldn't find the _work directory. Am I missing something? DO I need to configure public key of my server to github ?
What's the name of your VScode theme please?
build is successful but my pm2 process getting stoped after 3 secs
GREAT_VIDEO(👋,👋,👍);
I got tihs error at last step Creating an optimized production build...
The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.
Error: The operation was canceled. Would you please help me.
Hi,
How your pm2 command is working
As I have globally install on server and when trying to run the pm2 command through GitHub actions it say pm2: command not found
Make sure you're logged inside your server.
Thank for video!
I have a question
How to pass env variables to react build?
I think you add it in environments on the github setttings.
why would you put bash scripts into your www directory? you're storing a token in there too
Hey there! Excellent job explaining as always. I was wondering if you can maybe hook me up with a free membership to your website, since I'm starting from scratch that would be awesome to me!
It is showing 502 bad gateway nginx can somebody help me with that
I'm getting this too, I haven't found a solution yet.
@@redpin14 Did you guys fix this?
@@j0s3805 yes I eventually fixed it, the default-available file was messed up and I had to follow the documentation on DO’s website to get it fixed. It’s called a nginx server block
20:37
dude, thanks for video but , where a sourcecode?) r u kidding?))))
instance [ pm2 start 0 pm2 stop0] in yml file use the name of pm2 in your case - run: pm2 restat mywebsite
40:02