06-07-2018, 08:10 PM
Exploring Azure App Service – Web Apps and SQL Azure
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure.jpg" width="1028" height="723" title="" alt="" /></div><div><p>There is a good chance that your web app uses a database. In <a href="https://blogs.msdn.microsoft.com/webdev/2018/05/02/exploring-azure-app-service-introduction/" target="_blank">my previous post introducing Azure App Service</a>, I showed some of the benefits of hosting apps in Azure App Service, and how easy it is to get a basic site running in a few clicks. In this post I’ll show how to set up a SQL Azure database along with an App Service Web App from Visual Studio, and apply Entity Framework automatically as part of publish.</p>
<h3>Let’s get going</h3>
<p>To get started, you’ll first need:</p>
<ul>
<li>Visual Studio 2017 with the <em>ASP.NET and web development</em> workload installed (<a href="https://www.visualstudio.com/thank-you-downloading-visual-studio/?sku=Community&rel=15&utm_source=azuremscom&utm_medium=clickbutton&utm_campaign=tailored_azuredlpage&rid=34348">download now</a>)</li>
<li>An Azure account:
</li>
<li>Any ASP.NET or ASP.NET Core app that uses a SQL Database. For the purposes of this post, I’ll create a new ASP.NET Core app with Individual Authentication:
<ul>
<li>On the “New ASP.NET Core Web Application” dialog, click the “Change Authentication” button.<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image00220.jpg"><img title="clip_image002" alt="clip_image002" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure.jpg" width="650" border="0" /></a></li>
</ul>
</li>
<li>Then select the “Individual User Accounts” radio button and click “OK”.</li>
<li>Click OK.</li>
</ul>
<p>I can now run my project locally (F5) and create user accounts which will be stored in a SQL Server Express Local DB on my machine.</p>
<h3>Publishing to App Service with a Database</h3>
<p>Let’s publish our application to Azure. To do this, I’ll right click my project in Solution Explorer and choose “Publish”</p>
<p><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0034.png"><img title="clip_image003" alt="clip_image003" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure.png" width="400" border="0" /></a></p>
<p>This brings up the Visual Studio publish target dialog, which will default to the Azure App Service pane with the “Create new” radio button selected. To continue click “Publish”.</p>
<p>This brings up the “Create App Service” dialog (see the <a href="https://blogs.msdn.microsoft.com/webdev/2018/05/02/exploring-azure-app-service-introduction/#appservice_concepts" target="_blank">“Key App Service Concepts” section of my previous post for an explanation of the fields</a>). To create a SQL Database for our app to use, click the “Create a SQL Database” link in the top right section of the dialog.</p>
<p><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0055.jpg"><img title="clip_image005" alt="clip_image005" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-1.jpg" width="644" height="222" border="0" /></a></p>
<p>This will bring up the “Configure SQL Database” dialog.</p>
<ul>
<li><strong>Note:</strong> If you are using a Visual Studio Enterprise subscription, many regions will not let you create a SQL Azure database so I recommend choosing “East US” or “West US 2” depending on where you are located (we are adding logic in in the Visual Studio 2017 15.8 update to remove those regions if that’s the case, but for now you’ll need to choose an appropriate region). To do this, click the “New…” button next to your “Hosting Plan Dropdown” and pick the appropriate region (“East US” or “West US 2”).</li>
<li>Since I don’t have an existing SQL Server, the first thing I need to do is create a server to host the database, so I’ll click the “New…” button next to the “SQL Server” dropdown,</li>
<li>Choose a location for the database.</li>
<li>Provide an administrator user name and password for the server</li>
<li>Click “OK”<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0073.jpg"><img title="clip_image007" alt="clip_image007" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-2.jpg" width="431" height="484" border="0" /></a></li>
<li>Make sure the connection string name field matches the name of the connection string your application uses to access the database (if using a new project, it is “DefaultConnection” which will be prepopulated for you).<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0094.jpg"><img title="clip_image009" alt="clip_image009" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-3.jpg" width="430" height="484" border="0" /></a></li>
<li>Click OK</li>
<li>Then click the “Create” button on the “Create App Service” dialog</li>
</ul>
<p>It should take ~2-3 minutes to create all of the resources in Azure, then your application will publish and a browser will open to your home page.</p>
<h3>Configuring EF Migrations</h3>
<p>At this point there is a database for your app to use in the cloud, but EF migrations have not been applied, so any functionality that relies on the database (e.g. Registering for a user account) will result in an error.</p>
<p>To apply EF migrations to the database:</p>
<ul>
<li>Click the “Configure…” button on the publish summary page<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0114.jpg"><img title="clip_image011" alt="clip_image011" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-4.jpg" width="644" height="336" border="0" /></a></li>
<li>Navigate to the “Settings” tab</li>
<li>When it finishes discovering data contexts, expand the “Entity Framework Migrations” section, and check the “Apply this migration on publish” for all of the contexts it finds<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0133.jpg"><img title="clip_image013" alt="clip_image013" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-5.jpg" width="610" height="484" border="0" /></a></li>
<li>Click “Save”</li>
<li>Click Publish again, in the output window you should see “Generating Entity framework SQL Scripts” and then “Generating Entity framework SQL Scripts completed successfully”<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0154.jpg"><img title="clip_image015" alt="clip_image015" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-6.jpg" width="644" height="381" border="0" /></a></li>
</ul>
<p>That’s it, your web app and SQL Azure database are both configured and running in the cloud.</p>
<h3>Conclusion</h3>
<p>Hopefully, this post showed you how easy it is to try App Service and SQL Azure. We believe that for most people, App Service is the easiest place to get started with cloud development, even if you need to move to other services in the future for further capabilities (<a href="https://docs.microsoft.com/en-us/azure/app-service/choose-web-site-cloud-service-vm">compare hosting options</a>). As always, let us know if you run into any issues, or have any questions below or <a href="https://twitter.com/AndrewBrianHall">via Twitter</a>.</p>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure.jpg" width="1028" height="723" title="" alt="" /></div><div><p>There is a good chance that your web app uses a database. In <a href="https://blogs.msdn.microsoft.com/webdev/2018/05/02/exploring-azure-app-service-introduction/" target="_blank">my previous post introducing Azure App Service</a>, I showed some of the benefits of hosting apps in Azure App Service, and how easy it is to get a basic site running in a few clicks. In this post I’ll show how to set up a SQL Azure database along with an App Service Web App from Visual Studio, and apply Entity Framework automatically as part of publish.</p>
<h3>Let’s get going</h3>
<p>To get started, you’ll first need:</p>
<ul>
<li>Visual Studio 2017 with the <em>ASP.NET and web development</em> workload installed (<a href="https://www.visualstudio.com/thank-you-downloading-visual-studio/?sku=Community&rel=15&utm_source=azuremscom&utm_medium=clickbutton&utm_campaign=tailored_azuredlpage&rid=34348">download now</a>)</li>
<li>An Azure account:
</li>
<li>Any ASP.NET or ASP.NET Core app that uses a SQL Database. For the purposes of this post, I’ll create a new ASP.NET Core app with Individual Authentication:
<ul>
<li>On the “New ASP.NET Core Web Application” dialog, click the “Change Authentication” button.<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image00220.jpg"><img title="clip_image002" alt="clip_image002" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure.jpg" width="650" border="0" /></a></li>
</ul>
</li>
<li>Then select the “Individual User Accounts” radio button and click “OK”.</li>
<li>Click OK.</li>
</ul>
<p>I can now run my project locally (F5) and create user accounts which will be stored in a SQL Server Express Local DB on my machine.</p>
<h3>Publishing to App Service with a Database</h3>
<p>Let’s publish our application to Azure. To do this, I’ll right click my project in Solution Explorer and choose “Publish”</p>
<p><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0034.png"><img title="clip_image003" alt="clip_image003" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure.png" width="400" border="0" /></a></p>
<p>This brings up the Visual Studio publish target dialog, which will default to the Azure App Service pane with the “Create new” radio button selected. To continue click “Publish”.</p>
<p>This brings up the “Create App Service” dialog (see the <a href="https://blogs.msdn.microsoft.com/webdev/2018/05/02/exploring-azure-app-service-introduction/#appservice_concepts" target="_blank">“Key App Service Concepts” section of my previous post for an explanation of the fields</a>). To create a SQL Database for our app to use, click the “Create a SQL Database” link in the top right section of the dialog.</p>
<p><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0055.jpg"><img title="clip_image005" alt="clip_image005" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-1.jpg" width="644" height="222" border="0" /></a></p>
<p>This will bring up the “Configure SQL Database” dialog.</p>
<ul>
<li><strong>Note:</strong> If you are using a Visual Studio Enterprise subscription, many regions will not let you create a SQL Azure database so I recommend choosing “East US” or “West US 2” depending on where you are located (we are adding logic in in the Visual Studio 2017 15.8 update to remove those regions if that’s the case, but for now you’ll need to choose an appropriate region). To do this, click the “New…” button next to your “Hosting Plan Dropdown” and pick the appropriate region (“East US” or “West US 2”).</li>
<li>Since I don’t have an existing SQL Server, the first thing I need to do is create a server to host the database, so I’ll click the “New…” button next to the “SQL Server” dropdown,</li>
<li>Choose a location for the database.</li>
<li>Provide an administrator user name and password for the server</li>
<li>Click “OK”<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0073.jpg"><img title="clip_image007" alt="clip_image007" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-2.jpg" width="431" height="484" border="0" /></a></li>
<li>Make sure the connection string name field matches the name of the connection string your application uses to access the database (if using a new project, it is “DefaultConnection” which will be prepopulated for you).<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0094.jpg"><img title="clip_image009" alt="clip_image009" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-3.jpg" width="430" height="484" border="0" /></a></li>
<li>Click OK</li>
<li>Then click the “Create” button on the “Create App Service” dialog</li>
</ul>
<p>It should take ~2-3 minutes to create all of the resources in Azure, then your application will publish and a browser will open to your home page.</p>
<h3>Configuring EF Migrations</h3>
<p>At this point there is a database for your app to use in the cloud, but EF migrations have not been applied, so any functionality that relies on the database (e.g. Registering for a user account) will result in an error.</p>
<p>To apply EF migrations to the database:</p>
<ul>
<li>Click the “Configure…” button on the publish summary page<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0114.jpg"><img title="clip_image011" alt="clip_image011" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-4.jpg" width="644" height="336" border="0" /></a></li>
<li>Navigate to the “Settings” tab</li>
<li>When it finishes discovering data contexts, expand the “Entity Framework Migrations” section, and check the “Apply this migration on publish” for all of the contexts it finds<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0133.jpg"><img title="clip_image013" alt="clip_image013" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-5.jpg" width="610" height="484" border="0" /></a></li>
<li>Click “Save”</li>
<li>Click Publish again, in the output window you should see “Generating Entity framework SQL Scripts” and then “Generating Entity framework SQL Scripts completed successfully”<br /><a href="https://msdnshared.blob.core.windows.net/media/2018/05/clip_image0154.jpg"><img title="clip_image015" alt="clip_image015" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/exploring-azure-app-service-web-apps-and-sql-azure-6.jpg" width="644" height="381" border="0" /></a></li>
</ul>
<p>That’s it, your web app and SQL Azure database are both configured and running in the cloud.</p>
<h3>Conclusion</h3>
<p>Hopefully, this post showed you how easy it is to try App Service and SQL Azure. We believe that for most people, App Service is the easiest place to get started with cloud development, even if you need to move to other services in the future for further capabilities (<a href="https://docs.microsoft.com/en-us/azure/app-service/choose-web-site-cloud-service-vm">compare hosting options</a>). As always, let us know if you run into any issues, or have any questions below or <a href="https://twitter.com/AndrewBrianHall">via Twitter</a>.</p>
</div>