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

In this deployment tutorial we're going to setup a new production ready Windows 2019 web server on Microsoft Azure with IIS (Internet Information Services), then deploy a full stack Vue.js + ASP.NET Core + SQL Server application to it that supports user registration and JWT authentication.

The Vue.js 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 Azure web server and SQL database, then deploying and configuring the Vue.js front-end app and ASP.NET Core back-end api to work together. For more in-depth information about the Vue.js app or ASP.NET Core api used in this post, check out the following tutorials which cover them in detail:

• Vue.js + Vuex - User Registration and Login Tutorial & Example
• ASP.NET Core 3.1 - Simple API for Authentication, Registration and User Management

Azure Deployment Tutorial Contents

• Create a new Windows Server on Microsoft Azure
• Connect to Azure Windows Server instance via RDP
• Setup web server with IIS (Internet Information Services)
• Create Azure SQL Database
• Build and Deploy ASP.NET Core Back-end API
• Build and Deploy Vue.js Front-end app
• Configure IIS to serve API and front-end
• Test the Vue.js + ASP.NET Core + SQL Server app in a browser

Create a new Windows Server on Microsoft 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 Vue.js Front-end app

Follow these steps to build the Vue.js + Vuex application on your local machine and then deploy it to the Azure server.

1. Clone the Vue.js project to a folder on your local machine with the command git clone https://github.com/cornflourblue/vue-vuex-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 Vue.js index file (/src/index.js) in a text editor.
   • Delete the following lines from the file to remove the fake backend that the Vue.js 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 Vue.js app with the command npm run build.
6. Copy the files from the vue-vuex-registration-login-example\dist directory to the C:\Projects\front-end directory on the server via remote desktop.

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

Since our Vue.js + 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 Vue.js 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 Vue.js + 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 Vue.js 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 Vue.js 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="Vue" 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 Vue.js app without getting 404 errors by rewriting all HTTP requests to the main Vue.js index file on the base url (/), unless the request path begins with "/api" or matches a physical file path.

Test your new Vue.js + 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 Vue.js + 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.