Thursday, January 11, 2024

How to deploy ReactApp in Microsoft Azure Storage account

1. Create a storage account in Microsoft Azure.

2. From Settings of created storage account, select 'configuration', a) select 'Disabled' for 'Secure transfer required' -> this enables http. b) select 'Enabled' for 'Allow Blob anonymous access'

3. Save the changes

4. Under 'Data Storage', click on Containers, create a container with access level as Blob(anonymous read access for blobs only)

5. create a 'Front Door and CDN' and do this, search for 'Front Door and CDN profiles', and click +Create button, select Explore other offerings and Azure CDN Standard from Microsoft (classic). Provide resource group name and cdn profile name (ex: cdn-profile)

6. Next, create an Endpoint. To do this, click on cdn-profile you created and click on +Endpoint, provide Endpoint name (Ex: myreactapp), and choose Storage under Origin type. Select Origin hostname from dropdown (ex: mystorageaccount.blob.core.windows.net)

7. Now, select the Endpoint you created and click on 'Rule Engine' that appears in Settings

8. choose Add rules button under EndPoint. Now give a name to rules and Click on Add Condition and select 'URL File Extension', choose Operator 'less than' and Extension as 1 and case transform as No transform. Then click on the “Add action” button and select “URL rewrite” action. 

9. Click on Save button.

10. Now select container that you created under storage account and click Upload button and upload index.html OR your reacjs app after running npm build

11. Now you click on Endpoint created and click Endpoint hostname (ex: https://reactjsapp.azureedge.net) to open the hosted/deployed app in browser.

Related Posts Plugin for WordPress, Blogger...