Build and Deploy nextjs | contentful | docker container to azure app service using github actions

welcome to my YouTube channel today I'm gonna deploy my next JS app to Azure app service as a Docker container first of all we have to create a container registry service go to container histories create container registry people we can create new Resource Group I can name it uxjs app we can give a name to registry so I can say I can use this one my next it's not available simple text yes app we can use the location you can use North Europe you can use plan basic foreign so our container registry is created now we go to access keys and we can enable admin user we need this information to log into this container registry from our GitHub repo so we can push our image to this registry next we can add this information to our GitHub repository so if we go to our repository we can add some Secrets section add new Secret so we can add Azure container just username and you can copy this one here you can add a new one password you can copy this password here and one more from here it's login server you can call it SEO endpoint paste so we have added our secrets next we have to create uh our EML file a GitHub action file so I have already created one so it will run on every push to our main branch then it will use main branch and here we will log into our Azure container registry by using these credentials which we have created on our GitHub repository then we will use this action to build and push to our Docker image to the our can contain Azure container registry so here if you see for this app we need some environment variable at build time so we must add bill orgs here so I have already added this one so we need to add in these environment variables in secrets so we can copy this one secrets and we can copy our next one here xxxess.com so so now we are ready to build and push our image using this GitHub actions and push push it to our measure container history which we have created here so if see we have to add our environment variables here also so we can Define arc and I can copy this one and then we'll Define our environment variables so we can use this one and it will be space ID next one access token so I think we are ready to go just to check here we can give a tag to our app so I already given attack so it will be the tag of our image at our Azure container registering so if I push first I have to add and then commit and then push so if we go to our actions so have a workflow running here it will run our Docker file so so we have successfully built our image and pushed it to our container system so if we go to our repositories here we have our image so we can use this image to deploy on our web service so if we go to app services and create a new resource we can use this one we can give a name to our app and select Docker container here and look now throughout it and we can change the price plane through basic free version so everything okay we hit that you can create button tab service is being deployed so we have to wait a little bit we have successfully created our resource so if we go to the results foreign [Music] it will take some time so there is currently nothing so we have to go to the deployment Center here we can we have a container registry so we can choose our resource Azure container history we're gonna use admin credentials then we can select the registry select the image cancel it turn we can turn on the continuous deployment so we hit save nothing happened we can go to the deployment Center and we change it the logs so it's still in process so it's not finished yet so we have to wait something wrong foreign name of the container for site initialize it successfully and is ready to serve requests if we go to our URL then we refresh our page yes it is a print running on Azure app service so that was it thank you for watching this video please subscribe to the channel if you like this video thank you very much

Channel: SETech

Views: 2,988

Keywords: nextjs, azure app service, nextjs docker, nextjs docker environment variables, azure docker, contenful docker

Id: xm14u2_YY9E

Length: 14min 14sec (854 seconds)

Published: Thu Dec 15 2022