Use nextjs this way with Docker

we are going to use the docker and run the next just application in our local machine that means everything will be inside the docker and we are not going to do anything in our local machine so without further Ado let's get started welcome to bit FS I'm your host Sark and this is all about nextjs with Docker and the first thing first is create the nextg application so we can go on the installation create this run this command simply and it will ask some of the questions and right now I want to make this and I will give this name as nextjs Docker and then I will simply say yes for every other thing and very soon we will have our application and now our application is created so we can simply go inside the next Docker and open open this with vs code cool so we have this and now what we can do we need to run this application via Docker that means we need the docker container and to check how many Docker containers is there you can use this command I don't have any Docker container and do we have any images no there is nothing so we are going to start fresh so first of all we need to create a new Ubuntu container so I will say Docker run entu and this time I want to run it with bash that means when this container is coming I want to interact with this when it started I want to interact with it but for that I need to provide the flag of hyphen I and T interactive terminal okay so I'm doing this and now Docker say that hey you don't have any hentu image in your system so I'm going to download it from the docker Hub and once it is done you can see it is the docker container we're running human 2 that's really good now since we have this Docker container the next thing we need to see is do we have the node because we will need the node here so if I check node H node is not there so how do we get the node first of all we need to say app update now apt update will update for all the packages on the Ubuntu it's a Ubuntu thing not a Docker thing but then we need to say appt install nodejs with Y flag if I do this yes it will install the nodejs but not the latest one for installing the latest nodejs we need to follow this distribution and here we can see we should start with this so update is is done now I need to install these things which is required so apt install all these things and once this is done then we need to run this to make some directory and that's also completed and finally we need to run this command now when you run this it says sud sudo not found why because Docker containers always run as the pseudo so we just need to remove the Pudo wherever we are using it like this and run it that's good next is this command we need to run and this time one more Pudo has to be removed and the node version I'm going to use is 21 once these steps are done what you need to do run these two apt update and install the node GS so apt update and apt install nodejs with the V flag so that it will not ask any question okay once this is done this will prove that we will have the node CHS in our container so if I check for node version yes now you can see we have the 21 version that's cool we are good with the node but still where we are going to run this because this application is in my local not in the docker container so we need to find a way so that we can connect the local files with the container for that we need to kill this container and to kill this container we can simply say exit now what if I say Docker PS and see this container is exited but what if I restart this container how I can go once again in this container so I need to say Docker execute or exit de then interactive terminal and then I can provide the uh ID so I can use initial letters and then I say hey I want to use this with a bash actually it is 96 and now it says this container is not running so to run the container we can say Docker start and the ID that's good and now if I try to do this yes you can see I am inside it and node version is there but still we don't have access to the local files how we can do that so basically we need to connect the volume volume will be saying like this but is this going to work with execute so let's see so I want to connect whatever I am whatever the directory I am like that means this path and colon and I've provided the directory inside of the container so left one is my local right one is the container that's that's good but this is not going to work because this volume run works on the docker run command simply means this time we need to provide the volumes also so I'm going to remove this 96 and I need to use the F flag to force it and now if I see no container so this time I say run interactive terminal that's good but also volume is like this okay and I can say dot Flash and then source and this will be entu and Bash cool so this is again working but now you can see we have a source directory like this and this is inside the container and in the container we can see that we have all our application yep it's inside the container now we can can do this so simply see the version of node once again node is not there because we killed the container and we created new container in the new container again we need to run all these things so this is really hard and it's not fun so let's do something to have all these steps we want to perform inside on our container again and again so instead of doing all these things like here we can create a directory called Docker or you can put that Docker file inside the root now we have the docker file and simply we can say hey I want to create a new container using this Docker file so I say hey from Urn to latest first this is the image name and then you need to run app update dat once apt update is done then you need to say apt of installing these things so like this and I will fast forward this for you okay so I have defined all the steps we need to create a image with this Docker file so how how do we create the image with this Docker file so there is a command called build and now I will say hey Docker build and Dot means find a Docker file from this root directory so dot means find inside the root cool so it is now doing this now it's saying hey I have some error the error basically says that this pseudo not found once again I forgot to remove the pseudo from here okay now let's run it and you can see the image is created that means if I see the images now I have one entu image and another image which is just created which is this one so let's remove all the images remove all the images by saying Docker images Q which is going to give me the ID only and now if I check image uh still one image is there because there is one container so I need to remove the container also so 84 and now remove the images and check the images no image and now I can simply build with the command okay so this is going to build the image and now you can see it is running the APT update and all eight step we have defined here will be executed one by one so finally our image is ready let's check do we have the image yes but this image doesn't have any name so once again I will remove the image and create once again the image but this time I will say I'm going to give a tag for nextjs simple so it's going to perform everything and it is super fast because all these are executed before so it just getting from the caching now if I see the images yes I have the image now I simply say Docker run nextjs and make it interactive and run with the bash and this means if I check for node yes I have the 21 no this simply says that now I can connect the volume also so volume is this this means if I can do the CD Source I can say npm run Dev and local 3,000 is ready wow that's really amazing so now let's see H still it's not working because we need to see that this is the port inside of the container we need to connect the port also so when we are connecting or running the container we need to do one more connection for port and this will be 3,000 colon 3000 once again the right one is the inside of the container thing left one is the system okay once again run it CD into the source npm run Dev and now if you see yes it's doing something and very soon we should have the next year's homepage congratulation we have done that but it's not the end because we need to create all these steps automated so what that mean I can kill this and see what are the things we are doing we are doing lot of writing of the command then we are going inside the source and finally we are running npm run Dev can we do all these things automated yes we can do how in that case we need to create a file called compose do yml this compos file is going to use this image and plus all the other steps so first of all we need to say hey the version of this compose is three which is the latest one and then Services how many services we need first of all the service is web you can name it anything and in this service I will say hey build from dot that means build from the current directory building means create a new image from the docker file by default it will choose the docker file once you have it then you need to connect the ports and ports will be 3,000 colon 3000 after that you need to connect the volumes and it is going to be similar like this SRC and that's it we have done all these things but these things are just volume Port not the other thing what that means the npm Run Dev that thing we have to Define inside the docker file so in the docker file we can say CMD and I say npm run Dev this command this CMD command will only going to be executed when you use this image to create a container so once the container is created using this image then it will run the command which we have defined here but we have left with one more thing remember we need to CD into the SRC always no I don't want to do that so I need to Define work dur work dur is basically working directory it has to be work dur like this and it's going to be the SRC Source cool that's it yeah this is the only thing and now what we need to do we need to Simply say first of all let's see the images yes we have the image so let's remove this image nextjs and since the container is running I believe yeah a lot of containers are running so I need to remove all the containers and like this now I can remove the image and every image is removed this means now I can use the docker compose command so Docker compose command we'll use this Docker compose compose do yaml file and create the container setting up the port volume and once the container is running it will execute this command while going inside the work directory cool so I say compose up okay so this is doing a lot of things for us and you can see nextjs web nextus web Local Host 3000 everything is good run it and with just one command which means just by saying Docker compose up you can see everything is there but still h i don't want all these logs and keep on having this terminal so I can do one thing I just press command C to stop executing all these things and it will take almost 10 second to stop I don't know why okay so that's good but this time I say hey use this in a detached mode that means everything will be there but will not need any live terminal and terminal to be there that means I can simply close the terminal and it is going to still run the nextjs application and final thing is if you want to stop it you can simply say Docker compose down and it's going to remove our container and also first stop it and then remove the container so it is everything we want is there cool so this is how not just you have seen how we can start with the container but you have seen how we can use the docker file how you can use the compose DOL file to connect everything or automate every step for running next year's application in your local so if you found this helpful then please go to the bit fims YouTube channel hit subscribe button hit the like button and don't forget to enable the Bell icon so that you will going to get the notification on any amazing video I share with you so this is the time you need to tell me is this the process you follow to use this next GS is this seems like easy if not tell me what are the hurdles you are facing to use or to run nextjs kind of things in your local and I can tell you that whatever you do on the local it will reflect on container so see if I go on page if I change something so maybe I can say uh get started by bit fumes if I save this file it will be reflected here so get started by once it is done you can see bit fumes so don't worry about this everything will be there as you like so I hope you get some something from this video and we will see in the next video Until then don't forget to follow me on different social media platforms we will meet in the next video till then goodbye

Channel: Bitfumes

Views: 1,859

Keywords: docker nextjs, deploy nextjs with docker, docker with nextjs, docker for nextjs, nextjs with docker, setup nextjs with docker, setup docker for nextjs

Id: 75GEOl5uIY0

Length: 18min 9sec (1089 seconds)

Published: Fri Dec 15 2023