How To Deploy NextJS With Nginx and PM2

hello everyone in this video I'm going to show you how to deploy a nexjs app with pm2 so first let's make sure that pm2 is installed all right and then let's create a new nexjs app right next let's create a private GitHub repo and let's push this to that repo next let's launch a compute instance running Ubuntu for this I'll be using AWS ec2 but you can use whatever Cloud platform you want so let's click on to ec2 and then launch instance all right next let's go back to our local machine and generate the pm2 ecosystem all right so this was the file that it generated so we're going to want to make a few changes here so let's get rid of that I'll get rid of that and let's do an npm start because this starts the next server for the SSH username we're gonna want Ubuntu we also want to have an SSH key here so key not a pen and let's copy that file to this directory and for the SSH host machine let's go back to AWS and click on the instance and copy the IP and let's do that for the branch it was called Main for the git repository let's go back to get and copy the URL here and for the destination path uh this should be home Ubuntu and since we are going to be using NVM we're gonna have to source that before we can use node okay and then we're also going to want to do an npm run build [Music] okay and finally we will want an SSH options and we're going to do forward agent equals yes okay let's check in this file and then it and then let's push this to get up all right next let's SSH into the server so this is H I [Music] well uh we have to do a CH mod 400. let's try that again okay that worked all right next uh let's install NVM so you can find this command from the NVM git repo okay and then let's do a source dot bash RC and so now we have NVM installed into NVM install LTS install pm2 okay and let's do this update install nginx [Music] and let's restart okay let's check the browser and we'll go ahead and click on open address and it says the site can't be reached but that's because we don't have https set up yet so let's go here all right so we see our nginx welcome page all right let's uh configure nginx so let's go back to the terminal do this pseudo them Gen X all right and paste in this let's change this to the IP address for now okay and then restart okay so let's go back to our local machine and uh we're gonna want to do a Bim [Music] and I'm gonna SSH or edit the configuration for SSH and I'm going to type in um post and then paste in the IP and until a forward agent yes okay and let's go back to our server here and um ssht get that github.com and say yes and it says permission denied so let's go back to our local um actually let's exit out of here and then SSH back in and all right and then let's do SSH Dash T get at github.com okay we are back at the local machine and we need to do an SSH ad and now we can SSH back into the server and do an SSH T get a github.com and it says you've successfully authenticated so that's good uh now let's go back to our local and run M2 apply production setup okay and let's do a dm2 y production okay it says it was a success so let's go back to the server and now let's do a pm2 LS okay I've been too long okay all right let's go to our URL and see all right so there's our next JS page however we are not finished with this setup yet as you can see the site is not secure as it is lacking the SSL cert so to fix that we will need to go to our DNS provider so I am using dreamhost but you can use whatever DNS provider you want and so I'm going to go ahead and create a record here and create an a record and I'm going to say my app points to this IP address and I'm going to add record and so this takes a while so I'm going to stop the recording and come back later so it looks like our domain propagation status is propagated and uh and if we go to our URL you'll see that it is pointing to the nginx welcome page so to fix this we'll just have to go back to the server and then edit the configuration and I'll go ahead and change this to the URL so looks like that but that's really lonely so let me do that here refresh this oh I have to restart okay so there's the next side uh so we've just set up the domain but we still have to set up our SSL certificate for this we will need a certbot so uh we go to this certbot.f.org and then uh we'll say my HTTP website is running nginx on Ubuntu 20. and this should give us the set of instructions to follow all right so uh we are back in the server here and I'm going to run these commands okay and then the next one um I'm gonna use a fake email here okay so it looks like uh that worked now let's go back to our app refresh okay so now we have the lock icon and we have a working SSL cert that concludes our tutorial on how to deploy next JS with pm2 for more resources on full stack development check out fullstepbook.com thank you for watching I will see you next time

Channel: Full Stack Book

Views: 30,874

Keywords:

Id: IwWQG6lEdQQ

Length: 16min 43sec (1003 seconds)

Published: Sun Oct 16 2022