Deploying Next.js app with Docker

hello let's deploy your next GS app using docker so first I went to the documentation of next.js and I have this deploying section here so I scroll down a little bit because I don't want to use versa I want to just use Docker so self-hosting and then Docker image so I open this Docker image file here example and I'm going to use on my own website so I have a website that's called Philippine level it's a public website it's using xjs so I open here on my webstorm and I just copy and paste the example so I pay copy these to my vs code here okay so let's test locally so I will build the image here I call this image Philip Neville next so I'm going to build it and the file is needs to be named like Docker file so it's detected here okay it's going to take a little bit more time in your machine because I had everything cached here but it apply all the layers it's just a standard like nextgens installation the only parts that I change is this part here because I was getting a neighbor because of the image component so I am installing the sharp here as well and now I'm going to run this locally using Docker run and let's see in the browser it looks good this is my website if you compare my website here it's exactly the same okay so it's working well and we have a Docker image that's called Philippine Evelyn next and I also have this Docker file on my readboard but now how can I make this available in the internet so one option to deploy online is to use a z Cloud so I'm going to click here it's going to select my organization and the repo is called Philippine level the report that I just showed you we don't need a lot of research so just like this much and I'm going to put the app name like website and that could be my test environment I can deploy anywhere deployed in the United States in this case this brain and the cloud detect that's an xjs application we can also customize this Docker file content for example I'm using the image component so I want to also install the sharp the penis I'm going to add it here and I'm going to change this to have npm install Sharp and that's it so now I can deploy I don't need any environment variables but if I have like a build step using the environment variable to generate static base for example I could click here and put the credentials that I need but I don't have this so I'm going to click in deploy now the same process that we did in our machine is going to happen in the cloud it's going to build the image the docker image for us it's really fast so you can see it already almost done done now it's starting our containers for us so it's getting this image and put in a container in the cloud and that's it so if I click here I can see the same application here as well and actually my production website is also running easy Cloud so it's exactly the same setup that I'm using in production I can go here to see my environment details I can see everything's working no warnings here and that's basically it so that's a very easy way for you to go live if you're not Nexus application using Docker and if you want you can go to the host tab here and you can put the name to this Ingress so you have your custom domain otherwise you can use like just this domain here and it's going to be fine as well if you just want to test an xjs application running online that's it I hope you learned like how to where I get the docker file it was from the official documentation then you can test locally with the docker file you can also use the preset that is going to be detected automatically for you on Z cloud and you can also customize if you want like I did to install another dependency for the image components and that's it hope to see you soon bye

Channel: CodeFTW - Become one of the top developers

Views: 2,843

Keywords:

Id: wg5MKCEfNIc

Length: 4min 49sec (289 seconds)

Published: Mon Jul 03 2023