Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Lab 3: Hosting Web Applications on the Azure Platform using Azure App Service
a. Install Visual Studio and .NET Core
Estimation time for this Section B: 10 minutes b. CreateaRazorwebapp
1. From Visual Studio, select File > New > Project.
This tutorial teaches the students the steps to publish an ASP.NET Core app to Azure with Visual Studio.
Visual Studio 2017 version 15.7.3 or later with the following workloads:
ASP.NET and web development
.NETCorecross-platformdevelopment
.NET Core 2.1 SDK or later
Complete the New Project dialog:
In the left pane, tap .NET Core
In the center pane, tap ASP.NET Core Web Application (.NET Core)
Name the project “RazorPagesMovie” (It’s important to name the project
“RazorPagesMovie” so when you copy code, the namespace will match.)
TapOK
Level 3 Asia Pacific University of Technology & Innovation Page 1 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Complete the New ASP.NET Core Web Application (.NET Core) – RazorPagesMovie dialog:
In the version selector drop-down box select ASP.NET Core 2.1
Then select Web Application.
Select Change Authentication.
The Change Authentication dialog appears.
Select Individual User Accounts.
Select OK to return to the New ASP.NET Core Web Application, then select OK
again.
Level 3 Asia Pacific University of Technology & Innovation Page 2 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
The Visual Studio template creates a project solution.
Run the app
Press CTRL+F5 to run the project.
Test the About and Contact links.
Level 3 Asia Pacific University of Technology & Innovation Page 3 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Register a user
Select Register and register a new user. You can use a fictitious email address. When you submit, the page displays the following error:
“Internal Server Error: A database operation failed while processing the request. SQL exception: Cannot open the database. Applying existing migrations for Application DB context may resolve this issue.”
Select Apply Migrations and, once the page updates, refresh the page.
Level 3
Asia Pacific University of Technology & Innovation Page 4 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
The app displays the email used to register the new user and a Log out link.
Now, close the application.
Level 3 Asia Pacific University of Technology & Innovation Page 5 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Estimation time for this Section C: 1 hours 30 minutes
i. Option 1: Choose Create new App Service in the Visual Studio
(1 hours 5 minutes)
In the Publish dialog:
c. Deploy the web application to Azure App Service
Right-click on the project in Solution Explorer and select Publish….
Select Microsoft Azure App Service.
Select the gear icon and then select Create New.
Then in the Publish button, select Create Profile.
Level 3 Asia Pacific University of Technology & Innovation Page 6 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Create Azure resources
The Create App Service dialog appears:
Enter your subscription.
The App Name, Subscription, and Resource Group entry fields are populated.
You can keep these names or change them.
In the Hosting Plan, kindly choose the New… button.
At the form of Configure Hosting Plan, choose the location as Southeast Asia
and the size as free.
Level 3 Asia Pacific University of Technology & Innovation Page 7 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Then, at the Explore Additional Azure Services, select “Create a SQL Database” to create a new database.
Select New… on the Configure SQL Database dialog to create a new database.
Select the Southeast Asia as your SQL DB Location.
Then, create your admin username and password in the given columns.
Then, a column of Connection String Name appear. Continue with the “DefaultConnection” string and press OK.
Level 3 Asia Pacific University of Technology & Innovation Page 8 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Then, Visual Studio returns to the Create App Service dialog. Select Create on the Create App Service dialog.
Level 3
Asia Pacific University of Technology & Innovation Page 9 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Make configuration & publish the web site. When deployment completes, select Configure:
On the Settings page of the Publish dialog:
Expand Databases and check Use this connection string at runtime.
Expand Entity Framework Migrations and check Apply this migration on
publish.
Select Save. Visual Studio returns to the Publish dialog.
Click Publish. Visual Studio publishes your app to Azure. When the deployment completes, the app is opened in a browser.
Level 3 Asia Pacific University of Technology & Innovation Page 10 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Edit the SQL DB Pricing Plan
Go to the Resource Groups page, choose the SQL database. Then, go to the Pricing
Level 3
Asia Pacific University of Technology & Innovation Page 11 of 25
Tier Section to change the Pricing Plan from S1 Plan to Basic Plan.
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Test your app in Azure
Test the About and Contact links
Register a new user
Level 3 Asia Pacific University of Technology & Innovation Page 12 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Level 3 Asia Pacific University of Technology & Innovation Page 13 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Remote access to your application SQL DB using SQL Server Management Studio
1. In the Azure Portal, access to the SQL database page. In the server name there, click the copy icon.
2. Then, to remote access to your SQL DB, start your SQL Server Management Studio.
3. In the Server Type: Select the Database Engine option.
4. Paste the copied URL link into the Server Name column.
5. Then, in the Authentication column: Select the SQL Server Authentication option.
6. Lastly, put your admin username and password that you create when you are in the Visual Studio.
7. Then, a “New Firewall Rule” dialog appear. Now, click the “Sign In” button. Sign in with your azure account.
Level 3 Asia Pacific University of Technology & Innovation Page 14 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
8. Finally, you able to remote access to your SQL DB from your computer through the SQL Server Management Studio.
9. Now, close your SQL Server Management Studio and return back to the visual studio again.
Level 3 Asia Pacific University of Technology & Innovation Page 15 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Access your Azure app content through FTP/S through WinSCP
1. Download the Portable executables WinSCP software from the below link:
https://winscp.net/eng/downloads.php
Level 3 Asia Pacific University of Technology & Innovation Page 16 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
2.
Double click on the WinSCP executable file.
Level 3
Asia Pacific University of Technology & Innovation Page 17 of 25
3.
Now, go back to your Azure portal. Choose the App Service option.
4. Click on the existing app service. Choose the Deployment Center option and select the FTP option.
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
5. Select the Dashboard button.
6. Copy the FTPS endpoint and paste into the WinSCP hostname column.
7. Copy the Username and paste into the WinSCP username column.
8. Copy the Password and paste into the WinSCP password column.
9. Lastly, select the Login button and remote access to your Azure App contents.
Level 3
Asia Pacific University of Technology & Innovation Page 18 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Level 3 Asia Pacific University of Technology & Innovation Page 19 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Update the app
Edit the Pages/About.cshtml Razor page and change its contents. For example, you
1.
can modify the paragraph to say “Hello ASP.NET Core!”:
2.
Right-click on the project and select Publish… again.
3. After the app is published, verify the changes you made are available on Azure.
Level 3 Asia Pacific University of Technology & Innovation Page 20 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Exercise 1: (20 minutes)
Modify your current index page to become the below view:
Level 3 Asia Pacific University of Technology & Innovation Page 21 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
ii. Option 2: Choose Select Existing in the Visual Studio (5 minutes) Exercise 2: Create a new project and replace the current project
Level 3 Asia Pacific University of Technology & Innovation Page 22 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Level 3 Asia Pacific University of Technology & Innovation Page 23 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Level 3 Asia Pacific University of Technology & Innovation Page 24 of 25
Designing and Developing Applications on the Cloud (CT071-3-5-3-DDAC) Hosting Web Applications on the Azure Platform
Clean up
When you have finished testing the app, go to the Azure portal and delete the app.
Select Resource groups, then select the resource group you created.
In the Resource groups page, select Delete.
Enter the name of the resource group and select Delete. Your app and all other resources created in this tutorial are now deleted from Azure.
Level 3 Asia Pacific University of Technology & Innovation Page 25 of 25