Dockerize Your Next.js 14 App in 2024!

what is Up Guys in this video we're going to be going over how to create build and run a nextjs application using Docker so since you clicked on this video I'm going to assume you already know the many benefits of Docker um some of which being simplified dependency management um fixing the problem of oh it it runs fine on my machine if you were to want to send your project over for somebody else to run it can help simplify deployment and the list just goes on and on so let's get right into this I'm going to keep it short and sweet um I'm going to assume you already have Docker installed on your machine so if you have a Windows machine um it's going to be slightly more complicated it's not too hard at all to get Docker set up you're going to have to uh use Windows subsystem for Linux but Powershell gives you a super simple command for doing that so I'm not going to go over that in this video and if you're on Mac or Linux it's even easier to get Docker set up um so let's get right into the the nextjs part of this video so you're going to go ahead and use the create next app command so I'm using yarn I'm going to go ahead and go yarn create next- app um if you're using npm you could go npm create next app uh at latest and that'll do exactly the same thing I just happen to be using yarn so I'm going to call this Docker YouTube tutorial uh we're going to use typescript we're just going to go with the default settings here we're not actually going to be doing any coding in this video so we don't have to customize anything um this command is going to go ahead and set up doc or our nextjs project for us excuse me and from there we can continue on so our nextjs app is all set up just to show you how we would normally test this um we're going to go ahead and CD into the directory that it just created we can open up a new vs code window with that project and then we would typically run this on our local Machine by going yarn Dev or npm run Dev and this is going to go ahead and open up the project on our machine so here you see what forell gives us for a simple uh app created by create next app so you would go ahead and build your project out from here but of course we don't want to uh run this on our local machine we instead want to run it in a Docker container so what we're going to go ahead and do is create our Docker file and first thing we want to do is from um node latest so this is going to give us the latest version of nodejs um you could use something else you could use node Alpine which is a slightly smaller version of node but we're just going to go ahead and go with the latest version of node for now we're going to set our working directory to app so this is something pretty standard you'll see in most Docker files it's just saying within our image everything is going to be within the app directory so we're going to go ahead and do uh copy package.json over to this app directory and then we're going to run yarn which is going to install our dependencies and the reason we do this first is because the docker Damon actually caches your steps in order so if we were to go ahead and change our code later um and we didn't change any dependencies it wouldn't have to install all the dependencies again in order for us to rebuild this image so from there now that our dependencies are all installed we can go ahead and copy over all the code so that's going to copy the SRC folder our public folder everything that nextjs just created um that we want to run in our Docker container and from there we're going to run yarn build and what that's going to do is allow us to instead of running uh in a development environment it's going to allow our container to run a more production like environment with an actual built out nextjs app so then what we can say is our CMD so when we actually run this stacker container we're going to run yarn and we're going to run start so instead of running um and actually this should be double quote so let me correct myself there um instead of running in a development style environment what this is going to do is actually you know run in a more production like environment when we start our container so I'm going to go ahead and uh build this stalker file so from here we can go uh Docker build minus t so this- T flag is going to let us name our Docker image and we're going to name it Docker YouTube tutorial and then it's going to uh build using everything in our current directory so the docker file is in our current directory so that's what that dot is for at the end and uh once this build is complete I'm going to just show you guys simply that we can run our nextjs app in a container so it's it's really easier than it may seem um this is is a super basic Docker file setup um as you have more dependencies this this get may may get more complicated but for now just to test a basic nextjs 14 app configuration this is going to work just fine for you guys so we're going to go ahead and let this build and if you were to use that node Alpine or a smaller uh less bloated version of node if you will uh this build may go quicker but just for now we we went with the uh version of node supported by the actual node.js team and while we're waiting for this to build please go ahead and drop a like And subscribe on my channel as you can probably see this is my first video so I'm probably going to be coming out with more coding tutorials for you guys I'm just beginning my full-time career and and really putting my head down and getting into this coding stuff you know fulltime so um I'd really appreciate if you guys drop some love down in the comments section or or drop drop a like on the video all right so as you guys can see our image just completed building so now we can run this image in a container using the command Docker run and we're going to do- P 3000 colon 3000 so that's going to map 3000 the the port that when we ran yarn Dev you could see we opened up Local Host 3000 so it's going to map the 3000 port on our local machine to 3,000 in the container so that we can actually access the running app in the container and uh we're going to say the container name we just created so or image name I'm sorry tutorial and this is going to go ahead and start up our nextjs app so it just ran all these commands that we saw in our Docker file and if I open up local host and we move this over here you can see our app is running so it's that same basic nextjs app created by create next app and it's interactive just as you would expect and I'll just go ahead and show you guys here if I I were to um kill this process so we kill this running container let's just get the ID here um and kill it and if I were to refresh this page you'll see that Local Host is no longer responding so our Docker file or our container was indeed running this next JS app so that's pretty much it uh for you guys like I said please drop a like if this video helped to it all just running a basic nextjs app configuration using a Docker file and uh yeah make sure to hit that subscribe button and I'll see you guys in the next one

Channel: Algo Alchemist

Views: 4,823

Keywords:

Id: 0QSfULgEQ8Y

Length: 7min 41sec (461 seconds)

Published: Wed Jan 24 2024