1-web-lab

Azure Dev Day - Web solutions lab one

Overview:

• Step 1: Create a Resource Group
• Step 2: Deploy and Configure Azure SQL
• Step 3: Deploy and Configure App Service
• Step 4: Use Cloud Shell to Deploy the Application
• Part 4: Clean Up Azure Resources

Objectives

Hosting a Web app in App Services is a great way for developers to leverage the power of Azure cloud without the need to architect complex infrastructure and networking setup but at the same time take advantage of capabilities like security, load balancing, autoscaling, automated management and continuous deployment to name a few.

During this lab you will learn to:

• Deploy Azure Resources like Azure SQL and a Web App host in Azure App Services
• Configure the Web App to connect to the Azure SQL database
• Execute SQL code in the Portal to create a table
• Use Cloud Shell to deploy the application to the Web App
• Use the Web App to view the data and make changes to the database

NOTE: This exercise is a section of a day-long workshop on Azure Dev Day, the complete workshop labs may be found here.

Step 1: Create a Resource Group

1. In the Azure Portal (https://portal.azure.com), select Resource Groups from the search bar
2. Select + Create and enter the following values:
   1. Basics > Resource group: rg-add-web-[uniqueid]
   2. Basics > Region: East US

Step 2: Deploy and Configure Azure SQL

1. In the Azure Portal (https://portal.azure.com), select Azure SQL from the search bar

2. Select + Create, select SQL databases > Single database enter the following values:

   1. Basics > Resource group: rg-add-web-[uniqueid]
   2. Basics > Database name: db
   3. Basics > Server: Create new
      1. Server name: sql-[uniqueid]
      2. Location: East US
      3. Authentication method: Use SQL authentication
      4. Server admin login: spring
      5. Password: ABCD1234abcd!
   4. Basics > Compute + storage: Configure database
      1. Service tier: Basic
   5. Basics > Backup storage redundancy: Locally-redundant backup storage
   6. Networking > Connectivity method: Public endpoint
   7. Networking > Allow Azure services: Yes
   8. Networking > Add current client IP address: Yes

3. Navigate to the new Azure SQL database

4. Select Query Editor from the left menu

5. Log in with the database credentials:

   1. Login: spring
   2. Password: ABCD1234abcd!

6. Apply the following script to build the correct schema:

   CREATE TABLE Orders
   (
       Id UNIQUEIDENTIFIER PRIMARY KEY,
       CustomerName NVARCHAR(50) NOT NULL,
       Product NVARCHAR(20) NOT NULL,
       Quantity int NOT NULL
   );

Step 3: Deploy and Configure App Service

1. In the Azure Portal (https://portal.azure.com), select App Services from the search bar

2. Select + Create and enter the following values:

   1. Basics > Resource Group: rg-add-web-[uniqueid]
   2. Basics > Name: app-add-web-[uniqueid]
   3. Basics > Runtime stack: Java 11
   4. Basics > Region: East US
   5. Basics > Sku and size: Change size
      1. Dev/Test - B1

3. Final result should look like this.

   

4. Navigate to the new App Service

5. Select Settings > Configuration from the left menu

6. Select Application settings > Advanced edit and paste in the following settings

   {
       "name": "AZ_DB_SERVER_NAME",
       "value": "sql-[uniqueid]", 
       "slotSetting": false
   },
   {
       "name": "AZ_DATABASE_NAME",
       "value": "db",
       "slotSetting": false
   },
   {
       "name": "AZ_SQL_SERVER_USERNAME",
       "value": "spring",
       "slotSetting": false
   },
   {
       "name": "AZ_SQL_SERVER_PASSWORD",
       "value": "ABCD1234abcd!", 
       "slotSetting": false
   },
   {
       "name": "spring.datasource.url",
       "value": "jdbc:sqlserver://${AZ_DB_SERVER_NAME}.database.windows.net:1433;database=${AZ_DATABASE_NAME};encrypt=true;trustServerCertificate=false;hostNameInCertificate=*.database.windows.net;loginTimeout=30;",
       "slotSetting": false
   },
   {
       "name": "spring.datasource.username",
       "value": "${AZ_SQL_SERVER_USERNAME}",
       "slotSetting": false
   },
   {
       "name": "spring.datasource.password",
       "value": "${AZ_SQL_SERVER_PASSWORD}",
       "slotSetting": false
   }

7. Click on OK. Then click on Save and Continue.

Step 4: Use Cloud Shell to Deploy the Application

1. Open Azure Cloud Shell. Click on the Cloud Shell icon in the top right of the portal. Then click on Bash. This will open a terminal window in the portal. You may need to create a storage account. If so, follow the prompts.

2. In the terminal window, run the following command to clone the repository and navigate to the project folder.

   git clone https://github.com/microsoft/azure-dev-day-java.git && cd azure-dev-day-java/1-web-lab

3. In the terminal window, run the following command to build the project.

   mvn package

4. In the terminal window, run the following command to deploy the project to the Azure App Service.

   az webapp deploy --resource-group rg-add-web-[uniqueid] --name app-add-web-[uniqueid]  --src-path target/demo.jar --type jar --async true

5. In the terminal window, run the following command to get the URL of the site. Or you can find it in the Azure portal in your App Service.

   az webapp show --resource-group rg-add-web-[uniqueid] --name app-add-web-[uniqueid] --query defaultHostName --output tsv

   or in the top right of this image you can see the URL. Navigate to your App Service in the Azure portal and click on Overview. Then you will see your URL.

   )

6. Copy the URL and paste it into a new browser tab. You should see the following page.

   

Part 4: Clean Up Azure Resources

1. In the Azure portal, Use the search bar to navigate to your resource group (rg-azure-dev-day).
2. Click on Delete resource group.
3. Click on Delete.