Azure has some ways to deploy web site on the cloud, a fast and straightforward method is to deploy it to Azure Static Internet Apps. This web site may also be deployed at no cost for private and improvement variations to check.
Beneath are the steps to deploy the azure static net apps.
Create a pattern subsequent JS app utilizing beneath instructions.
npx create-next-app@newest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --ts
Any net app can be utilized to deploy like angular, react, vue, and many others. I exploit react subsequent js with typescript for improvement.
Step 1
Construct the web site and ensure to execute “Yarn export”. Be certain index.html is created in “out” folder.
Step 2
Push the code to your github repository
Step 3
Then login to https://portal.azure.com and seek for Static Internet Apps
Step 4
Click on create and fill the next data
Step 5
I’ve chosen to deploy the free model for demo, however you may select paid model for manufacturing which has further options.
Step 6
Login to Github by clicking on “Register with git hub”.
As soon as signed in, you’re going to get beneath choice to pick out the git hub repository the place the nextjs net app code is current.
Step 7
Be sure to choose the suitable construct preset for deployment. I’ve Subsequent JS APP, so I’ve chosen it beneath. There are various choices as proven beneath
Step 8
Since “yarn export” creates a “out” folder the place the index.html is current, I’ve configured the output location as beneath.
Step 9
Confirm all of the inputs and click on “Overview+Create”
Step 10
No different inputs are required and Remaining web page seems to be as beneath.
Step 11
Click on create and change to github code repository for net app. And navigate to “Actions”
Step 12
Azure creates a YML file for CICD which can construct the app and deploy to azure static net app. You’ll be able to click on on the file to test the code
Step 13
As soon as the construct is accomplished the web site might be deployed and URL might be accessible within the portal as beneath. That is auto-generated URL, you may configure customized domains to get your URL.
Conclusion
On this article, we’ve learnt learn how to create web site and deploy static web site to Azure Static Internet App utilizing the free plan. For the manufacturing model, you may rise up to five domains and personal features. Additionally, the paid model help greater bandwidth.
