Dockerize Next.js & Deploy to VPS (EASY!)

in this video we're going to dockerize a nextjs application and we're going to deploy that to a VPN so I just created a very basic example here we just have this homepage here and then on this hello page we have some interesting things so we have a server component we're going to have something from a server action a client component and a route Handler so these are all the latest core features in a nextjs application so let's see if it actually works if we dockerize that and then deploy it to a VPS so just to quickly show you how that works here in the code so it's just a very basic nextjs boilerplate and then on this hello page we're doing some interesting things right so this is a server component and so we say hello from server component we're getting something from a server action right that's what we're getting here I'm invoking a server action that's This Server action that's what we're doing here and then hello is a component which is actually a client component and this client component says hello from client component and this one's actually making a call to our route Handler on the back end as well by using use effect here just a simple fetch call to/ Api hello that's what we have here this is just a very simple route Handler which says something like hello from Route Handler not super important to understand how everything works here the point is that we're using the latest features and we just want to see if this works with containerizing a nextjs application so I actually did another video on deploying nextjs to a VPS with high velocity but that was without Docker and you'll see actually that with Docker turns out to be easier in my opinion so we're going to use high velocity for the VPS again as well they are today sponsor so then let's actually dockerize this so on nextjs documentation we do see that self hosting and then a Docker container is possible and they do mention nextjs through Docker supports all nextjs features so let's actually see if that's true now I will assume that you have downloaded Docker desktop that you can actually run Docker on your computer once you downloaded that you'll see something like this you don't need to know much about Docker for this video I will explain everything step by step and then what we need to do is we need to go to our nextjs configuration here and then we need to specify that output needs to become stand alone this will actually create a server.js file so that our entire application is served from that one server JS file now if you're using the nextjs image component as well you may also want to install the sharp Library without that your nextjs image component may not work properly so this is my nextjs application now we're going to dockerize this so we create a Docker file so it's just Docker file without extension and let me actually just give you an example to see how all of that works so we need to start off with some big image because what we're going to do ourselves here is we're going to create an image out of our application and we can send that image to everybody and everybody can then run our application regardless of if they're on Windows or Mac or Linux and we deploy to a VPS the VPS will be a Linux operating system but because we are going to create an image out of our application it should be able to run perfectly fine there because the image will contain everything that is necessary to run the application so we're going to create an image and we need to specify in a dock file how that image needs to be created so our nextjs application will need nodejs nextjs is actually just a nodejs application so we're going to start off here with a basic noes image and then the uh container that will run right so a container is an actual instance of the image in there that will be a file system and we can specify that we want to put everything that we're going to do now in the app directory on that file system so we're going to copy our package lock and package.json in there and then we can actually already run and mpm install mpm will take a look at what you have specified under dependencies here and will install that all within the app directory on that file system in that container so that will install the dependencies but then of course we also have the rest of our application like our actual our server action so we need to copy all of that over into that file system as well so I will copy everything from our local file system into that container which will be running and a nexs application by default is running on Port 3000 so we need to expose that and here we can run a command we're going to run this in development now we could actually also create a production build so here in a package. Json you can see we have our Dev server but you can also build an optimized version of your nextjs application and then if you want to run that you need to run mpm run start right so then you would have another command mpm Run start this is just an example so now I have my Docker file in here and now I'm going to open up my terminal and now we're going to create a so-called image so I'm going to write Docker build find the docker file in the current directory right so this will be this file right here so that it knows how to build this into an image then I can give it a name or a tag just Dash example let's say I'm going to press enter here let's see what we get all right so it's going to build that may take a couple of seconds the first build typically takes a bit longer if you change something it should be much faster the second time you build it you can see it runs mpm install now so it's installing all of those dependencies that are defined in package Json all right so after some time actually takes quite some time it is finished and now you can go to that Docker desktop application and now under images you should see one entry here that's the one that we just built so an image in Docker is just like a blueprint of how an application but it also includes everything that is necessary to run it so that means that now I should be able to run this and so we should be able to still use that application but now through Docker right so now I'm going to shut down my NOS development server here I'm going to shut it down and now and let me close this now if I go back you can see it doesn't work anymore now I want to run this through Docker by running a so-called Docker container right so an actual instance of an image is called a container so I will say Docker run and then I need to specify the port so we want to access this on our computer at Local Host 3000 and we need to map that to where the actual application is running within that container so that's actually also Port 3000 and then the name well it's called just example just Dash example all right let's see what we get if I do this all right so now you can see we see our traditional nextjs output here in the terminal it says ready so let's actually check that out so now if I refresh here let's see what happens and now you can see I have this hello route you can see it's actually getting some response from the route Handler as well as the server action and so these two pages are still working just like before but now it's running in a Docker container so now we can pass around this image here to other people or to a VPS server as we'll see and then in those places you can also run this and you will get a container and by the way you can see your containers here your actual instances here so what you can do is in here you can go here you can go to files this is the file system in that container and so we copied everything here into an app directory so here's where you will see all of your nextjs files and this was just a simple example and if we go back to the nextjs dogs they will actually give you a more complete example as well so here in the official example they have a Docker file here as well as well as a Docker ignore file which is very similar to G ignore because remember with the docker file we were copying over some files right so here it's copying things from the local file system into what will be the container we don't want to do that with Note modules and things like that so let's actually remove our example here you first need to stop the container right this running instance we're going to stop this and actually remove it and then we can actually delete that image so I'm going to delete the image as well all right so now we have a clean slide and I'm actually just going to copy whatever is everything from this Docker file and I'm going to put that in the docker file that we created here and so this was just a simple example example this is a more sophisticated setup and you can go through it but I want to move on here I also want to add this do Docker ignore file I'm going to copy the contents here and I will quickly create that file here as well dot Docker ignore I'm just going to save here and now we have the correct files now we have this now we need to build an image out of this again so I'm going to open up my terminal once more I can actually move up to see what we had before so we say Docker build look at the docker file in the current directory and I'll give it a tag name of another Dash example I'm going to press enter here and it will build an image out of this all right so after some time that is finished again now if I go back here you can see we have an image here again you can see it's pretty big because it includes everything that is necessary to run the application so all the dependencies and nodejs environment it's all in there so now we can just distribute this image to wherever we want to run this so in this case I want to distribute this to my VPS right so the people at High Velocity were kind of enough to give me a VPS here once you buy a VPS you will see it in a dashboard like this I have a dedicated server here as well but this is my VPS it's on a server somewhere in Los Angeles let me actually click on this and here I have more information about it I want to distribute this Docker image to this VPS so that VPS can then run an instance of that image so that we can actually use that application Live on the internet right so I have an IP here so what I would like to do is simply go to that IP of course probably configur DNS so we have a nice domain name but I should be able to go to this IP address and I should see my application running there and right now nothing is here now to distribute a Docker image you need to push it to a container registry so Docker actually has Docker Hub which is a popular container registry and GitHub actually also has a container registry so if you go to GitHub and then under your profile you will actually see this packages tab this is actually also for when you publish an mpm package but here I can also push Docker images you can see I already did this in testing you can see I already have some because I did some testing before recording the video so I'm going to push this Docker image to this GitHub container registry and then from our VPS I'm going to SSH into my VPS as you'll see we're going to pull it from that registry and so then we can start running that application on the VPS all right now to do this we do need a so-called access token to push this to The Container registry on GitHub so you can go to a setting here and then here on the left side all the way on the bottom you'll see developer settings so this is like a password so that we can actually do certain things programmatically in our GitHub account this is also necessary for some other things so you can see I already generated one I'm just going to delete this I'm going to use a classic token here we're going to generate a new one I will do classic here and this is a note I will say YouTube tutorial now expiration I'm going to make it 7 Days actually I'm actually going to delete it after recording so here I can determine what level of access should be coupled with this access token so that registry is is what they call packages here on GitHub so we want to be able to push as well as read from packages and actually also delete so these are the Scopes that we need and then all the way at the bottom we should be able to generate a token all right so then here I have my token don't show this to anybody else I will delete this so you can copy this and store it somewhere safe I'm going to delete this after recording so now we have our image here right now we should be able to push that to GitHub the container registry on GitHub and then we can log into our VPS and grab it from that container registry now there's one problem with this image that we built now which is that I that I'm actually on Mac so my processor chip on Mac is is an arm armm 64 chip and my VPS is actually using Linux amd64 so that's actually the same for Linux as Windows now if you're on Mac like me when you build an image like this it may not work out of the box on a Linux or Windows operating system so I will actually rebuild this image that it will actually also work on EMD 64 so I will actually delete this image and then I will go back here it's a very simple change so I will run that one command again with one addition here which is I will say D- platform and then it's going to be specifically for Linux SL amd64 right so I wish I could make it a little bit wider here let me actually let me actually zoom out a little bit so you can see this in full right so this is the command I'm going to run and let's see what happens if I do that all right so after some time that is finished if I go back to Docker desktop I can see there is an image here again and this should work on a Linux system so this image is still on my local computer now I need to push it to that GitHub container registry and then my VPS can grab it from there so let me actually clear this here so we can say Docker log to a container registry so we need to specify which one so in GitHub it's actually called GHC doio you may have actually seen this URL it's quite common so we can log in here it will ask you for your username so my username on GitHub is just B grad and then the password is actually your access token paste here you won't see it here the terminal won't show that here but I did paste the excess token now if I press enter let's actually see I can see login succeeded now I can say Docker push and now I need to use the name that I gave I actually call it another example let's see if that works another Dash example and unfortunately that does not work because the name or the tag of this image needs to be in a particular format so I'm going to delete this image I have to rebuild it one more time so I can go up with my up Arrow key get that build command so here it is so here I need to give it a different name or tag so I'm going to call it container registry. i/ my name my username on GitHub and then I can give it some more casual name like another example right that's how we called it previously and typically you also want to add a tag a version tag here so colon latest right so then let's do this one more time I'm going to press enter and it should be pretty fast yeah so after 2 seconds or so it was already built now you can see we have another image here this is now what I want to push to that GitHub container registry so here I have Docker push now I do need to use that other name now the following so this is now the image I'm going to push to the registry let's see what happens all right so that looks good and by the way you may see some other names here because I was testing this and Docker is doing some caching behind the scenes but now it should have worked so if I go to my profile here and I go to packages we now see that I have four and indeed I have another example right here right so here we now have pushed this to so now from other places on the internet we can grab this right so my VPS has been assigned this IP address on the internet right now if I go there no nothing here so now let's actually make sure that our VPS can take this Ducker image and then run an instance of that so I'm going to SSH into my VPS I open up my terminal here on my Mac and here in the dashboard you will see your login details this is only available for a short amount of time so make sure you copy this after you purchase a VPS so I'm going to add SSH into my VPS it will prompt me for my password which I'm going to paste right here it won't show that actually here in the terminal but I did paste here so this should work all right so now I'm logged in to my VPS right so here if I type LS it will actually show me what's on my VPS now I actually use this for the previous tutorial as well so that's why I have some other things here so let's see if Docker is actually installed here we can see that there is nothing with Docker here actually we can run this command as well to see if that's true right Docker it's not active so let's actually to install Docker first we'll say APG install docker.io which is like a standard package now you may run into an issue and actually what we may want to do is just update everything on the VPS first so when we do this and now we check if Docker all right so I just cleared the terminal with clear now we need to check if Docker is actually successfully installed here so we can actually do system CTL is active Docker and here it says active for me so now it's successfully installed now if you see something like failed you may want to run system CTL start Docker okay but now at least for me it is installed successfully now what you can do with Docker is you can take an image you can run it so you can get a container an actual running instance so to quickly test how that would work is there is a there is an image called hello world that's not installed on the VPS but by default Docker will actually check the container Registries for an image called hello world so let's actually see what we get if we do this this is like a standard image to test this with so you can see unable to find it locally so of course we don't have that on a VPN so it will automatically pull that from a a registry so now you can see here it says hello from Docker this message shows you that your installation appears to be working correctly and so this is just a quick way to check if the docker is running successfully so now you can also see that here by the way so if I run Docker images you can see that we indeed pulled one from a GitHub container registry somewhere else but this this is now on my VPS now we of course want to have our own application it's called another example so let me clear this one more time so the command that we want to run actually is the following so we do need to specify the port as well so we say again 3,000 codon 3000 and then it needs to be that full name so it's going to be the GitHub container registry with your username and then the more casual name and then the version tag so this is the command I'm going to run here on my VPS let's see what happens if we do this it's not going to find it locally because it's not on a VPS yet all right now here we got an authentication issue because we're not logged in for that GitHub container registry right so it's a private package actually so we need to log in first so we say dock Docker login and then which registry it's GHC doio okay I'm going to write B grat as my username and then it's that access token all right so I just pasted it here let's see what we get all right so now we have login succeeded now I'm going to clear this one more time and then I'm going to push up Arrow key here to get that run command again so this is we're want to run now after logging in now we should have access so let's see what we get you can see it's pulling from that registry and after sometime you can see here in our VPS now we see this nextjs output and it says that the nextjs app is running on Local Host 3000 but that's on the VPS now we have mapped that to Port 3000 on the VPS as well so now if you go here this won't work right so this still won't show anything because it's going to be on Port 3000 if it works let's check that out now and now you can see I have a nextjs website running on a VPS this is the homepage but let's actually see if all of those nextjs features are still working now that we have dockerized it and deployed it to a VPS so let's check out rousing here to hello all right so now we have this and you can see everything is still working we have the server component is working we do get a result from a server action client component is working and we also got a response back from that route Handler so all of the latest nextjs features are still working so we can dockerize the latest nextjs app router we can distribute it to a container registry and then you can distribute it to whoever and wherever you want so in this case we distributed it to a VPS by high velocity and as you could see it actually wasn't even that difficult it's actually easier to do it with Docker than without if you checked out the other video now of course we can make it much more sophisticated right so in High Velocity here we can configure SSL right so then we don't have this secure warning of course we can configure DNS so you get a nice clean domain name so people don't have to type the IP address and the board and what you can also do actually is you can create a repo on GitHub for your project here and you can use GitHub action so that whenever you push a new update to the repo on GitHub it will create a new Docker image out of that and so you can get much fer than what we've done here but now at least I hope that you have a good high level overview of how the whole process works so I want to thank high velocity for sponsoring this video check out their VPS hosting for your next year website I've had a great time working with their VPS offering they have C panel they have other features and then I want to thank you for watching this video and I hope to see the next one bye

Channel: ByteGrad

Views: 47,197

Keywords:

Id: DfNhBZUrA-U

Length: 19min 42sec (1182 seconds)

Published: Mon Apr 01 2024