Automatic Deployment With Github Actions

[Music] hey what's going on guys it's anton here and today i'm going to show you guys how to set up automatic deployments with github actions now before we get started i want to go ahead and give brad another huge thank you for allowing me to do this video on this channel once again i really appreciate it so let's go ahead and get started with talking about what exactly is an automatic deployment so let's just say for example this is my live application right now anyone can go to this ip address they can see this application now let's say i want to make some changes let's say i don't like how this logo is over here or let's say if i want to add some other text whatever it is that i want to do i want to make a change so i'm going to go to my code and for example i'll just add a simple h1 tag over here and i'll just say hello world and i'll save now i'm going to go ahead and stage all of my changes with git so i'm going to say git add i'm going to create a commit message so let's just say test commit message and once i'm done reviewing all of my changes i'm going to go and just push so this is going to push to our remote github repository as you can see right over here you're gonna see it says test commit message now if i click on actions you're gonna see that we have all of our jobs that are being running or jobs that have ran in the past so if i click over here this is the current job that's in progress you're gonna see if i click on build we have a bunch of scripts that are being ran in a sequential order so the first thing that happened was we set up a job it run actions slash checkout version two it uses node.js version 14. okay i'm not going to explain all this just yet but what's going to happen is that a bunch of different scripts are being ran every single time we make a push to our repository and once everything has succeeded what's going to happen is our application is going to get auto updated on the production server okay on the live server over here so this is going to take a couple of minutes usually takes about probably like a minute or so you can actually look over here it will tell you the approximate amount of time it took so some of my jobs took one minute some of them took two minutes but you can see the job just finished okay and everything succeeded which is good and since everything succeeded if i refresh the page you're gonna see it says hello world okay see how that works so that's what i mean by an automatic deployment instead of having to manually transfer all of our files over and over again from our localhost all the way to our production server we can actually do something like this where we can set up a github action it'll run all of the necessary scripts that we wanted to run once everything has succeeded we can refresh all of our customers can see the live application so hopefully this makes sense and let's go ahead and get started from the very beginning on how to set this up okay so the very first thing that we want to do is create a brand new github repository so we're going to click on new we're going to click on over here and we'll give it a name of react.js tutorial so we'll create the repository and what we're going to do is i actually already have a brand new uh react project so let me just actually open that up okay it's brand new we're going to start from scratch so what i need to do is i need to actually add that repository as remote for this git repository so i'm going to do git remote add origin now you guys probably already have this already so you can just skip this step i don't have this git repository attached to any remote so that's why i'm adding it but i'm going to go ahead and just simply stage all of our changes we're going to make a commit message and then we're just going to have to push everything so let's do that real quick like i said you guys probably don't need to worry about this because you already have everything set up already okay so now i'm going to push all of my changes so now you should see we have our uh our changes on github okay so that's fine so now the next thing that we need to do is we need to make sure we create a workflow so we're gonna go over to actions right over here and you're gonna go ahead and look over here we have get started with the github actions there's a whole bunch of different environments that get up action supports but for this tutorial since we're deploying a react app we're going to click on node.js set up this workflow right over here okay so we just click on this and now we can actually customize this okay so let's actually let me zoom in a little bit now you can actually change the name of this uh yaml file okay so this right over here is a yaml file and pretty much we're going to just customize it to what we need we'll go through it very briefly so over here we have the name okay we have on over here so this part is important basically this tells github when to actually trigger the job so we want to trigger whenever a user creates a push to whatever branch so you can see it says on push and then we can specify all the branches so if you want you can create a separate branch and you can only listen to changes on that branch but for our case we'll just leave it alone for master branch you can also make it so that whenever a pull request happens on master branch it'll also trigger that job as well but i'm going to go ahead and delete that because we are not going to be dealing with pull requests and now we also have line number 10 we have jobs right over here so this pretty much is going to be a job that's going to be run every single time this workflow file is going to be triggered so whenever we make a change whenever we push to the master branch it's going to run this job right over here okay so we can specify where it runs on so over here we're actually going to change this to self-hosted okay because we're going to be running the github actions runner on our virtual private server now over here this is what's called the strategy matrix so you can specify which versions you want to test against which versions you want to run your jobs for so you can specify node version 10 12 and 14 because let's say for example you have different versions that are being run so what's going to happen it's going to run three jobs it's going to run all of these jobs for version 10 of node.js all of these jobs for version 12 and then all of these jobs for version 14. okay but in our case we're only going to leave it for version 14 so we'll just leave that alone but again if you want to specify multiple different versions to run this job in you can do that okay so now this part is where we're going to specify all of the scripts all the steps that we want our job to execute so over here you're going to leave all this alone this is default so just leave that part alone but right over here we have run mpm clean install i'm going to change this to install and then after we install all dependencies we want to run the build okay so npm run build and this is an if present flag so we'll only run it if the build script is present which it is for react that we do have a build script right over here okay and then we have npm test so this is going to run uh npm test right over here so that will run all of the test cases okay so that's going to be pretty much it we're not going to change anything else for now i just want to show you guys what actually happens okay so remember all we did so far was we have it so that it's only going to listen to events whenever we push to the master branch so let's go ahead and let's just commit this directly to the master branch so you're going to notice that if we go over to actions there should be yep we have a workflow that's being run right now it's going to fail the reason why it's failing is because it says no runner matching the specified labels was found self-hosted the reason why this is happening is because we haven't set up an actual runner on our server yet okay in order because we're using self-hosted we need to make sure we actually have a runner on our virtual private server that's listening to jobs okay so every single time we make a push to the master branch our server is going to listen to that job and it's going to run all of the necessary scripts that we wanted to run so we're going to go over to settings right over here we're going to click on actions and you're going to leave enabled local and third-party actions first repository and then we're going to click on add runner and right over here you're going to select uh linux right over here or whatever operating system you're using but i'm going to select linux you can also specify the architecture we're going to leave that alone so now everything from here is pretty straightforward all you need to do is just run all of these uh scripts over here so over here we're going to create a folder called actions runner and it's going to cd into it so i'm going to copy that now on my server right over here i'm on my other account right over here so i'm going to go ahead and just copy and paste that so now we're inside the actions runner folder because that's what this just did to create a new folder and it cd into it we're going to download the latest runner package so we're going to copy this okay again it's very straightforward we're going to go ahead and enter that it's going to download that file against a tar.gz file and if i type ls you're going to see that that file is over here once we have downloaded that file we're going to extract it so we're going to copy this it's basically just going to extract that file we just downloaded okay and you can see that we have all of the files over here that are extracted you can actually delete uh this dot tar.gz file i'll do that right now okay there we go all right so now that we've downloaded everything and extract everything we need to configure everything so we're going to go ahead and copy this line over here this is going to basically run the dot sh the config.sh script okay so you can see right over here we have the config.sh file over here we're just going to run it okay now if you actually are using the root account it's going to give you an error well it's going to tell you it must not run at sudo so if that happens what you need to do is you need to actually run this script over here i know this is actually an issue that some people have had if you actually google it uh you'll actually see must not run with sudo okay that happens because you're trying to run as the route you can actually just export agent allow run as root equals to one and everything else should work now obviously you probably shouldn't use your root account in general but if you need to then go for it but if you run into that issue like i said just run this command and it should work just fine i actually ran into that issue myself so when i ran the script export agent allowed runners root equal one it actually fixed it for me so it should definitely fix it for you guys as well but if that doesn't work out then just create a new user account on your server and then just run all the steps but you can see nothing went wrong okay so we can go ahead and continue with the installation so it says enter the name of the runner so i'm going to call it uh github or actually i'll call it a react app okay now i'm going to skip this part this is for labels i'm going to skip it okay so now it's going to ask you to enter the name of the work folder so you can leave it by default underscore work but i'm going to call this react app okay so now you're going to see that right now we actually don't have anything we don't have the work folder we don't have anything that's because we haven't ran any jobs yet now if i actually refresh this page or actually i'm going to click on actions again you're going to see that it's actually offline we need to make it go online so what's next is actually we need to go ahead and do dot run.sh so we're going to execute this bash script so dot slash run.sh okay there you go it says connect to github listening for jobs okay so if i click on actions you can see our github action runner is currently idle it's online but it's idle so now if i want to run my jobs right now so i'm going to go ahead and click on rerun jobs so if something fails you can actually go back to actions you can click on the job that failed and you can rerun it instead of having to push everything all over again so you can see that it's queued and let's go and build and let's actually see what happens here and we can also look at our logs where you can see that running job build 14.x and you can see what's going on over here is going to basically use node.js version 14 okay it's going to run npm install so this is going to install all of the dependencies it's kind of like whenever you clone a project from github if you're cloning a nodejs project you have to run all the pencils first the reason why is because you don't commit your node modules folder and you don't push that to github so it's going to run all of these uh scripts over here so it usually takes about like a minute or so it depends on how many dependencies you're installing i know if you actually try to do this with an angular app it'll actually take a lot longer from experience because for me it took about like three minutes but that's because angular is a lot larger than react but this should take at most i would say one minute okay so you see that's done so now it's going to run npm run build so that's going to build the entire react project into the bundled assets the static files and then you can see that succeeded and it's going to run the test script that's also going to succeed as well and there you go so we're done now the problem here is that if i actually exit out of here the github action is not going to be running anymore so what we can do you can see it says offline right what we can do instead is we can actually run this svc.sh that's also a bash script as well we can run it if i actually type help we're actually going to see it says must run at sudo so we actually have to type sudo dot sv dot slash svc.sh let's help you're going to see let me type in my password okay so you're gonna see that we have a bunch of different commands okay it tells you how to use it so we have install start stop status and uninstall so we need to actually install this as a service so we're going to type sudo dot slash svc.sh install so this will pretty much create a symbol for us and then once we're done we need to type start if you actually type status you'll see that it's currently inactive okay that's because we need to have it started yet so let's start it and there you go if i type status again it's running on the background as a service which is good and even if our server were to restart like if it rebooted it would still start up as a service which is awesome okay so now i can basically create a bunch of different deployments i can pretty much create a bunch of different commits and then push it and then this will always trigger a new workflow for us okay we'll trigger a new job and then it will automatically give us the latest changes okay so now the next thing that we need to do is we need to actually take this project and reflect it onto our server because this is still pointing to the old project this is the demo project that i was showing you guys we need to actually have all this being shown on our server now to do that we actually need to use something called nginx now you can actually use apache if you want but nginx is going to be just fine alright so if you guys don't know what nginx is it's basically a very popular web server and you can use it for many different things such as a reverse proxy as well as well as a load balancer now we're going to use nginx to pretty much route our website to whichever path that we wanted to route okay so right now this is the main route over here so nginx will pretty much say hey look at this route we're going to serve all of these uh static files so if you guys don't have nginx installed just pretty much install it you can go ahead to your terminal and just type sudo apt install nginx and now this will install it now i already have it already so it's just gonna say uh it's gonna save this over here we already have it that's fine okay so that's pretty simple so now that you have nginx installed you can verify that it's running by typing sudo systemctl status ngx okay and it should say active now if it's not running you can just simply say sudo systemctl start nginx now i already have it started already so that's not going to do anything okay so let's go ahead and configure our nginx config so i'm going to go ahead and cd into slash etc engine x this is where the njx folder is and we're going to go inside sites available now if i type ls you're going to see we have this default file over here this is our nginx config now we have to run this as sudo and i'm going to go ahead and edit this default file over here now i'm going to go ahead and use vim you guys can use nano or whatever text editor you want but i'm just going to use vim but i would suggest you guys use nano it's probably a lot easier but what i'm going to do is you can see that i already have this config already and it was actually pointing to this build folder okay that's the folder where all of my bundled assets for from the react project is okay so we're going to actually have this pointing to something else if i actually just delete this or if i just do this and if i want to verify that all of my changes are valid i can save pseudo engine x hyphen t i'm going to go ahead and restart nginx and you're going to see this as forbidden that's fine don't worry about it okay so what we want to do is we actually want our nginx to point to the build file for our react project okay so let's go back into the main folder over here let's go into actions runner so i see it back into the main and you can see that i'm in i'm inside actions runner now you can see that we have this react app folder okay remember this was the name of the folder uh when we were installing the github actions runner this was the work folder we're gonna see it into here so this is going to be named whatever it is that you named it and you're going to see we have a bunch of different files the only folder that we need to worry about is this react.js tutorial github actions so this folder is going to be dependent on the name of your repository so i'm going to cd into that folder now there's going to be another subdirectory so just see it into that again now you can see all of the files that are from your github repository so basically what happens is every single time you run a new push it's going to basically clone the repository into here and it's going to run all the scripts so now if you look at the build folder we have all of our files over here we actually want to point nginx we want to tell nginx to point to this folder over here because this is where all of our static files are so i'm going to copy this path over here okay i just type pwd and then i'll give me this path and what i'm going to do is i'm going to edit the default file okay so that's sudo vim slash etc slash nginx slash site's default or slash sites available slash default and i'm going to go over here so for root i'm just going to have it map to instead of slash var www i'm going to have it map to this now let's go ahead and exit so we start and now if i refresh you can see that we have our react app all right so that's pretty cool so let's go ahead and make some changes to our app so i'm going to go ahead and delete this image i'm going to delete this import and let's just go ahead and create div create div and just say hello world and i'm going to go ahead and stage all my changes i'll commit let's push let's see what's going over here oh you know why okay so the reason why this is happening is because we actually uh i completely forgot about this okay so right now you're gonna see that it says uh it failed to push the reason why is because uh when we created our repository uh we made a commit okay and then we also created a workflow now the workflow is not on our local repository just yet so before we push let's just actually pull so we pulled and that should give us our workflow okay we'll have all the latest changes from the master branch okay and we can actually just edit the workflow over here too now let's go ahead and leave this all alone and let's go ahead and just push so now that should work okay so now that's going to push you can see it says uh there we go it says it was a merge but it was actually just a pull that we uh committed okay that's fine but uh it should just create another job though with the latest uh build so let's see okay so it's going to run npm install okay and it's going to uh currently right now you can see that says four for not found that's because all of our files were replaced already okay so once the build is done if i refresh you can see that our app is still here but then yeah everything is pretty much good to go and you can see our latest changes are reflected on the website okay you can see that we had removed the image we had added the hello world over here all right so i'm going to show you guys how to set up a domain name just real quick because it's actually very simple okay so to set up your domain name it's actually very simple so i personally use namecheap that's where i buy all of my domains you want to click on settings over here and then you want to go over to domain and where you see name servers by default it won't point to custom dns you want to have it point to custom dns because by default it points to name cheap basic dns and you basically want to enter all of the digital ocean name servers so for example ns1 digitalocean.com ns2.digitalots.com and industry.digitalocean.com so once you have done that you want to go over to your control panel in digitalocean and what you want to do is you want to create an a record over here okay so i already have one already but you just go to a you just type at and have it direct to your ip address over here and you click on create record and now pretty much create this record over here so it might take uh you know some time for it to actually update but that pretty much is the necessary substitute to do for your domain name to actually work okay so i wanted to show you guys one more thing so in case if you're using react router because i know most of you guys probably might be using react router or any kind of routing so i set up a simple uh routing with a react router dom and right now you can see that i have uh two routes i have the slash route and i have the dashboard route so i just deployed it again if i go to slash dashboard this should actually show the dashboard page which it does so that's good okay so if i go back here it will go back to home page so the react router will work just fine okay so now i'm going to show you guys how to deploy the backend now it's actually going to be very easy so i already have a repository that i uh created i cloned it and then i already set up the simple express application like i said this is not a tutorial on express i just want to show you guys how to use github actions so we're going to go ahead and just stage everything we're going to create a commit so we'll just say backend and we'll just push everything to github now nothing's going to happen because we don't have the workflow file so we'll set that up real quick so i'll set up this workflow and again we're going to change this from ubuntu latest to self-hosted and we can change this to just run on point x okay and i'm going to leave everything else alone and instead of npm clean install i'll just do npm install we don't have a build script so that's fine we also don't have a test script so actually this is a very simple express project so if you have other things such as test cases or if you're using typescript and you're trying to build everything down so you can definitely do that as well so you just need to make sure you have the actual script over here okay so since we don't have any of those scripts i'm just going to get rid of them so now we're going to go ahead and commit this okay and let's go ahead and do that okay so now what we'll do is we will just simply let me just get pull on the local repository so we have the workflow file and i'm gonna go ahead and set up the runner on our uh back end for this repository so you need to set up a new runner for every single repository uh i don't think any set of one runner for multiple repositories i don't think that's possible so now what i'm going to do is i'm just going to follow the same steps again we're going to create a new folder but this time i'm going to create a new folder call it express backend i'll just cd into there and i'll just do the same thing i'll download the latest runner package i'm going to extract the installer once that's done we're going to run the config.sh file okay so that's going to do the same thing we did before and we'll just leave everything alone okay and the work folder we'll just call this express js app all right so we're pretty much good to go and again we want to run this as a service so what i can do is i will do sudo dot slash svc.sh install okay so that's going to create a symbolic for that and now i can go ahead and do sudo dot slash svc sh start there we go our runner is active and now if i click on actions again you can see that if i uh refresh it should say idle now before it was offline now it's idle okay so now uh if we type ls you can see that i don't have any of my code in this folder but let's go ahead and rerun this job so let's rerun it okay so that's going to it should be pretty fast it shouldn't take too long because this is a very lightweight application usually for like your react view or angular app those will take probably like you know two minutes three minutes at most for your express app it's very lightweight so it shouldn't take too long you can see it just excel you can see just installs it and we're done it took literally like what 10 seconds 22 seconds and now if i type ls you can see that we have this express js app folder okay let's see it into there let's see the into expressjs back remember this folder inside that work folder is going to be reflected on the repository name and we'll just see the into that again and you can see we have all of our code the problem here is that our backend isn't running right now so we need to actually run it now we're going to go ahead and use a package called pm2 so we're going to install it using npm now pm2 stands for process manager and we can use this to pretty much run our applications on the backend for as long as we want so let's install it real quick now i'm actually going to get an error because it's going to say that we don't have permissions to install this package globally you're going to see that's gonna fail okay so you can see that it failed it says permission denied now there's a couple ways you can fix this just for this tutorial and i do not recommend you guys do this i'm gonna use sudo okay but do not do this okay i'm just only doing this for the tutorial purposes instead what you should do is just set the owner of this uh of this folder to this uh anson account over here okay or you can just create a separate global folder that will have all of your node modules installed there globally and then you can set the config registry but just for this sake i'm just going to install this with sudo but like i said do not do this i'm only doing this for the sake of demonstration okay there we go so that was successful so now i'm going to do pm2 start and i'm going to go and reference app.js i'm going to give this a name and i'll just call this back end api okay there we go so we just start this as a background service so now this will run indefinitely if i say pm2 logs you can see that it says running on port 3000 now if i want i can actually go to port 3000 just like this and you can see they'll just say hello and if i want i can also go to the other routes that i had created i think i created uh what was it let's see slash hello slash dashboard okay there we go so now here's the problem though right when we actually run this job over here it doesn't actually restart the app so what we're going to do is we're going to edit our workflow file and right over here we're going to execute this script we're going to just do run pm2 restart backend api so this is just going to run that script over here so once everything is done it's going to just run pm to restart backend api so that's the name of our app okay because you cannot start up applications with github actions yeah so this is going to work just fine so it's going to restart the api okay so i'm actually going to just do this i'm going to type pm2 logs and what i'm going to do is i'm going to go ahead and just do this i'm going to say message hello status 200 and i'll also do status tool 1 for example and now let's go ahead and deploy this again so git add commits test you push so this is going to take roughly like 30 seconds like i said so let's just take a look at the build so you can see that it's going to yep it restarts everything and if i actually look over here you're gonna see that it actually just got restarted okay it stopped the api and it started again okay that's what restart does with pm2 okay so now if i go over here if i refresh see how it says status to one so that was an automatic update okay so that's pretty cool okay so the next thing that i'm going to address is how to actually make it so that instead of having to visit port 3000 how do we actually make it so that it'll actually just go to the api without having to specify the port because you don't want people to actually reference this it's never a good idea to actually allow ports like this to just be open so what we're going to do is we're going to type sudo uft status you're going to see that for me it's inactive so i'm going to go ahead and just enable it real quick i'm just going to say command may disrupt existing ssh connections so i'll just proceed that's fine and let's type this again now i'm just going to go and do this pseudo ufw allow ssh and i'll also allow http so if we try to go to ansonfunk.com you're going to see it's not going to work okay because we have port a disabled but if you actually type sudo ufw allow nginx full and if we type sudo ufw status you can see that right over here it says allow anywhere and then right over here perfect that's fine okay awesome okay so now if we try to go back to over here you're gonna see it's not going to work because port 3000 is it's not that it's disabled it's just our firewall is not allowing that port to be accessed so we can do something like sudo you have to allow port 3000 okay and this will work just fine but we don't want to do that okay you don't ever want to just randomly allow random ports to be enabled so let me go ahead and just deny this real quick so i'll just disable that okay you can see port 3000 deny okay so now you can see that it's not going to work anymore if i try to go to any of these routes it's not going to work okay so what we want to do is we want to take advantage of nginx and use nginx to pretty much forward all those requests to our api to port 2000 through nginx okay so what i'm going to do is i'm going to go ahead and edit my uh default file that's from the slash etc nginx sites available and what i'm going to do is i'm going to go ahead and create another location block right over here and i'm going to give it the route of api okay so we're going to make some tiny changes to our code in just a sec but this is what i normally do i create this slash api route and i do a rewrite with nginx so what this is going to do is going to rewrite the route and it's basically going to capture every single uh route parameter so for example it's going to capture every single route parameter after slash api so we'll use a regular expression for that so that's going to capture every sl everything after a slash api slash and what i want to do is i want to capture every single thing after it okay and once that's done we want to actually forward it to slash api slash one break okay so let me actually explain what's going on with a regular expression tester so pretty much this regular expression is going to capture everything that comes after slash api slash so if we put that regular expression right over here you can see that in the green this is everything that is being captured okay this is a capture group you can see on the right hand side group one we have dashboard slash one two three four five okay same thing over here we have guest and we have payments so every single time we make a request to our website it's going to reference this slash api route and then we're saying hey look capture everything that comes after that slash api route right over here and once we've done that it's going to be captured and it's going to be stored inside this dollar sign one variable so whatever comes after slash api slash that's going to be the value of the dollar sign one variable and we're basically saying hey look we're going to do a proxy pass so we're going to pass in all of this with slash api prefixed and then the value that was captured so all that is basically going to be proxy passed down into our back in api so it'll actually hit the correct end point the reason why we have this slash api route over here is just to make sure that we're not conflicting with any of the client-sided routes of our react application and then we're going to simply just do a proxy pass and we're going to proxy pass it down to localhost port 3000 okay so like i said it's going to take this route right over here and it's basically going to attach in front of this http localhost port 3000 and so our api will actually be hit correctly so this is why we need to actually configure our backend real quick so we need to change it from slash hello slash dashboard we need to prefix it with slash api in front of it for this to work okay so let's go ahead and save and what i'll do is i'll go over here and i'll actually just do this i'll do that and i'll restart okay so now watch this okay if i try to go here that's going to take us to the front front end route over here that's going to take us to react that but if i try to go to slash api dashboard it's going to say can i get api dashboard the reason why is because we need to redeploy so let's do that real quick okay so this should take about 30 seconds shouldn't take too long so in a couple seconds it should just take us to our endpoint okay so if i refresh you can see that it takes us here now so now we don't need to reference port 3000 if i want to go to slash api that will work as well if i want to go to hello that will work as well and this will not affect our routes over here because if we don't add that slash api route it's actually going to conflict with our front end routes as well so that's why personally for me i usually just add a slash api route over here so what's going to happen is nginx is going to say hey look if you're trying to visit anything that starts with slash api we're going to let you do that we're going to capture every single route parameter after and we're going to basically add it in front this is what the dollar sign is with the regular expression we're basically using a capture group to capture everything that comes after slash api slash okay and then we're going to rewrite it so that it's going to proxy pass everything to local host port 3000 with the correct routes so essentially what's happening is if i try to visit instantphone.com api dashboard what's actually happening with nginx is it's taking this route over here right this everything after here and it's going to proxy pass it to localhost port 3000 and it's going to give us a dashboard or sorry not a dashboard api dashboard okay so this pretty much allows us to make requests to it without needing to reference the actual port itself okay so hopefully that makes sense i know it's a little bit weird but all you need to really understand is that we have two routes okay we have slash and then slash api this location slash should be responsible for all of the routes for react so if i were to visit slash that would be for the react route but anything that starts with a slash api has to do with the back end so you need to make sure that on your react app you actually don't have a route called slash api because if you do it will actually conflict with the back end and let me show you that real quick let me go into my react app and i'll just add another route and i'll call this slash api and we'll just let it map to home page okay so let's go ahead and deploy this okay so now our code has been deployed we're going to let it do its thing okay so watch this so it works and if i try to go to slash api you're going to see that we're trying to visit the react route right on localhost this is going to work just fine is our app even running i don't think so so this is going to work just fine on localhost you can see it's working just fine but on the front end over here for our production server you can see it's trying to go to the backend api because that's the route over here that's this slash api route so you can see we have a conflict so just make sure that you don't create any endpoint that matches some kind of route on the front end otherwise there's going to be confliction okay so the next thing that we're going to do is set up a server block this will pretty much allow us to deploy multiple different websites very easily because we don't want to do everything inside the default server block over here so i'm going to go ahead and type sudo cp we're going to copy defaults and we're going to name it as instantphone.com and what i'm going to do is i'm going to edit ansonfound.com and what i want to do is right over here where we have server name it's going to be the same exact thing as default but we want to actually change the server name to point to our domain name so we'll type ansonfile.com and then www.ansonfong.com this actually be very important because if we want to install a ssl certificate this is how we'll do it we need to make sure it's named after it after our domain name okay so everything else from here is going to be the same exact thing and what i'm going to do is i'm going to go ahead and exit and we're going to go ahead and create a symlink so we're going to type sudo ln hyphen s and we need to reference the absolute path it's not going to work if you use a relative path of this server block and we want to link it to the sites enabled folder so this will enable our website now if i type pseudoenginex hyphen t you're going to see that it fails and the reason why is because we actually have a duplicate default server so to fix this we're going to edit our domain over here and we're going to just remove default server just like that whoops okay so now if i type pseudo hyphen pseudo engine x7 t it succeeds and i'm going to go ahead and restart nginx now the next thing that i'm going to do is i'm going to show you guys how to install uh a certificate for a website because right now you can see this is not secure so of course you want to install a certificate you want to secure your website so we're going to use let's encrypt so what we're going to do first is we're going to install certbot so we're going to type sudo add apt repository ppa certbot slash certbot okay so let's just let that do its thing and we will enter and then we're going to go ahead and install swordbot so we're actually going to go ahead and type in python3 okay so let's just type y okay so that's going to install serp up for us now we need to also make sure we are enabling https through the firewall but we already enabled nginx full so that's fine all right so now we need to obtain an ssl certificate so we're going to type sudo cert bot hyphen nginx hyphen d and then the name of our domain so ansonphone.com and you also want to do www.ansonphone.com and actually there should be a lowercase d right over here sorry about that all right so now it's going to ask us for our email address so i'll just type that in so once you've done that it'll just tell you to agree okay okay there we go okay so the reason why we're actually getting this issue is because it's actually failing to find the www domain so i think we need to actually go inside our digital ocean and add another uh we need to actually attach another name record okay so we only have this right over here we need to actually add one for www so i think after adding this it should successfully do the trick so let's actually try this again so let me go ahead and enter okay i don't need to enter anything anymore okay okay so it seems like that had fixed it now you can see it says please choose whether or not to redirect let's actually redirect so let's type two okay and there we go so now if i go back here if i refresh you see now it is secure if i go over to dashboard it is also secure i go to api dashboard it's also secure as well so that's good so we have our certificate enabled across our entire website and this is pretty much the same process that you would do if you want to set it up for any other website any other domain name it works the same way so that's pretty much going to be it for this whole tutorial once again i want to thank brad so much for allowing me to be on his channel once again i really appreciate it and hopefully this video made sense you guys and i'll see you guys later peace

Channel: Traversy Media

Views: 87,935

Keywords: github actions, application deployment, deployment, devops, continuous deployment, web app deployment, github

Id: X3F3El_yvFg

Length: 43min 26sec (2606 seconds)

Published: Mon Oct 12 2020