You will create an Azure Web App and deploy Intellipix to it using Git. Up to now, you have been running the app locally. Azure Web Apps support local Git repositories as deployment sources, which makes it incredibly easy to publish the contents to local Git repositories to Azure. You already have the local repository; it was created in Tutorial 4. Now it’s just a matter of creating the Web App, proving a few key pieces of information to it, it and executing a git push command.
1. If you have made any changes to the app since committing it at the end of Tutorial 4, use Visual Studio Code to commit those changes now.
2. Open the Azure Portal in your browser. If you are asked to log in, do so using your Microsoft account.
3. Click + New, followed by Web + Mobile and Web App.
4. In the “Web App” blade, enter a name for the Azure Web App. The name must be unique within Azure since it ultimately becomes part of a DNS name, so you will probably need to enter something other than “Intellipix.” Select Use existingunder Resource Group and select the “IntellipixResources” resource group that you created for the storage account in Tutorial 1. Then click App service plan/Location.
5. In the “App Service plan” blade, click Create New.
6. Type “IntellipixServicePlan” (without quotation marks) into the App Service plan box and select the location nearest you under Location. Then click Pricing tier to select a pricing tier.
7. In the “Choose your pricing tier” blade, click View All to show all pricing tiers. Scroll down and select the F1 Free pricing tier. Then click the Select button.
8. Click the OK button at the bottom of the “App Service plan” blade to OK the service plan.
9. Click the Create button at the bottom of the “Web App” blade to create the Azure Web App.
10. Once the app has deployed (it generally only takes a few seconds), click Resource groups in the ribbon on the left side of the portal, and click the “IntellipixResources” resource group. Then click the Azure Web App in that resource group (the Web App that you just created).
11. Click Application settings to view the Web App’s application settings.
12. Scroll down to the “App settings” section of the blade and add the following key-value pairs:
- AZURE_STORAGE_ACCOUNT – Name of the storage account you created in Tutorial 1
- AZURE_STORAGE_ACCESS_KEY – Access key for the storage account (Tutorial 1, Step 9)
- AZURE_VISION_API_KEY – Subscription key for the Computer Vision API (Tutorial 3, Step 5)
Once the settings are entered, click the Save button at the top of the blade to save them.
13. Click Deployment options to configure the deployment source.
14. In the “Deployment option” blade, click Choose Source.
15. In the “Choose source” blade, click Local Git Repository. Then click OK at the bottom of the “Deployment option” blade.
16. Click Deployment credentials.
17. Enter a user name and password for deploying to Azure. User names may contain letters, numbers, hyphens, and underscores and must start with a letter. Make your password at least 8 characters in length and include a mix of uppercase letters, lowercase letters, and numbers. Remember the user name and password you entered because you will need them when you deploy the app. When you’re done, click Save at the top of the blade.
18. Click Properties.
19. Scroll down until you find “GIT URL.” Then click the Copy button to copy the URL to the clipboard.
20. Return to the Command Prompt or Terminal window (or open a new one if you closed the last one) and execute the following command to add “azure” as a remote name. Substitute the Git URL on the clipboard for git_url.
git remote add azure git_url
21. Now use the following command to deploy Intellipix from your local Git repository to Azure. When prompted to enter Git credentials, type the user name and password you specified in Step 17 of this tutorial.
git push azure master
22. After a few moments, you should be greeted with a successful deployment.
23. Open your browser and navigate to appname.azurewebsites.net, substituting the name of your Azure Web App for appname (the name you entered in Step 4 of this exercise). Confirm that Intellipix appears in your browser, and that it shows the images you uploaded to it while testing locally. The app is no longer running locally; it’s on the Web, where it’s reachable by everyone. Congratulations on a successful deployment!
If you make changes to the app and want to push the changes out to the Web, simply commit the changes in Visual Studio Code and execute a git push azure master command again. Of course, you can still test your changes locally before publishing to the Web.