Self-Host NextJS on Kubernetes (Tutorial)

in this video we're going to talk about hosting a nextjs app on k3s or kubernetes so what's this tutorial going to look like it's pretty simple we're going to create an app from scratch we're going to containerize it using Docker we're going to create a Helm chart which will help us deploy to kubernetes and finally we'll actually deploy to kubernetes and see it in action so let's jump into the [Music] steps okay so the first thing we'll do is generate a nextjs app using their generator I'm I'm going to call it next jsk 3s I'll say yes and I'll use types scram eslint Tailwind no Source directory I'm not a fan of the app router honestly no import Alias and we're good to go first you have to CD into the directory that it created then you can do npm rum Dev once that's up you can go to Local Host 3000 and there's our next JS application of course the point of this is to host a nextjs app not design something beautiful or even to edit the code of the nextjs app at all but I'm going to write a custom message just because I don't particularly love this home screen that they have here I'll give it a couple classes to make it more interesting okay cool now that we have that let's work on the next part we're going to need to create a Docker file in the same directory as our source code here and figure out how to containerize this so I've done this before for another personal project that I have for boom languages actually if you follow the channel I can just enter this real quick and explain so I'm using Alpine because my image was gigantic before Alpine makes it smaller not that small but smaller I also don't want to be spyed on so I'm going to disable Telemetry I'll copy everything into the Container we'll install but we'll omit Dev packages to save even more space because we won't be installing things that we don't need and then we'll run a build We'll add a group for nodejs and a user nextjs we'll switch to the nextjs user which is good security practice not to run his root and then we'll do npm Run start as our Command so that's all we need for our Docker file now what we can do is is try building it so we'll do Docker build- TMP do make sure that it works that did in fact work so now let's figure out where can we push this we can log into gitlab.com I'll log into my lovely Cod and Johnny account from a previous video about how to use gitlab and here we are a lovely account haven't seen it since first time programmer 56 and S good stuff let's create a new project for this and we're going to call it next jsk k3s we'll make it private I would assume most people watching this video want it private right you have closed source code you're going to develop your app and it's going to be awesome I should not have done the read me either way I think we already have a get repost started here okay so we can add and commit this stuff add Docker file and let's add a remote here so this is a little sticky I'm going to allow Force pushing the main branch I'm also going to check out the main branch here and delete the master Branch so we'll use main because it's already in get lab and I don't feel like changing it um so what we can do is get remote ad origin put in the address to our repo and attempt to force push so get push Force got to type the uh setup stream part and it seems to have worked there it is our Docker files present all that stuff so we have our source code on gitlab and what we're going to do is we're just going to hand push our image into the Container registry for this project so we'll follow the instructions Docker login registry gab.com that worked so now we can actually take the image that we built before which has the tag TMP and retag it or we can just build it with the proper tag so it gives us the command to do that let's just use what they have here it's rebuilding okay and now we can use the push command that they give us as well push up that image push finished if I refresh the page here now we see that our image is here and you can click that to pull it if you need to so somebody's going to do a Docker pull and grab gra the image right but who's somebody not us the point is we need our k3s cluster to do this and they might not explicitly use a Docker pull under the hood they're probably using something like container D or whatever happens but the point is how do we get k3s to do this part well let's think about that let's start by generating a Helm chart for this whole project here so it'll be next jsk k3s Helm inside of here we have charts and templates and things of that nature so what we'll do is in your home. directory check if you have a config file there if you do copy it uh well first of all create the home.be directory if it's not there now if you have an existing Cube config file you're definitely going to want to back it up so just copy that to config dob backup or any other file name you'd like to give it now we're going to copy and replace this with the IP address of your nuke you're going to copy thecube config file from the nuke into your home. cubec config directory and what we'll do is edit that config file home. cubec config and you'll notice that the server is defined as 1271 or Local Host let's change that real quick to Pub nuke or whatever the IP for your cluster is save that file and just to be sure we will export Cube config to be home. cubec config that's the default but in case it gets set to anything else we'll make sure and you can put this in your bash RC too if you want to be extra sure now if we do Cube control get mode we see our Pub nuke is ready to go if we do Cube control get pod we see exactly what we would see when we're logged in and I'm on my laptop I'm not logged into the cluster so we're all set to go so where were we we were trying to create a pull secret so in order to solve this problem the kubernetes documentation has our back let's try generating one on our account so if you go to personal access tokens and settings you can add a new token and I'm just going to call it k3s expiration date I'm going to make it next year H I don't need an expiration date right now and I don't know what all these kubernetes permissions are we really do need read registry we don't really need to write it we just need to read the registry and to be safe I'm going to allow the kubernetes permission whatever this is hit create copy the token and now we can create a secret using that token before you do anything make sure that it works so do Docker login registry. gab.com D username your username to gitlab password and paste the personal access token that you just generated it worked so we can go ahead and create the secret for this it's going to be a type Docker registry call it reged Docker server is registry. gab.com and then use the same credentials you used above in your little test I left out the docker email part hopefully it still works we have a reg GED secret let's try redeploying hel oninstall app hel install app Dot and finally we are in the container creating stage so it is actually pulling this image That's so exciting if you describe the Pod it says pulling image Wow Let's wait for it to pull this is great okay finally done pulling now what do we do next let's figure out how to get the port exposed for our web service so that we can open it in our browser the right way to do it would of course be to configure Ingress controllers but this is a quick little tutorial and it's already pretty long so let's go ahead and Define a node Port so we can see in the deployment by yl the container has an HTTP Port already that links back to the service yaml has Target Port of HTTP and the actual Port value comes from values. let's see if we can check that the service is actually running on Port 80 okay seems to actually be on 80 because I tried to download it okay yeah that worked and index. HTML is it contains our hello world so we know that we're we're trying to expose Port 80 and yet port ad is only a cluster IP which we cannot access from our browser again this isn't the right way to do it but it's a way to do it we can go ahead and put a node Port of 380 in here then go into service Dio give it a node port. values. service. nodeport we also have to change the type to node port or else we'll get an error when we specify a node port and that should be all we need to do let's uninstall and reinstall and see if that worked hel install app dot okay so we used 30080 our previous tutorial so it's getting mad because it's already allocated let's try again with 3081 that one worked if we get the service 3081 is exposed so what if we visit Pub nuke 3081 would you look at that our web app is hosted and available from our cluster so we've gone from nothing to nextjs app hosted on our cluster in k3s on our nuke that was our goal I'll leave the rest to you thank you for watching and I'll see you for the next video If you enjoyed this video consider subscribing to the channel and you can also go to page.i signup give me your email and I'll shoot you a quick message whenever there's something new going on thanks a bunch

Channel: PageKey

Views: 890

Keywords: pagekey, pagekey solutions, solutions, page, key, page key, education, learning, programming, software development, software engineering

Id: ZysSRWPgAyY

Length: 9min 11sec (551 seconds)

Published: Sun Oct 08 2023