Hosting nextjs app in Azure App Service using Visual Studio Code

hey guys today I will show you how to deploy this web application into Azure app service using visual studio code Azure app series is HTTP based service for hosting web applications rest apis and mobile backends you can develop as many language such as.net Java node.js PHP it also provides after scaling load balancing and security let me go go to Azure to my Azure account let's go to app services as you can see there is no any app series yet let's go to visual studio code we need to first to create a next year's application in Visual Studio code let me open Terminal and here we need to go to to next year's website go to docs here there is some few automated automatic setup we choose one of them you can use any of them it's up to you and copy and go back to visual studio code and test here and press enter it will ask some default parameters just keep it default parameter all of them just press enter accept all of them our application name is here my app [Music] let me take some few seconds press done our next GS is ready let's go to my app folder now open it in a visual studio code and we need to run here locally first to check it will run locally or not our next years up for this I use yarn div you can use a npm start if you wish next yes is ready let me run it in browser foreign now we need to go to visual studio code and create a zure apps series for this we need to create a visual studio extension Azure app sales extension [Music] let's install it and it will be in left side will be a pair this icon as your icon our mind is automatically assigned because previously I assigned it to my Azure account it might ask you if you didn't sign to Azure account it might ask you a pop-up and you can just sign in there and you can come back to visual studio code as you can see our app service is empty here because it's not created anything let's click clean terminal and now we need to click click click uh Ctrl shift and P to see the list of commands on the top we choose here create web app to create our app service then we need to create here domain name it will be unique so be careful here this domain name will use our application we'll use this domain name we call it my next up press enter and we can use not yes you can use other series also we are using reactors Here We There is a some planes we use we don't use premium it's expensive it might cause to me we use basic for developing and test for for tutorial I think it's good enough to develop and test now it's creating our web service successful now we need to go if you see you can see on left side our web app series is my next app it's appear here and also you can go to our account in here we can go to home and app services and now you can see this is my next app which we just now we created using user Studio code okay now next is we need to deploy to the current web series our application just choose this command deploy to web app click it and you can use browse and find your source of application this or you can use recently use that application this one just now we created this application we use this URL here we choose it just select this because this is a plane for Linux click deploy and yes and now to see the logs we need to go to to Output and choose from drop down here task drop down up Azure up service and here you can see all steps of deployment let me take 10 or 15 minutes now it it's deployed successfully now we need to go to our Azure account and to check our app service go to app service then here we need to go to domains default domain this is our domain name just click it here it's a pair our next GS app so it means our we successfully deploy our next years up into Azure app series thank you

Channel: KeepLearn

Views: 5,701

Keywords: Azure App Servioce, Nextjs

Id: hZ_8TARnSQI

Length: 7min 30sec (450 seconds)

Published: Sun Mar 26 2023