Jason Watmore's Blog A Web Developer in Sydney
Published: January 10 2020

React + ASP.NET Core on Azure with SQL Server - How to Deploy a Full Stack App to Microsoft Azure

In this tutorial we're going to setup a production ready Windows + IIS server from scratch on Microsoft Azure, then deploy a full stack React + ASP.NET Core + SQL Server application to it that supports user registration and JWT authentication.

The React front-end app and ASP.NET Core back-end api will both be hosted on an Azure Virtual Machine instance running Windows Server and IIS, and the Azure SQL Database service will be used for storing and managing data in the cloud.

Scope of this deployment tutorial

This tutorial will be focused on setting up the web server and SQL database on Azure, then deploying and configuring the React front-end app and ASP.NET Core back-end api to work together. For more in-depth information about the React app or ASP.NET Core api used in this post, check out the following tutorials which cover them in detail:


Azure Deployment Tutorial Contents


Create a new Windows Server on Azure

Before doing anything we need a server that we can work on, follow these steps to spin up a new Windows Server 2019 instance using the Azure Virtual Machines service.

  1. Sign into the Azure portal at https://portal.azure.com/. If you don't have an Azure account yet you can create a free one at https://azure.microsoft.com/free.
  2. Go to the Virtual Machines service section.
  3. Click "Add" to create a new virtual machine.
  4. Basics
    • Resource group - Click "Create new" and enter a name for the resource group (e.g. my-resource-group).
    • Virtual machine name - Enter a name for the virtual machine (e.g. my-server).
    • Image - Select "Windows Server 2019 Datacenter".
    • Size - Click "Change size", select "B1ms" and click the "Select" button. This VM has 2GB of RAM which is about the minimum you want to run for Windows Server.
    • Username - Enter the administrator username for the server.
    • Password - Enter the administrator password for the server.
    • Confirm password - Re-enter the administrator password for the server.
    • Select inbound ports - Allow "HTTP (80)" and "RDP (3389)" traffic through to the server.
  5. Management - Set boot diagnostics monitoring to "Off".
  6. Review + create - Click "Create".


Connect to Azure Windows Server instance via RDP

Once the Azure Windows Server VM is ready you can connect to it via RDP (Remote Desktop Protocol). If you're on Windows you should have an RDP client installed by default, if you're on Mac OSX you can install an RDP client from the app store here.

  1. When your deployment is complete click "Go to resource" to get to the Azure VM Overview page.
  2. On the Azure Virtual Machine Overview page click "Connect".
  3. Click "Download RDP File".
  4. Open the downloaded RDP file. If you see a message that the publisher can't be identified click "Connect".
  5. Enter the username and password from the previous step and click "OK". If you see a message that the identity of the remote computer cannot be identified click "Yes", this warning is just because it's a self signed SSL certificate and nothing to worry about.


Setup Web Server with IIS (Internet Information Services)

When you first connect to the Azure Windows Server instance via RDP you should see the Server Manager interface.

  1. Server Manager
    • Click "Add roles and features".
    • Installation Type - Select "Role-based or feature-based installation" and click next.
    • Server Selection - Leave default and click next.
    • Server Roles - Check box for "Web Server (IIS)" then click "Add Features" button in popup window and click next.
    • Features - Leave default and click next.
    • Web Server Role (IIS) - Leave default and click next.
    • Role Services - Leave default and click next.
    • Confirmation - Click install.
    • Results - Wait for installation to complete and click close.
  2. Download and install the .NET Core Hosting Bundle from https://www.microsoft.com/net/permalink/dotnetcore-current-windows-runtime-bundle-installer. Do this either by downloading the file to your local machine and copying it to the server via remote desktop, or by adding https://*.microsoft.com to the "Trusted sites" in the Internet Explorer security settings on the server to allow the file to download.
  3. Restart IIS with the command net stop was /y && net start w3svc
  4. Download and install the IIS URL Rewrite module from https://www.iis.net/downloads/microsoft/url-rewrite. Do this either by downloading the file to your local machine and copying it to the server via remote desktop, or by adding https://www.iis.net and https://webpihandler.azurewebsites.net to the "Trusted sites" in the Internet Explorer security settings on the server to allow the file to download.


Create Azure SQL Database

Next we'll create a new SQL Server database for the application in the cloud using the Azure SQL Database service.

  1. Go to the SQL Databases section of the Azure portal, you can find this by entering "SQL" in the main search bar and selecting the "SQL databases" service.
  2. Click "Add" or "Create SQL Database".
  3. Basics
    • Resource group - Select the same resource group that the Windows Server Virtual Machine is in (e.g. my-resource-group).
    • Database name - Enter a name for the SQL database (e.g. my-sql-db).
    • Server - Click "Create new".
      • Server name - Enter a globally unique name for the server, it will be used to create the URL to the Azure SQL server: <server-name>.database.windows.net.
      • Server admin login - Enter the administrator username for the Azure SQL server.
      • Password - Enter the administrator password for the Azure SQL server.
      • Confirm password - Re-enter the administrator password for the Azure SQL server.
      • Location - Select the same region as the Windows Server Virtual Machine.
    • Compute + storage - Click "Configure database" then select "Basic" and click the "Apply" button.
  4. Networking
    • Connectivity method - Select "Public endpoint".
    • Allow Azure services and resources to access this server - Select "Yes".
  5. Review + create - Click "Create".


