|
| 1 | +# Create a web app in the Azure portal |
| 2 | + |
| 3 | +## Why use the Azure portal? |
| 4 | + |
| 5 | +The first step in hosting your web application is to create a web app (an Azure App Service app) inside your Azure subscription. |
| 6 | + |
| 7 | +There are several ways you can create a web app. You can use the Azure portal, the Azure Command Line Interface (CLI), a script, or an integrated development environment (IDE) like Visual Studio. |
| 8 | + |
| 9 | +The information in this unit discusses how to use the Azure portal to create a web app, and you'll use this information to create a web app in the next exercise. For this module, we'll demonstrate using the Azure portal because it's a graphical experience, which makes it a great learning tool. The portal helps you discover available features, add additional resources, and customize existing resources. |
| 10 | + |
| 11 | +## What is Azure App Service? |
| 12 | + |
| 13 | +Azure App Service is a fully managed web application hosting platform. This platform as a service (PaaS) offered by Azure allows you to focus on designing and building your app while Azure takes care of the infrastructure to run and scale your applications. |
| 14 | + |
| 15 | +## Deployment slots |
| 16 | + |
| 17 | + |
| 18 | + |
| 19 | +## Continuous integration/deployment support |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +## Creating a web app |
| 24 | + |
| 25 | +Sign in to the Azure portal using the same <b>account</b> you used to activate the sandbox. |
| 26 | + |
| 27 | +1. On the Azure portal menu or from the Home page, select Create a resource. Everything you create on Azure is a resource. The Create a resource pane appears. Here, you can search for the resource you want to create, or select one of the popular resources that people create in the Azure portal. |
| 28 | + |
| 29 | +2. In the Create a resource menu, select Web. |
| 30 | + |
| 31 | +3. Select Web App. If you don't see it, in the search box, search for and select Web App. The Create Web App pane appears. |
| 32 | + |
| 33 | +4. On the Basics tab, enter the following values for each setting. |
| 34 | + |
| 35 | +## Exercise - Write code to implement a web application |
| 36 | + |
| 37 | +``` |
| 38 | +cd ~ |
| 39 | +mkdir helloworld |
| 40 | +cd helloworld |
| 41 | +npm init -y |
| 42 | +``` |
| 43 | + |
| 44 | +``` |
| 45 | +touch index.js |
| 46 | +``` |
| 47 | + |
| 48 | +``` |
| 49 | +code . |
| 50 | +``` |
| 51 | + |
| 52 | +```JSON |
| 53 | +{ |
| 54 | + "name": "helloworld", |
| 55 | + ... |
| 56 | + "scripts": { |
| 57 | + "start": "node index.js" |
| 58 | + }, |
| 59 | + ... |
| 60 | +} |
| 61 | +``` |
| 62 | + |
| 63 | +``` |
| 64 | +const http = require('http'); |
| 65 | +
|
| 66 | +const server = http.createServer(function(request, response) { |
| 67 | + response.writeHead(200, { "Content-Type": "text/html" }); |
| 68 | + response.end("<html><body><h1>Hello World!</h1></body></html>"); |
| 69 | +}); |
| 70 | +
|
| 71 | +const port = process.env.PORT || 1337; |
| 72 | +server.listen(port); |
| 73 | +
|
| 74 | +console.log(`Server running at http://localhost:${port}`); |
| 75 | +``` |
| 76 | + |
| 77 | +From a new browser tab, browse to https://shell.azure.com/. |
| 78 | + |
| 79 | +``` |
| 80 | +cd ~/helloworld |
| 81 | +npm start |
| 82 | +``` |
| 83 | + |
| 84 | +``` |
| 85 | +curl http://127.0.0.1:1337/ |
| 86 | +``` |
| 87 | + |
| 88 | +```HTML |
| 89 | +<html><body><h1>Hello World!</h1></body></html> |
| 90 | +``` |
| 91 | + |
| 92 | +### Deploy code to App Service |
| 93 | + |
| 94 | +#### Automated deployment |
| 95 | + |
| 96 | +Automated deployment, or continuous integration, is a process used to push out new features and bug fixes in a fast and repetitive pattern with minimal impact on end users. |
| 97 | + |
| 98 | +Azure supports automated deployment directly from several sources. The following options are available: |
| 99 | + |
| 100 | +- Azure DevOps: You can push your code to Azure DevOps, build your code in the cloud, run the tests, generate a release from the code, and finally push your code to an Azure Web App. |
| 101 | +- GitHub: Azure supports automated deployment directly from GitHub. When you connect your GitHub repository to Azure for automated deployment, any changes you push to your production branch on GitHub will be automatically deployed for you. |
| 102 | +- Bitbucket: Due to its similarities to GitHub, you can configure an automated deployment with Bitbucket. |
| 103 | +- OneDrive: OneDrive is Microsoft's cloud-based storage. You must have a Microsoft account linked to a OneDrive account to deploy to Azure. |
| 104 | +- Dropbox: Azure supports deployment from Dropbox, which is a popular cloud-based storage system similar to OneDrive. |
| 105 | + |
| 106 | +#### Manual deployment |
| 107 | + |
| 108 | +There are a few options that you can use to manually push your code to Azure: |
| 109 | + |
| 110 | +- Git: App Service web apps feature a Git URL that you can add as a remote repository. Pushing to the remote repository will deploy your app. |
| 111 | +- az webapp up: webapp up is a feature of the az command-line interface that packages your app and deploys it. Unlike other deployment methods, az webapp up can create a new App Service web app for you if you haven't already created one. |
| 112 | +- ZIP deploy: You can use az webapp deployment source config-zip to send a ZIP of your application files to App Service. You can also access ZIP deploy via basic HTTP utilities such as curl. |
| 113 | +- WAR deploy: WAR deploy is an App Service deployment mechanism designed for deploying Java web applications using WAR packages. You can access WAR deploy using the Kudu HTTP API located at http://<your-app-name>.scm.azurewebsites.net/api/wardeploy. If that fails, try: https://<your-app-name>.scm.azurewebsites.net/api/wardeploy. |
| 114 | +- Visual Studio: Visual Studio features an App Service deployment wizard that walks you through the deployment process. |
| 115 | +- FTP/S: FTP or FTPS is a traditional way of pushing your code to many hosting environments, including App Service. |
| 116 | + |
| 117 | +## Deploy with az webapp up |
| 118 | + |
| 119 | +``` |
| 120 | +export APPNAME=$(az webapp list --query [0].name --output tsv) |
| 121 | +export APPRG=$(az webapp list --query [0].resourceGroup --output tsv) |
| 122 | +export APPPLAN=$(az appservice plan list --query [0].name --output tsv) |
| 123 | +export APPSKU=$(az appservice plan list --query [0].sku.name --output tsv) |
| 124 | +export APPLOCATION=$(az appservice plan list --query [0].location --output tsv) |
| 125 | +``` |
| 126 | + |
| 127 | +``` |
| 128 | +az webapp up --name $APPNAME --resource-group $APPRG --plan $APPPLAN --sku $APPSKU --location "$APPLOCATION" |
| 129 | +``` |
| 130 | + |
| 131 | +### Verify the deployment |
| 132 | + |
| 133 | + |
| 134 | + |
0 commit comments