Auto Deploy React & Node.js with Github Actions CI/CD

Рет қаралды 60,235

Күн бұрын

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

Пікірлер: 87

@qavinizamani5889 Жыл бұрын

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.

@Telmosampaio Жыл бұрын

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 :)

@qavinizamani5889 Жыл бұрын

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

@ZafarKarimov Жыл бұрын

@@Telmosampaio Sound beautiful, but where this video?

@freesyrian6732 Жыл бұрын

This is all what we need in order to go ahead and master self hosting our projects, amazing job bro! I appreciate it!

@martinmtandi335 2 жыл бұрын

This was amazing.... watched the entire video in one seating.

@drh374 3 жыл бұрын

Sir, you are the best anytime i'm watching your videos, i feel like you're teaching me in person

@aphroditesempai2186 2 жыл бұрын

Very detailed video. Hope to see a lot from you. Thanks for sharing!

@levipahlevi 3 жыл бұрын

Hello sir. I want to say thank you for your concise tutorial. Now I'm able to deploy my project automatically to VPS

@mjbarlow1 Жыл бұрын

Awesome! best video for explaining this! cheers telmo!

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

I like your style, smooth and simple, keep going.

@user-hi7vl3ob4w 2 жыл бұрын

Thank you for all your hard work on this.

@shahriarislam2640 2 жыл бұрын

Just awesome video for the full process. Thank you. ❤️

@RodnDjokYTB 7 ай бұрын

Thanks, I followed your tutorial and it was succesfully done.

@rileysheehan Жыл бұрын

Incredibly helpful. Thank you so much!

@avichalpandey538 2 жыл бұрын

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.

@kevinjoelcelis2478 2 жыл бұрын

thanks bro, is amazing, i find this tuto and never found one is perfect but this is amazing

@mohammedaamer73 5 ай бұрын

Telmo, you saved my day. Thanks man.

@ubaidkhan426 2 жыл бұрын

Splendid work 👍

@user-me4kw7nh8w 2 жыл бұрын

Good Job, This is the one that I tried to find one. Thanks

@ntwaliheritier4222 2 жыл бұрын

Thank you for an amazing tutorial.

@user-gc1rx7gl1k Жыл бұрын

great video, it very helped me, thank you Telmo

@boblehmann3185 Жыл бұрын

Thanks a lot for the tutorial. It was awsome.

@kimokimo-se3ur 3 жыл бұрын

Huge effort you did Telmao for this explanation thank you really , if you guys have found other solutions less complicated plz

@kevalnavadiya5827 3 жыл бұрын

Nice one, i exactly want this ... thanks 😊

@namesare4fools 3 жыл бұрын

THIS IS AMAZING ! I hope you'd make a video of the same project with docker !

@joe-powell 2 жыл бұрын

Great tutorial!

@DnKZone 5 ай бұрын

Just what I wanted !!

@javierroca4970 Жыл бұрын

Great video!

@anilshresthaa8174 2 жыл бұрын

Thank you for this amazing video....

@AliHassan-qd7lm 2 жыл бұрын

Great tutorial.

@drith 3 жыл бұрын

Damn this tutorial is really good

@saidmaroc8448 3 жыл бұрын

good work, thanks

@kelvinonuchukwu8215 Жыл бұрын

Superb!!

@arifarslanturk2951 2 жыл бұрын

GREAT CONTENT

@christianlisangola9383 3 жыл бұрын

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

@alanprogressive 13 күн бұрын

thanks men!

@estebanperez4755 2 жыл бұрын

Thanks a lot!

@MrJony-fv3ev Жыл бұрын

someone give him a medal

@nadunmaneeshaovitigala8725 2 жыл бұрын

this guy save my life :)

@andrevitor_macedo Жыл бұрын

Granda Telmo, Portugal tambem tem bons professores pa !

@Telmosampaio Жыл бұрын

Obrigado Andre, Portugal tem que ser representado 😁

@havefun5519 4 ай бұрын

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?

@ramazonpardayev251 4 ай бұрын

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.

@bhavikkalariya4836 3 жыл бұрын

Awesome. This same will work with AWS Lightshail Ubuntu also right?

@bigtech5586 2 жыл бұрын

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

@devadn9853 2 жыл бұрын

Very good tutorial but you don't have the cors problem on local environment ?

@braindeveloper4039 3 жыл бұрын

nice

@sammed.sankonatti 8 ай бұрын

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

@codingrussell138 2 жыл бұрын

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?

@rubensemprun-rg6dj 4 ай бұрын

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.

@CodeWithEasyFaris 2 жыл бұрын

very good pronouncation

@raghupathym25 2 жыл бұрын

Excellent, how to do the same for deploying into AWS ?

@ParasMendiratta 2 жыл бұрын

Really nice tutorial. Let me switch from pm2.deploy to Github CI/CD Thanks

@hirentank9447 2 ай бұрын

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.

@systemengineer5142 Жыл бұрын

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 ?

@hemantkumar-ug7jx 9 ай бұрын

I am only able to go to /home route in react not able to go to other routes

@aphroditesempai2186 2 жыл бұрын

Lot of Docker videos are not understandable. Hope you'd post one sooner. Awaiting 🐣

@2SaltyRecipes Жыл бұрын

How do you write multiple branches ?

@muhammadzohaib1751 2 жыл бұрын

github actions, with complete deployment on nodejs application how we can working on self hosted runners. Thanks

@oopss794 Жыл бұрын

hi , why you didn't use pm2 restart ?

@hieutancodeproject 3 жыл бұрын

Hi from vietnam

@weikangkong4932 Жыл бұрын

at 47:12, there seems a type "cidcd" at the end of "root" command, why there is no error

@sc-nc6bb 4 ай бұрын

What is your visual studio code theme?

@aungkyawkhaing1129 2 ай бұрын

how to use env file in your workflows when module build

@theskepticcoder7883 2 жыл бұрын

I love you

@technoinfoworldwide2329 3 жыл бұрын

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

@altalt2241 2 жыл бұрын

Check react packaging config webpack for build remove the directory name for double folder issue...

@europevibess Жыл бұрын

build is successful but my pm2 process getting stoped after 3 secs

@Wassim971 Жыл бұрын

What's the name of your VScode theme please?

@shahzaibimran2662 2 жыл бұрын

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

@alejomakevids 2 жыл бұрын

Make sure you're logged inside your server.

@Hadzz95 10 ай бұрын

why would you put bash scripts into your www directory? you're storing a token in there too

@user-bu5mw7jz6m 2 жыл бұрын

Thank for video! I have a question How to pass env variables to react build?

@williamschukwuebuka7907 2 жыл бұрын

I think you add it in environments on the github setttings.

@suryateja2524 Жыл бұрын

GREAT_VIDEO(👋,👋,👍);

@487_dakshsingh6 2 жыл бұрын

It is showing 502 bad gateway nginx can somebody help me with that

@redpin14 Жыл бұрын

I'm getting this too, I haven't found a solution yet.

@j0s3805 Жыл бұрын

@@redpin14 Did you guys fix this?

@redpin14 Жыл бұрын

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

@qualityvideos1 3 жыл бұрын

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!