Deploying NextJS app on Azure App Service

hi I will show how to deploy next JSON edge your flat form I will use as your path service platform as a service so part of this deployment first I will get the sample node next J's application from the next J's portal and second I will upload this sample JavaScript application to the git repository I will use a Jew devops for that next I will create a new app services in the initial portal with node.js by default it will be installed and next I will build a CI pipeline for building the the next Chase application the next I will create a risk I plan to deploy this brilli one to the edge or finally I will discuss couple of issues generally measured of the people encounter while deploying the next edge to the Asia I will get the sample application from next chase go to the next J's Porter so I will click on the lam and you can go to that like any click if you import and navigate between the pages and you can the start now so if you did not log and see if I see here I already login with my git repository like if you did not log in it will ask the login you can log in with the git repository credentials okay I logged in already and it gives some couple of comments that one to throw the all the samples so I am taken from here so for that I am opening like a PowerShell ISE and I am copy-pasting here this one and next one is I am just these two also to run and check out the local okay so for this one just run clearing so I'm going to the space with my location so see work next changes it is not there so I will create make a directory so where I am so first I will go to here a workplace and make a directory next j/s I am creating the folder then I am going to that next J's folder okay now I am in the C Drive or next J is now I am closing this one I am getting the samples all samples just I am running so it prone the it because I it gate like cloning into that you got some exceptions but I will go and check the my root folder say work next shares so it downloaded not so like why got the error so these are the couple of the downloaded all the chakras actually so I am going to be use this chakra because fetch happy because it includes the API call everything okay so these artifacts I want to move to like git repository so for this one what I will do is I will login to my cache reporter I will use my personal account okay so just I'm doing is your DevOps I will check for me account what other DevOps are there okay so I'm clicking here and this folder will show that one for your subscription what are the organization's is adding for that these are the different git repository organizations and I'm choosing this one so it will jump on your edge row DevOps okay so this is my agents one I am going to be create the new project this is I'm calling as a troll any project name you can give it a that one just I am clear by default settings so it is created I'm just I'm clicking here clicking the branch okay if I click on the branch it is saying that when it is empty add some code so I am adding by default Li like the read me I'm clicking on the initialize so that the master branch will be created automatically it is created with the rain we file okay now I created the project and if I want to add for example your project I has multiple multiple projects then you can instead of creating the project within the project you can add new repositories ok this role so now I am going to be pushed my code to this repository so first I'm taking this one clone I am copying this path the similar way now I am at the C work next chase so what I will do is okay I just am writing it [Music] click close I'm giving the path so ma'am okay groaning so let me go and check in the next Jas okay so it was like I cloned that one now from previously downloaded the sample this project called completely moving to this I want to push I want to check in this code to the I sure feel like I should have ops git repository okay I pasted here now what I will do is I will CD so I am at that all now I'm going to be pushed to this code to that one for that two things are there like if you arrived the gate okay just I'm checking the kitties installed or not coming from afraid okay it is installed if it is not installed what Eva Louise eat installation for Windows you can go with this one click on it and you can take the 64-bit windows set then like if you within if you come and press this one it will show I think it is installed after that if you did not set up these are all you have to set up like a kid confessor username and email okay in first initially I am setting up okay next one is I am at the poll I am adding all these files to the repository using the heat add dot okay okay and then just this is my first comment I am doing this one okay this round file I added then I am pushing to my kid repository I think the everyone knows these are all like who are using the JavaScript he knows it gives a mirror first I will check in the reserves think this is of honor I just am refreshing here whether it is pushing okay it push it I not with that error okay whatever I required all the fines are there from now like I took it the sample code of the next chairs I will move it to here the git repository from masterpiece I will create a build pipeline so you can click setup builder or you can also click here and if I click on the build you will get new pipeline anything is fine so scram I will go from here okay set up the build so it will come this like this one ok so this is my default lean now like it enabled it is forcing us to create a man so I don't want to go for with ml directly I will go for the classic one so I am clicking on the beads click on the new pipeline so if here you can see he used the classic editor and once you can create the real pie plate the classic editor you will get the like criticism will be pattern of the Amelie so clicking automatically it will commit it to that one so I'm much familiar with the classic editor I am clicking here ok now I am selecting the tour ok the project is then repositories this one master continue clicking on the continue so now here I am choosing like low json' you can take it anything Gulf or anything is fine like and choosing the first one node.js with grant so it created by default visible so the first one is I am naming am giving that one mine for project CI and this is an agent pool ok so agent pool is like it will spin off the open like the server and all the bill process will happen there you can create you have n number of agents you can choose anything ok I'm using by default this one okay and next I'm clicking here this is we already set up I'm not changing anything agent Cho up okay this is fine the first one is the NPM install okay here NPM install so the first one is named NPM install file I'm installing all the like the node modules okay first I will do this one next one is I am deleting this one it is not required for me and copying cloning this one this is I am choosing from here this is I am choosing the custom one and how we will do in the local is you will run the field so run build I am putting this one so that I am also run build so what it will happen is the NPM and this is command arguments will go there and indirectly NPM run build it will happen okay and after that we will archive that one rest of the process iam then once you aren't care it will be going to this folder the same folder will go to the it will tail from this one and it will if here it will choose that one it will push into the some location okay rest of parameters are same so I'm just saving this one here okay now I created the breed one now I am running the build ok first time I'm clicking the run okay the master ok that's fine you up okay the build is done I will check what are the artifacts it created so I am downloading this one download so it downloaded and I'm checking that what are the heart effects are there see this one the same all files are there it created dot next this is after completing the build this folder will be created it contains everything what is required so thus our required the woolie dot next only these are all my components and pages are not required that one so ok now the mill is successful the build is successful now I will be going to deploy this one so before that I am creating that is your app service so I am going to the portal dot issue then I'm going for the app service and so you can create creating that jazz so so okay it is not there so yes ok it is there so here you have to choose the node.js whatever the version was there just am choosing this one I want to choose the windows application so I will go with anything or convey our Windows is enabled so you can choose a different one and then outside which I can change this one but I'm keeping this I will I will tell how to change the version of that ok I am choosing the windows 8.1 okay if if you select the different version only Linux will enable like if I check here if I go in top okay so with the node 10.6 version ok Linux and Windows is applicable and even if I go for the so if I see here Windows is disabled that means for if I wanted this version only Linux version operating system is only available at present okay so I want to go for the windows that's when choosing the appropriate one later on I can change it and I am taking the Australia East as a region and app service plan this okay sorry it is not there why so this is resource group anything I can go sorry right I want to create it right this one's cool okay here I'm changing I am taking to some basic one just for my testing oh this is not required okay the basic and fun this is a free one okay I am going for the monitor house I don't want application insides going for the tag this is sorry near on the wind this is the safest and project is project is actual something okay Department is IT well just I am creating the app so I choose with the are creating the issue wrap and Windows operating system so I am requesting the requesting to install node 10.6 okay observe is created successfully so I am going to the app services tool next J's so so I'm clicking on that URL let me see that it is running or not okay now it is up and running I will be going to be deploy my I'm going to be created made by plane that is a release by plane so what I can do is I can click on the pipelines and this is a build I added down and we click on the religious the thing is they're just new pipeline so it will give so I want to deploy the issues of that's my selected edge your app service deployment click on apply ok this is fine and clicking on here so first I want to add the art if like the build artifacts so for I selected that whole project and this is a tour see I created yes I want this one then if I click on the reason see like the warning message I need to feel these one if I click on the box okay I need to give the issue subscription okay if you don't have already just you can it will it will ask or eat into the banks and this connection and you will give the credentials of your ratio the serving air connection will be created okay I'm choosing it is already there so click authorize to confirmation is a connection work I just I'm clicking the authorize so just like that one it will ask your credentials to make a connection if it's already not there like calm enter the password so first time it will ask next time onwards it won't ask so the connection is successful to my usual so I am selecting web web app on Windows so I can choose anything because I know I install like I choose at the Windows operating system that's my choose at this one so it will filter all the apps which is Windows whenever I sure so just ideally if I click on this one okay this is a circus I created I choose with this one yeah that I done that so this is easy it is light the done the next one is so I am thinking on the same ok now I am creating the like or deployment so ok the name actually it is getting confused I am just I will change the name so total CD so if I click on the religious I have this one I am creating a creator release and this is a build of today today build and first wash them and once it is created I need to click on this release one ok and click on the deploy it will show that one deploy multiple click on this click on the stage one and I deploy the same process it is also on the queue ok the deployment is done I will go and check what kind of the artifacts it like it deployed so if we go to the Asia okay and if I go to the apps service editor for this one like app service center I'm clicking on the absolu center and click on the go it will open another app showing that when WWE root folder so it it deployed all the whatever the artifacts I wanted to provide everything okay that is the world like I build a cheap pattern pain subtly deployed it successfully now I want to browse it whether it is working or not so this is about right I am expecting so it is saying that when you don't have permission to use this direct to our page so the measure tells the people like while deploying what I kind of the issues I faced even I went through the Stack Exchange and many people get this kind of the issues now I will resolve all these issues and I will show that or what kind of the issues I faced and show the final solution for this one so these are the different issues generally you will get what I get it like this one when you are trying to eat deploy so there are the three issues I got it that one so I will go through that one the first one is a new app service node version should be compatibility with your next J s so this is the one okay and if you face any issue I will check this one before that the how you will check this one okay if I want to change this one what kind of the troubleshooting is check check your s your app service note version and change your local machine note version where the app is running fine so before that one I will first pry to be run the application is my local weather how it is running if it is running what is the node.js washer and then I will compare with the server version so I will jump on Domino con if I see I don't have the node so I am going to be installed on or now I downloaded note I am installing now okay not installation done so I am going here I am checking that load washing [Music] okay just before that I will close the pouch and I reopen so that it can't recognize okay this is a ten point okay and now I am going to the I will run first of all I will try to be land from my local application that will give you the confidence to me okay that application will run on the App server so I did not show how to execute in local okay I am going to the C Drive [Music] next js2 all right okay then npm install command i am running it will install all the load modules it takes some time so it is it gives generally like the warning messages but he can go and check npm modules it installed just I am NPM run down if I call this one what it will go is within this folder it will go go to the like package dot Jason and it will go to that tab that means it will execute this one if you do build it will execute this one okay so just I'm running this it will first come back see this one if I execute this one it will run this actual command is no dot sabotage is just ello access so it is compiling it is ready I've been promised this one so this is application if I click on this one it will go here you and if i refresh still it will do the sawara one and all these calls are api okay now application is running so this one's the same thing now if i observe this one the what is the ocean there just i'm just checking the washing again so you don't even close like this one because still it is a compelling what you need to have to cross this one is go to the task manager notice i am stopping this one there is a command you can run from the air again it will be close it but just ok now if i see here yes this is the ten point what is the note version is at 10.16 now you will see this is the local it is running now if i go and check in the portal if you go to the app services go to your app just down there is a configuration set such not other settings click on that application settings by default it will be selected if i see the name settings website no default version okay if i click on this edit ok 10.6 is there not bad it is not the bit of water it should be run okay you if you want to test this one you can downgrade you are local version to ten point six and whether it is running or not if you want exact version of your local which is a specific portion that is also you can check this one so to check what kind of the maximum like the version of the load the issue windows will support if i want to do that one there is a way to do that this one and if I hear before the Asian website SEM dot you have to put it and the slash and whatever the API slash acrostics slash runtime this is I make the URL and I'm pasting here it will give all the supported URLs of the node.js the okay we'll check for 10.16 it is not there okay like you can this interested vomiting okay see this is a node.js all the different versions are there what it will give me if I see here different 10.6 was there you can include to the 10.15 14 like these are the maximum versions of your current operating system you can upgrade you can check this one and record it with that you are for example if it is the motion is not there then you have to switch to your app service to the Linux operating system so that you can match the version that is the one I hope like because my still definitely the application will run on my app services because it is the right wash like the 10.6 is a good so if i want to change like the different version what you can do is two ways you can do what is if you come to this one app settings click on here and you can change the whatever the version you want no actually like this is the app service as the latest version compared to that one ok so you can change it here and click on the ok and you can speak on the same immediately that washing it will be installed that is a one way because what we are doing is we are building the iterative of CI CD you can also do why two pipelines so how to do I will show if I go to the my sister is showed here so if I see okay in the city by applying if I go click here under the app settings you can change this one so if I go for the religious if I click on the edit click on this form click on this and if I see here so under the app settings you can specify the exact the parameter name and with the space whatever the version you want so every time it is deploying first it is install that one okay that is the one so okay here I specified that will go to the app settings of the issue and change the settings and according to that one so you can achieve that one this is the first point I am comparing the node version that is a first issue and the second issue is the missing web config file at the road so we don't have the web.config file at the root so the reason to include config file the reason is the in local or how you were running the npm run like we specified so like it is facing the node dot some would not change it is running that one but in the issue have services you have been used is nor module two like a run standard processor and the passes that request to you are surrounded JS file so for that one like you go and check at the root for the grab that file is they are not there or not if it is not there what you need to do is go to this particular link and download it and upload it to that server so I will do that for now so go that one next jas extinction if I tap this one I can go I am going to this particular git repository they specify alike next J server as your site extinction you can add this extinction or like I can follow my steps so if I click on the next J s if I click on the files you have the Raptor config I am downloading this one or I can also add this to my root folder okay so I'm copying this one I'm copying this going here creating just I'm saying so in this way okay this is a web.com fig this is a one so the next one is I need to upload to my dev ops ok first I will go to the repository so for this one I am trying to upload this file single file [Music] now I got confident I'd won there so this will be going to the server this is the second one is missing so I added here the next one also I will go the last one so that is the second issue I am talking about Webber config we added third issue I will check that one incorrect port number in the sabotage Jays are in current script tags in the package store chaser so just if I look into here so what is if you go into the package drop Jason so what under the scripts they would build start is there it will be node node server dot j j aj s next build nodes are water J's these configuration should be there and if it is not there just to cross-check that one so what I will go to the my repository so just a wire holder okay going back to here and mimes clicking on the package dot Jason so I'm clicking on edit if it is not there node dot J's is there this is correct and next next our build is there then this is a this is not required I guess here okay now it is correct I am committing this one I fixed this one next I am going to the cerrado J s here the important number is not specified so understand you how to write the port and the process dot environment dot or 3000 will be there I am going to be add I will add the port here so I can add so away the transfer I will click on the edit okay and this is the port and the spot I will give it to here this is okay this is I will add it here so you need to add this line okay I am committing here then again I am rebuilding and redeploying this one so I'm clicking on the okay you know build build is done I am deploying using the CD clicking on the create release clicking on this one so I am releasing this deployment is done I will to cross-check okay it's successfully deployed okay now you can see the next Chase is up and running if I click on the next J is click on this one okay the server rendering also walking if I click on the home yeah everything is working so the deployment successfully down we successfully built the see ACD pipeline from a DevOps now the final one is if I go and check here the artifacts so if I go check and just refresh this one if I see here actually this component is not required because after successfully build whatever they are not a dot next folder only required and this it is not required components are required pages are not required and readme is not required these are all not required so who will be like eliminate part of the build okay then this is the last step so what I will do is I will go to here CD okay I'm looking on this one before RK I will add one more task that is the remove or delete I guess so the delete files okay just I am adding this one so I'm moving to the before archive files so here the folder I need to be select okay this is a folder I want to remove that's fine and this is a content I need to give that here whatever I want explode so if I come here so it will become dot I get okay so everything whatever you want sk x to the file sephora you need to give it that dot git go to the next slide or i want to exclude components okay components next okay and pages right yeah pages and after that readme dot MD [Music] MD okay anything else I want to under get a kit is there and components pages readme and rest of the files are required I am just keeping that one so this is fine I am saving and again killing that one that again book will release by excluding these are all okay just I will go to the build and see just simplifying the bed whatever we require the resources to move into the issue those resource only we want to move rest of things should be filter who build is completed and if I want you can check that what is the artifacts it created and just download this one so in the meantime like you would release I am do check parallely create a new release so this is the third portion product was created so click on this one trigger the deploy just I will check the build one if I click on this so if I see here whatever I required those finds out there I think read me toward every is that I think something mystic was there that might be the reason ok this is done I can go and check here ok if I see here so this is an indwelling small mystic was there but rest of the things are removed I will check the final one is aware how it is yeah it is running application is running okay thanks for watching

Channel: Munaga

Views: 15,437

Keywords: next.js, NextJS, next.js deployment, nextjs deployment, next.js azure, next.js azure deployment, next.js deploy to azure, next.js to azure app service, nextjs azure paas, next.js azure paas

Id: Ut8KYyCOqpA

Length: 40min 47sec (2447 seconds)

Published: Tue Jul 02 2019