Build and Deploy ASP.NET Core Back-end API

Follow these steps to clone and build the ASP.NET Core API on your local machine then deploy it to the server.

  1. Clone the ASP.NET Core API project to a folder on your local machine with the command git clone https://github.com/cornflourblue/aspnet-core-3-registration-login-api.git. If you don't have the Git CLI installed it can be downloaded from https://git-scm.com/downloads.
  2. Update the database connection string to point to the new Azure SQL Database:
    • In the Azure Portal go to the overview page for the SQL database created in the previous step.
    • Click "Show database connection strings" and copy the "ADO.NET (SQL authentication)" connection string.
    • Open the ASP.NET Core app settings file (/appsettings.json) in a text editor.
    • Replace the value of the WebApiDatabase connection string with the one you just copied, so it looks something like this: 
      "ConnectionStrings": {
  "WebApiDatabase": "Server=tcp:jw-sql-server.database.windows.net,1433;Initial Catalog=my-sql-db-2;Persist Security Info=False;User ID=jason;Password={your_password};MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
},
    • Inside the connection string replace {your_password} with the Azure SQL server admin password you created when setting up the database.
  3. Update the JWT token signing secret:
    • Open the ASP.NET Core app settings file (/appsettings.json) in a text editor.
    • Replace the value of the app settings Secret with your own random string, a quick and easy way is to generate a couple of GUIDs and join them together to make a long random string (e.g. from https://www.guidgenerator.com/).
  4. Build the API with the command dotnet publish --configuration Release from the project root folder (where the WebApi.csproj file is located). If you don't have the .NET Core SDK installed it can be downloaded from https://www.microsoft.com/net/download/core.
  5. Copy the files from the aspnet-core-3-registration-login-api\bin\Release\netcoreapp3.1\publish directory to the C:\Projects\back-end directory on the server via remote desktop.

The ASP.NET Core API files are now deployed to the server but the API isn't up and running yet, this will happen when we configure IIS shortly.


Build and Deploy the React Front-end app

Follow these steps to build the React + Redux application on your local machine and then deploy it to the Azure server.

  1. Clone the React project to a folder on your local machine with the command git clone https://github.com/cornflourblue/react-redux-registration-login-example.git. If you don't have the Git CLI installed it can be downloaded from https://git-scm.com/downloads.
  2. Navigate into the cloned directory and install all required node packages with the command npm install. If you need to install Node.js (which includes npm) it can be downloaded from https://nodejs.org/.
  3. Update the app to use real backend API:
    • Open the main React index file (/src/index.jsx) in a text editor.
    • Delete the following lines from the file to remove the fake backend that the React app uses by default: 
      // setup fake backend
import { configureFakeBackend } from './_helpers';
configureFakeBackend();
  4. Configure the path to API:
    • Open the webpack config file (/webpack.config.js) in a text editor.
    • Change the apiUrl config property to '/api' like below: 
      // global app config object
config: JSON.stringify({
    apiUrl: '/api'
})
  5. Build the React app with the command npm run build.
  6. Copy the files from the react-redux-registration-login-example\dist directory to the C:\Projects\front-end directory on the server via remote desktop.


Configure IIS to serve the React front-end and ASP.NET Core API

Since our React + ASP.NET Core application is made up of two separate projects that both need to be accessed via the same port (HTTP on port 80), we're going to configure a single site in IIS to serve the React front-end app from the base path (/), and create a child application under the site for the ASP.NET Core API that handles all requests beginning with the path /api.

Follow these steps to configure IIS for the React + ASP.NET Core full-stack app.

  1. Open IIS on the server.
  2. Remove the "Default Web Site" in Sites and "DefaultAppPool" in Application Pools.
  3. Right click the Sites folder and select "Add website".
  4. Enter site name (e.g. my-app).
  5. Set the physical path to the React app directory (C:\Projects\front-end).
  6. Leave the host name empty and click "OK".
  7. Right click the new site and select "Add Application".
  8. Enter the alias "api" (without quotes).
  9. Set the physical path to the ASP.NET Core api directory (C:\Projects\back-end).
  10. Click "OK".
  11. In Application Pools, right click the app pool for the new site and select "Basic Settings". Change the .NET CLR version to 'No Managed Code', the .NET CLR is not required by .NET Core applications.
  12. Create a file named "web.config" inside the React front-end folder (C:\Projects\front-end) and add the below configuration into it: 
    <?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="React" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_URI}" pattern="^/api/.*" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

The <rewrite> configuration creates a rewrite rule that enables refreshing of the React app without getting 404 errors by rewriting all HTTP requests to the main React index file on the base url (/), unless the request path begins with "/api" or matches a physical file path.


Test your new React + ASP.NET Core + SQL Server application running on Azure

Enter the public IP address of your Azure Windows Server in a browser to access and test your new React + ASP.NET Core + Azure SQL Server full stack application.

The public IP address can be located on the virtual machine overview page in the Microsoft Azure portal.

 


Need Some React Help?

Search fiverr for freelance React developers.


Follow me for updates

On Twitter or RSS.


When I'm not coding...

Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!


More React Posts

Show more...


Comments

Supported by
Powered by DigitalOcean - Get $200 Free Credit!
© 2024 JasonWatmore.com
Privacy Policy