Next.js 14+ Docker Tutorial - Dev and Prod Environments using Dockerfile and Docker Compose

hi guys welcome back to another video on Docker in this video I will be creating a new next js14 project and I will configure it with the docker for development and production environment so this video is specifically made using the nextjs verion 14 but if you are using the old versions like the 13 or even the new version comes in in the future you can still use the same process to configure your nextjs project with Docker and even if you are using the pages directory with older versions of nextjs it is pretty much follows same steps that I'm going to show you in this video so first of all I've opened up an empty folder in my vs code I'm going to be creating a new nextjs project so current version of node in my system let me show you is I think 20 so using this node version I'm going to be creating npx space create next app at latest space dot because I want to create all the files within the same folder which I have opened already so this is going to ask me few questions for setting up Tailwind so why and I'm going to go with the Tailwind es lint uh typescript Source directory yes app router default import no so it will take some time downloading few dependencies and stuff so meanwhile it's getting downloaded I want to show you if I go to my channel you can see that I've already created few videos on Docker and uh let me show you the playlist so inside this playlist if I go to view full playlist you can see that I've already created three videos I will be creating few more videos on Docker if you are beginner that you don't know what is Docker what is the benefit of Docker how Docker works then my first video is for you guys Docker tutorial for beginners what is Docker all the commands and I've shown you a very small project by configuring a node project with the docker so check out this video but if you have a little bit understanding and just want to configure it with nextjs you are at the right place I will be showing you each and every step along with that I've already shown you that how we can configure Docker with react for Dev and production environment and also how we can configure Docker with full stack mnap that uses a react node Express and mongod DB in which I have used the uh uh image from the docker Hub all right and also if you want to learn nextjs let me go back I have 42 almost 42 videos on nextjs with app directory you can see next year's 13 tutorial app directory and next year's 14 tutorials app directory you can learn pretty much every topic on nextjs so you can see I'm putting a lot of effort creating these videos for you guys it's just a request that subscribe my channel and like this video it will really encourage me to create more videos for you guys so if I go to my VSS code you can see that the next us14 project is is created first of all what I'm going to do is I'm going to go with the default uh component and the code written inside it but I'm going to be adding this is the Home Route I hope you already know how the next GS works so I'm going to be calling a public API fetching the data and load the data in the same component the reason I'm doing it because I want to show you that how we can pass the enironment variables from Docker configuration Docker files and Docker compose that is the only reason I'm going to paste some of the code which I have already written so let me copy that in so I'm going to be replacing this Return part so above that I'm going to be adding a new function so let me add that above the home function so here you can see that U it is actually calling this public API uh which I will be passing from the docker config uh SL posts so this API is for Json placeholder and it's going to return all the posts and uh then I'm going to fetch this data using this get data function which I'm calling the reason I've just copied it because it's not related to Docker uh it's just a simple API call and I'm just mapping through all the data and just printing this out and uh also I will be showing you by running the app uh by running the container of the docker which I will be building um and see the output of this data uh on the UI on the browser on up on on a particular Port okay so currently it will not work because this API URL does not exist currently I can create a new EnV file and inside that EnV file I can pass this data so first of all I will be creating EnV which is you can say uh for the production and then uh I can say env. looc this is for the development environment currently I will be giving it the same values like this one for both the environment but in real application that you will be building your keys will be same but the values will be different all right so I've created two EnV files and both of these I will be configuring in my different uh Docker files one is for development and other is for production all right so let me close this page. TSX first of all before going towards Docker let me uh open up uh this terminal and run the project npm run Dev just to see that everything is working fine there is no issue in page. TSX file after that I'll start configuring Docker so I'm going to open up the browser let's open up let's refresh and it should start showing the data uh on the UI okay so let me me close this tab as well let me see if it's working yes so it called an API and uh then it actually uh load this whole data over here all right so it's working fine let's open up the VS code and let's stop the terminal all right so let's get started working configuring this project with the docker so first of all uh Docker I hope that you have already know the basic understanding of Docker but still I will try to explain each and every step uh which I'm doing over here the docker have different commands using Docker CLI we can also use the docker desktop which shows all the images all the containers exists inside the docker uh which I've already explained you in my beginner tutorial so I'm going to be creating a new file one is for Dev so first of all let's build it for Dev um Docker file you cannot change its name uh but you can write Dev or production do staging after that so I have written Docker Dev all right so this is automatically going to be picked up or if the name is changed uh then we have to provide the name while running the command for building an image of this project using Docker so I'm going to be start giving it the node verion because uh you know that uh the basic tool or basic uh Plug-In or a software you can say that is required to run the next G s project is node and npm because these are the scripts that are used to run the project to build the project and we run these scripts using an npm command all right so npm needs node so first of all I'm going to be giving it the variant of node so I will start off by writing from node and after that I will be giving it the same Varian which I'm using in my local system the reason I'm giving it same Varian because I I think that if the project is working fine in my local system then um this is the same variant that everyone should use when they are going to use the image or the docker image of this project on their own system or on the hosting server okay once I give the node Varan I will be giving it the work directory so usually I give the app directory this directory is for the container first of all I will be building an image of this project using Docker out of this image I can run multiple containers okay and uh this container the running form of image is called container and uh the container is going to contain all the required files to run this project so by default I've given it the app directory structure so after this I'm going to copy package.json file okay this is going to be copied Within the app directory of the container first first uh this name is refering to the package.json file and package log. Json file do/ means that we are already in the app directory of the container so this is going to be copied within the app directory of the container after this I'm going to copy all the files and folders of my project inside all the files and folders of this app directory okay um in fact I don't need to write slash here I can simply write dot as well okay um so you might have a question that we can simply write this why do we separately need to copy package.json file the reason is that the docker works in layers okay uh that is called the layer caching so Docker builds images in layers so by separating copying the package.json file and running npm install from copying your source code you can take advantage of Docker cachier so the docker cache means that if your package.json file does not change there are no Dev dependencies or the dependencies got changed then it's going to take out the cashed verion of it and next time when you will build an image it will not take that much time to build an image it will just take the cached version of it so it just improves the performance all right so after this once I copy it I can run npm install so I have installed node I have given it the container I've copied all the files and folders including package.json I'll simply run the npm Run install so this is all happening within the container of the docker for this project okay and then I will be giving it the Expose and then the port so by default uh this runs on the 3,000 and U I'm giving it the port 3,000 finally I can give it the command so how do I run the dev environment so Dev environment is run through npm run Dev this is what I will be giving to it so let's try to run over here so npm run and then I will be giving it Dev all right so now I have configured my Docker file for the dev environment all right so this is this is what uh is already happening and uh now before I start building an image uh I will try to complete the docker compose file as well and I will be showing you uh separately that how we can build an image and run the container if we don't have a Docker compose um and also with the docker compose file as well so I'm going to copy this and I'm going to paste it again let me copy this this one is copied and paste so this have one is paste since we cannot change its name what I'm going to do is I can write Docker file and then I can simply write prod you can write anything to it so this is the production file and I have given it um the name dopr so node Varan is going to be same work directory is going to be same this is going to be same uh copy npm run install and this is where the difference comes in so the production level of node actually works from here so when we need to deploy over nextjs project what we do is we build the project first of all and then we rather than running the dev command we run this start command so this is the difference so this is what I'm going to be adding in Docker file. prod okay so below npm install I'm going to be running another command npm run build okay so this is going to run that build command and I can give give a same port for production as well but let's give the 4,000 port and uh rather than running the npm Run Dev I will be giving it npm run start okay because npm Run start is used to run the build Varian of nextjs okay so this is what I have set up for the production environment I hope everything is pretty much fine so let me build an images for both of these uh environment Docker Dev and Docker file prod and then I'll show you how we can run the containers of it but in real word production application we usually create the docker compost file Docker compost file is used to run multicontainer application that includes the images from Docker Hub let's say the mongodb image or we can use one command only to run multiple Docker files as well that is called services in Docker compos file so I'll show you after I show you how we can use these files only to build an image and run the containers out of it so in my terminal what I'm going to do is let me clear this out everything and uh now let's build the first image for the docker file dodev so the command uh make sure you have Docker installed in your system and uh let me show you the varion currently I have uh I hope this is the command uh so this is the Varan let me write hyphen hyphen Varian okay so this is the verion of Docker exist in my system and now I'm going to be writing Docker buil and hyphen f okay hyphen f is used to give the name of Docker file if we only were to write Docker file that's it and don't write dot D.R then we don't need to provide the hyphen f uh flag because it automatically picks up the docker file now I need to give it Docker file dodev this is for the dev environment then I need to give it the hyphen T which stands for tag tag means what should be the name of image which I'm trying to build so I can write next js14 Dev this is the name of image that I will be giving to it and then colon I can give any variant to it I can create multiple images of my project using Docker so let's give 1.0 which is the variant okay and after this um I can give the path of my Docker file the the path of uh the docker file dodev so it exists in the same folder which I'm at currently in my terminal so this is the command which I have written so let me show you the complete line so Docker build hyph F so now first of all I'm going to open up the docker desktop and this is all the images exist currently in my Docker there are no images so once it will complete build process of my project it it's start going to show the images and the containers in this place so these are the containers and images and we can also see all the containers running containers and images in the CLI as well which I'm just going to show you so let's hit enter so keep watching the process it's currently uh doing so it's actually uh I think it's installing the node verion in the docker container and the benefit of Docker again I showed you in The Beginner's video of Docker that uh for running the docker you don't need to have uh um all the tools like node npm or git installed in your system whatever operating system whether it's the local operating system local system or the hosting server that supports Docker um it will automatically install all the required dependencies packages um to run your project okay so at initially you can see that uh it is um running the npm install this is where it is currently at npm run install and after this it will uh create an image okay and uh once it completes it will start showing up in the docker uh images list which I'm just going to show you so if I go over here currently it's not showing that up so yeah so the docker image is created successfully without any error and you can see that with the same name and uh this is how it's working and if I show you the containers the containers are not running I can directly click on this run button from Docker desktop to run the container but I want to show you how we can run the container out of the image using the command line okay so now uh let me clear this out first of all let's see all the images exist so these are all the images exist I'm going to show you how to we can run the container out of it so Docker run hyphen d uh which is required to leave my terminal interactable but keep the container running so after this I can give it the port so first of all I can give it the local Port which I want to run on uh 3,000 I'm going to be using the same port after this I'm going to be using using the port of the image which I gave to it while building an image so it was again 3,000 in Docker file dodev okay so after this what I need to do is I need to give the name of the image which I want to build so name of image is nextjs 14 uh Dev okay and 1.0 is the version of it so I'll hit enter so it's going to start running the container so if I go over here I can see the container running over here as well so Docker PS this is going to show the running containers all the running containers exist so it's currently running on Local Host column 3000 and you can see that I'm not running npm run Dev uh separately in my terminal to run the project and if I go over here go to The Container you can see that this particular container is running over here as well don't get confused with the name we can uh it automatically gives the random name but while running the container we can give our own own name as well by giving it like hyph Hy name and after that uh the name of the container while running it I showed you in the uh in the initial video of Docker beginers uh tutorial and now the container is running I'm going to go and I'm going to refresh it currently this is the container running on my system and this is not the actual direct project and if I refresh you can see that there is no error it's still running on looso 3000 it's actually the container running on my system and you can see that the same data has been fetched and uh it's it's all it's Al also going uh working perfectly fine so now let me quickly Show You by building an image for the production file Docker file. PR but before that uh if I show you Docker file dopr I gave it a port uh 4,000 but by default it will not pick 4,000 Port because uh it might be the build-in configuration of the technology which is nexs 14 that might be using the default Port even if we give it the 4,000 so for uh making it work uh before building an image of it uh we need to define the port which we want it to work so I can give EnV Port 4,000 all right so let's save this file now I'm going to build an image of it let me write up arrow and Docker build file Docker file. prod I already tested it with this name so again uh let me uh give it some different name so prod like this uh so this is going to work so I will hit enter and uh it's going to take out the cached verion of it it's going to build the image quickly because I've already tested it uh for this part of the video so you can see that it's using the cached version of it and um it's running the npm install uh and uh let's see uh if I go to the docker desktop this is the the image these are the containers so the first container is already running on the browser let's verify it again in fact let's open up Local Host column 3000 it should be working yes it's working let's go back and uh it's still running npm install uh so let's wait for this all right so build is complete let's verify it by going to the images part of the docker desktop yes this has been created and uh it's 4 seconds ago and this is the name of this image let's run this particular image and first of all I'm going to see all the images to see the names so here I'm going to write Docker run and if I want to give it separate name for the first as I showed you that it gave a random name for the container uh but if I want to give my own name I can write hyphen hyen name and I can write ABCD whatever you want to give it to uh so AAA uh but mean give meaningful name okay so hyphen hyphen a and hyphen d hyph p and I'm going to give it 4,000 4,000 uh let's give it the name so next is4 prod uh is the name of the image and I need to give the tag after this let's see if it works so I'll hit enter so this container is running uh I can verify it uh by writing over here so Docker PS and these are all the containers running uh this is running 8 seconds ago uh so let's go over here let's verify if the dev environment is already running local host 3,000 yes let's run Port 4,000 now so I'll hit enter you can see that this particular Port production and the environment both are running on different ports uh using the containers for the specific images which we have defined to it you can see that it has given the exact name which we provided by Run running the container all right so let's now talk about Docker compos the benefit of Docker compos as I've already explained that is to run multicontainer app with one command we don't need to write long commands for building uh the images for running the containers and for loading um different Docker Hub images uh this is going to be pretty much simple and uh this is what uh everybody recommend to use Docker compose uh while using Docker so first of all I'm going to be stopping uh the containers which are already running in fact uh I'm going to go to the docker desktop let me delete both of these containers I'm going to be deleting both of these images as well because the same images I'm going to be creating using the docker compose now okay so let's go over here and uh I'm going to be uh adding um first of all let me quickly show you um I'm going to be adding a Docker ignore file Docker ignore is just like a git ignore so uh there is something called volumes volumes is used to persist data when we stop the container or rerun it uh it doesn't take a lot of time in fact it takes the data out of that uh volume which we have used and uh it's going to uh use the pre-built data for the source folder or for the assets or whatever the main required files so Docker ignore I don't want uh the uh docker to be uh um using the node modules folder again and again for copying okay so this is a reason I'm putting it over here so this is not going to be used by Docker okay so let's close this out and now I'm going to be creating a new file and this is going to be Docker composed. yml uh y AML or yml both will work so I'm going to be working with yml so first of all what I'm going to do is we can create multiple Docker compos files as well and we need to give hyphen f and the name of the docker compos but usually it's not required uh we can work uh with the same single Docker compos file for running both of these uh uh images for Dev production or even staging or even for uh Docker Hub images that we want to import or pull that in so first of all I need to give the verion of Docker compos so this is going to be 3.8 which is I think the latest verion for it ination is very important space between what we write so after Varan uh we can provide the services all right and it automatically adds the space before this it is one tab space I think on your keyboard and after this we need to give the name of the service uh So currently we don't have to pull any image from U the docker Hub in my mon stack Docker configuration I have shown you how we can use the uh image from the docker Hub and run the back end then front end and all these three images all together using Docker compose so here I can give it to Docker like client Dev okay you can name anything to it client Dev I've given the name to it for the docker file dodev file okay so after this I need to give the build command and build is going to take the path of my Docker file okay if I don't have multiple files for Docker file I can simply write uh dot after the build okay it will automatically going to pick the docker file but since we have the docker file dodev we need to give the path using the context and then uh we need to give the name of the file this is the path and then Docker file uh do Dev this is going to be the capital D at start so this is going to pick that up after the build we need to give expose the ports so again just like uh we need to write High fun before this and then I'm going to write 3,000 then again 3,000 uh this is going to be the ports uh make sure you don't add any space all right so after the ports I'm going to be using volumes volumes are used to persist data uh so it improves the performance actually so before column there is a dot dot means uh all the files that are included uh over here mainly The Source folder which we're targeting should be uh persisted with the container app directory because this app directory for the container is what we gave to this over here work directory okay and uh then we don't want to persist node modules so I can simply write node modules uh over here okay um then what I'm going to do is uh I'm going to pass the environment variables as well so we don't we can pass the environment uh variables directly by writing the environment and then the key name and then after this we can give uh the value but since we are using uh the environment file so this is going to be like EnV uncore and then the file okay then I'm going to give the name of file env. loal this particular file is for the dev environment and this particular file is for the production environment so env. loal is something which we have given to it so this is what we are done uh with the client Dev uh the dev environment and after this I'm going to be configuring it for the production environment all right so this is going to take the context let's add uh let's remove it this going to take the context let's add the space and Docker file. prod I'm using the uh tab 9 extension of vs code so it's automatically suggesting me few things so I think it's pretty much suggested right thing and um after this we need to give the ports so since we need to run the port on uh this one so this is going to be 4,000 and this is going to be the 4,000 and then uh we don't need to give the volume for production environment it's not recommended then EnV file we need to give the path so let's add the tab space of what's Happening Here so tab space it's automatically picking this file and uh this one EnV all right so space before each command is very very important okay so I think we are done everything is pretty much right I hope it will work fine let's go to the terminal let's clear everything out and now I'm going to be showing you how we can run both the environments as I've deleted all the images using one command so in the terminal I'm going to be writing Docker compose up that's it uh and it's going to run all the big Comm for building running the containers for both the dev and uh the production environment since we have given the services reference over here so I'm going to hit enter um and it's going to start running the docker compos file it's automatically going to pick this file up so U you can see that it's currently using the cached varion even though we deleted the containers that that we already created uh still it's it's going to create that one so so um the cashit were of it so it's going to take some time because you know that we built images before so all these process is being done using these configurations so how quick is that when we want to deploy our app on the hosting server we only need to run Docker compose up if there are multiple Services added in this Docker compose file and if we explicitly or manually want to only run particular services or only want to run only this service but not this one then uh we can actually specify the name of the file uh name of the service as well which I'm just going to show you after it starts running okay so also we can have the depends on key over here as well means that if you have a back end uh let's allow it if you have a backend service then you have a front end service which I have shown you in my M stag docker configuration video uh then uh we can write the depends on means that uh this front end app is going to wait for the backend app to First build itself completely then the front end service is is starts going to run and build this out so in the terminal I think both of the images are created let's verify over here and here you can see that both the images were created it has given the names picking up the name of my project and then the name name of the services appended it it has created the images I'm going to go to the containers and uh it has created a multicontainer app that's why it has created this drop down next 14 and these uh couple of containers automatically running with single command and now let's verify it on the browser if these are running if I just scroll this up you can see that the production is running on 4,000 and this Dev is running on 3,000 let's go let's refresh the dev environment first of all uh it should keep on running and uh here it should load the data all right so you can see that uh it's loading the data for the dev let's go over here let's refresh Local Host colon 4,000 and it's also running as well so our Docker compost configuration is done one more thing that I want to show you okay so uh let's stop this out if I try to stop this uh terminal it's going to stop the containers but that's fine we have already tested it so it's currently stopping both of these containers we can start these again okay so first of all uh I'm going to show you how we can run the commands and one important thing that I want to guys know that how we can make the images of both of these uh Docker files sharable to someone we can send it through email or uh we can send it to to someone by sending a message attaching the files um the professional way is to push the images on some hosting server like dockerhub or AWS then from there they can pull that in whoever wants to use the image but there is another way we can uh convert it into something called uh D file that you can say a zi file and other one can just pull that um unzip that TR file uh to use this image to run the container so first of all I'm going to hit up so if I want to run only one service let's say client prod um I need to give the name of that service and that's it it's only going to build that particular Docker service whatever the configuration added inside it and it's going to build and run the container automatically all right so now final thing I want to show you how we can convert our images into sharable format and for that we have already created that let's let's uh make this up and uh let's see how many images are there these are the two images so I will write Docker save hyphen o and then I can give the any name to the doar file T so I can give next js14 U and then hyphen client. this is the name I've given to it which will be created automatically in the same directory of the project uh I can give a separate uh directory structure as well after this I need to give the image name which is already generated uh because this is what I want to share with someone and so let's convert the production one so next 14 uh client and then prodad I don't need to give uh the tag name so I'll hit enter uh so it's going to take some time maybe 1 minute um and it's going to generate U the next js14 hyphen client. file in the same structure and after this once this file is going to be shared with someone I'm going to show you how they can load that particular TR file and convert that in the in the form of image in their Docker registry okay and then from the docker registry image they can simply run the container out of it just like I showed you Docker run and the p and then the name of it so now you can see that uh it should be generating TR file here it is generated the next 14 client t all right so now what I'm going to do is I'm going to be removing all the images first of all in fact let's remove the containers first of all otherwise it can give error that it has a container against and now I can give uh remove the images and now let's use and load this up the to uh T file so Docker load hyphen I and the name of that file so nextjs uh for Hy client. okay so let's hit enter so it's going to load that file and it's going to convert that in the form of image and we can verify it uh on the docker desktop or in the terminal as well so it's going to take some time um can take few seconds or even a minute depends upon the size of this file so let's go over here this is not showing the images yet um so while it's just showing I request you guys if you have learned something new do subscribe my channel I'm putting a lot of effort creating these videos for you guys so after this I'm going to be creating videos on cicd pipelines continuous integration continuous development continuous deployment uh preer husky uh so nobody should be able to commit or push the code on GitHub repository unless they follow all the prettier es Lent rules in their project if more than one team members are working on a project so these concept concepts are very very important in real world professional environment in Industries or companies or even if you are all alone building the project for yourself so this image is loaded let's go yes the image is loaded um with the same name that uh was that I gave to the previous image uh and now we can go and run the container out of it let's click on the run over here and this is the prod so I can give it to 4,000 let's run it um it's going to give it a random name so it's running on Local Host colum 4,000 let's go over here let's refresh uh and yes it's running on 4,000 it will not be running on 3,000 because we have stopped the container and there is no even container existing and this is the shared shared form of this image all right guys thank you so much for watching again subscribe my channel like this video and stay up to date hit the Bell icon so you get the notification for upcoming videos thank you so much for watching again I will see you in the next video till then goodbye

Channel: Programming with Umair

Views: 3,371

Keywords: docker in next.js 14, docker tutorial, docker configuration for dev env, docker for production in next.js, learn docker in next.js 14 project, how to build docker images, how to run docker containers, docker cli commands, docker-compose.yml for next.js 14, how to run each service of docker compose, share docker images, load docker tar files, next.js 14 tutorials, boiler plate for next.js 14, learn docker commands

Id: d1ntel1pk7s

Length: 39min 3sec (2343 seconds)

Published: Thu Dec 14 2023