Self host Nextjs with Kamal

hey everyone it's Sam today we're going to talk about getting nextjs set up with hetner and Kamal and I can show you that you can use any dockerized application with Kamal to um deploy and you can use hetner AWS whatever you want um so let's take a look okay so let's just create a new nextjs app so we just use the built-in tool that they have I'm just going to call it Sam poost just oh no sure I'm just doing all the you know recommended ones I'm not really super familiar with nextjs so I can't say exactly what the right answers are for those so but I'm sure if you know nextjs you you would know the answer better than me all right so let's do Sam host nextjs and let's make sure it's running believe is mpm run Dev and let's see here compiling compiling okay it's working so all right so let's just go into here and just make sure we know that it's working correctly page I guess um just delete everything faster and let's just say is working all right so we know this is working correctly that's great um okay so what do we need to run um Kamal we need a Docker file okay so this doesn't come with a Docker file so we'll add one and then let's just open it up and we can go to the xjs docs this is just nextjs deploy building your application deploying um so they have a self-hosting option here and they have a Docker container and so they have a example Docker file which I've already looked at and needs a little bit of tweaking to work correctly so I'm going to show you how to do that um I'm going to copy this this is the one that they use and it gets us most of the way there um first of all I don't like using Alpine for any sort of production environment um I don't think that like having a small image is worth um the tradeoffs um having a small image is sort of like overrated thing I don't understand like why people care about it um unless you want to deploy in like 5 Seconds or whatever which is not really ever super necessary um so I have this I already did this let me just find it simple host next I'll show you the things that are different um so basically like the first thing we want to do is I don't need to worry about this stuff because this is all about Alpine crap um so we have the work directory set up to slapp that's fine we're only we're not using yarn so we can just use package package Json and package lock. Json and we'll just copy them to the you know directory we're in we're in the app so it'll just be go to app and then all we need to do is run mpmc to get everything installed and then yep we copy over the dependencies the node modules I do not want you to send anonymous data about my deployments to your servers so I get rid of that then we need to run the build to build the server and to build all the um nextjs components and we we have to modify one other thing actually um that I'll show you in a second so then we copy everything over again we want to make sure that I personally want to make sure that this isn't sending Auto data to nextjs to me is a weird thing to do um so we have all this set up and we got the next. next um directory I believe I really am not an expert on this but I believe they when nextjs builds everything they create like a standalone directory where static all the static stuff is served out of which um is this uh portion here um and then this all is doing is setting up the user and stuff so nothing crazy but what we do need to do is to get this to work is to handle the um the configuration here which is this um to use the Standalone uh portion of this we need to just change this to have this output which basically you can read up on this in their docs but allows you to use the Standalone directory to serve um assets out of which is good for Docker okay so this should be working this should be the docker file that you need um and then uh let's just test this so let's do Docker builds um this load is because I'm using um the build kit for Doctor uh I'll probably speed this up in the video because it takes a while to run mpm stuff but we're going to install this just to make sure the docker file runs and then we'll set up them all okay uh the docker finished building and it's called test the docker file so let just do um I could run run test um with Port 3000 and it should be running a local host 2000 which is great and so we should be able to um see it and it's running right there so the docker file runs correctly and serves everything correctly which is great so what's next um what's next is we want to set up the Kamal deploy so Kamal in it um which creates the config deploy file which we're familiar with now from the other videos and again I'm going to copy over something that I already made to make this a little bit faster and um see here um so I was testing this called self-host but let's call it what we're using now which is Sam host self Sam um and so what I'm going to do actually is reuse one of the servers I've already been using so that's um something that's great about Kamal and traffic specifically is that based on the host header as you can see here um oops as you can see here um based on the host header you can Route traffic on the same server um to different applications so you can use you can reuse the same servers over and over again um especially if you have small projects and you want to like deploy things quickly you can have one server that you own and then deploy new projects to that and then and if it gets bigger you can just migrate it to its own server um or some other host um if you want so I'm going to host this on just a subdomain on the simple host website we'll call this I had a nextjs let's just call yeah let's call this nextjs Sam where's his name and this is my host obviously and then um and then this is all the same as we saw before with the rail setup which is you get the uh https connection you're publishing 443 the only thing different here is I'm using my um AWS um account to host the registry because I like elastic container registry works well I don't really use Ducker hub and I already use AWS for a bunch of other stuff so this is an easy way to do that um a nice side note is this yo file uh you can use Erb um so that means that you can use Ruby inside of it so all this does is get the URL from the for my account ID and then gets like the login password um to the ECR which is great um and I guess I'll show you quickly how to set up this um image in ECR since uh we haven't shown that before so let's let's look at that now so this is the AWS account this is just ECR you can type in ECR here elastic container registry it's pretty easy to set up a new um private repo um this is just the tag image name that you want we're we're calling our Sam Post nextjs um and so we have that you have the name here which includes the um your account ID and so this is going to be the URL that you use in in your deploy and then just create the repository you can add the security settings or whatever if you want but it's already created and then you can use it now so there's really there's really not much you need to do here um so let's go back to this so now that everything's set up with the service um we should be able to deploy actually okay so everything got um deployed successfully actually we had to run u m push which I completely forgot about but you had to run M push and then Comm all deploy and so but everything is running correctly now so all we need to do to see this in production is create this um DNS record the subdomain DNS record uh 4578 88885 next just Sam so let's copy this and then we'll go to um Cloud [Music] Player and and then we're going to go to the domains so simple host and um look the DNS records and let's add a record we're going to call it um nextjs Sam right xjs and we're sending it to there save we want it proxy yes and then all we have to do is type this in let's see if it's working simp 44 I found okay so there was there was an error with it was getting a 404 when we were running now it's now it's fixed and uh I'll just show you what I did to fix it um the reason was um because the traffic routers were getting messed up a little bit so I had to um rename them um from just simple host to Sams simple host and then I also had to make sure to restart traffic um which you can just do with uh Cal traffic reboot so this will restart this will restart your traffic instance um so be careful if you have a lot of traffic uh it's possible that some connections could be dropped um during this reboot but only takes a few seconds and as you can see it's working so we have hello xjs at this website so as you can see um it's not so much different than getting the rails set up um Kamal Works equally as well with Docker and with any sort of dockerized application uh node rails um python anything that you need to run um and it's pretty flexible there are some rough edges around you know making sure you run the commands in the right order which I don't always get right um which to me I think means that adding a little bit of extra automation to it like adding a deploy script that always runs M push and the deploy command can be really helpful and I have that in some of my um projects as well um let me know what you think thanks for watching bye

Channel: Sam Johnson

Views: 519

Keywords:

Id: KnKGnZIqS5U

Length: 15min 1sec (901 seconds)

Published: Tue Feb 27 2024