Deploy Next Js to Azure Static Web Apps

hey everyone today I'm going to show you how to deploy a nextjs website into Microsoft as your static web apps and if you want to keep up to date with more content about how to deploy nextjs applications into Microsoft and how to manage them in Azure feel free to hit the like button and subscribe button so as an overview of azure stetic web apps they are a platform as a service offering from Microsoft which means that we do not have to worry about managing or configuring a web server it means that we can focus on our website and code the deployment flow is we make code changes we push those code changes to a git operations tool such as GitHub actions or Ash develops that operations tool then handles the build for us before it is finally deployed into as static web apps so today I'm going to show you how you can deploy that what we're going to deploy is this very simple blog website if you want to follow along with me you can clone this repo and I'll put it in the description below so firstly to get started we are going to create a static web app and the first thing that we need to do is create a resource Group so we'll call it m YT demo RG and I will put the location in East Asia I'll talk a little bit about the location in a second okay great that's deployed now you can either search for a static web app in the search bar here I've already got it here re as a recent service so we can go ahead and click create as a name if you're wondering about the naming convention I'm using here I'm using SWA to indicate a static web app I'm using demo to indicate the environment we got a hosting plan here so you've actually got a free tier so we'll use the free tier and for hosting plan when you deploy a a static web app it's globally available meaning we pick a primary region but Microsoft will actually cach the content like a Content delivery Network in data centers around the world this is telling it where the metadata and the API will live so if you've got data residency requirements uh you may want to consider that before choosing this as an option as with anything in infrastructure the closer the location is to where you are going to be accessing the application from the better your performance so I'm in Australia so the closest region is going to be East Asia now here is where we start to point our GitHub repo to watch static web apps you'll need to have your code repository already in GitHub um we are going to use GitHub uh for this purpose you can use Azure develops um but for this video I will just be talking about GitHub so uh you'll have to select your organization and here is where we select the repository so the the one I've called it is nextjs YT demo um and then just leave it as the master Branch what is going to happen here is that it is going to create yaml file and I'll talk a little bit more about that so that's deploy we can see here that it's given the Azure static web app A Name Black pond and a bunch of random characters here if we try and browse the site we'll see that there's actually nothing there so I want to talk about a bit about this yaml file so this is the repo that I've pointed the AR static web up towards and if we come ahead to this GitHub uh SL workloads uh folder you'll see that it is added another file here this uh sw. yaml file is in the original uh GitHub repo we're going to delete this file that Azure has created for now in short it doesn't work but I'll talk a bit about that towards the end of the video if you're working with your code locally you can run git pull to pull that file down and then I would simply just delete it and then just push those changes up into your repo if you come over here what you'll see um is that there's those those yaml files create these actions so this first failed run comes from the initial yaml file here the additional uh workflows that it's put in have failed as well those are come from the other Azure yaml file back over to the Amo fire which you'll get from the repo if you clone it from the one that I put in the description below let's have a look at what's actually going on here this handles the deployment the next year's deployment into Asia what we're saying here on any type of pull requests from branch that is either from the master feature or bug start a deployment it can be helpful for us when we want to for example test a new feature in the same environment that prod would be allows us to be able to test non production environments and so feature or bug is is like a naming convention for a branch okay so there's going to be two API values that I'm going to have to update here uh and if you want to see where they come from uh jump over the settings in your repo that you're deploying secrets and variables uh under action so when we point this repo to Azure it's created uh an authentication token and that's what we're referencing this yam file so that Azure knows it's actually us trying to deplay uh to our web application so it's this name here that we need to replace in here think contrl D yeah should be able to highlight both of those and hit save so hit save stage these and Comm so place the API value get push now if I come back over to my actions I'll see this pipeline running so this pipeline comes from that yaml file so we've just updated that because we have pushed it triggers this pipeline to deploy cool so we just give that a few moments and it should be deploying our website now so our deployment has succeeded and it's saying I can browse to my site from here and there you have it that's a nextjs uh website deployed so I hope you found that useful feel free to uh share this with friends who might be struggling to get their web app deployed to Microsoft Azure and feel free to like And subscribe to stay updated with more ways you can deploy nextjs to Microsoft what I'm going to do now is I'm actually going to show you what happens if you try and deploy via the the yaml file that you provided with Azure initially remember at the start we deleted this file um and so this is the file here so if I um um delete our initial one here the one that actually works I'll delete that and then I add back the old one push that up um we've still got the action here on pull request to the master that it'll run this action so come back to our action all right so we see this initial one from me are running now okay so when trying to deploy with the initial yam file that Azure gets we get this area here content server has rejected the requests decize the function content was too large um there's nothing I'm not calling any API in this and it's a known error if you um have a look through um some of the GitHub issues that have been raised the reason why the ml file from the repo I've provided works is if we have a look at it what we've got here is we've got in the build remove the node modules and also remove the next cache so for whatever reason the cach in nextjs and the node modules are deemed too large by Azure um and so what we do is we remove them on the initial deployment um and then in the actual build they then get uh built then so that's how you can get around that eror just by using the Ile file um that I provided so yeah again thanks for watching this video hope you found it helpful and helping you deploy your nextjs applications uh and feel free to like And subscribe to stay up to date with nextjs deployment content thanks all see you

Channel: firstSiteTech

Views: 1,988

Keywords: nextjs, azure, microsoft azure, next js, nextjs website, deploy nextjs, deploy next js, deploy next js to azure, next js azure, azure next js, vercel, verwbsite hosting, web hosting, cloud hosting, web development, web dev, react, react hosting, host react app, react azurel

Id: ntsccU21NCs

Length: 8min 46sec (526 seconds)

Published: Sun Nov 26 2023