Migrate On-Prem Web app (.NET Core, Angular and Postgres) – to AWS Serverless

Introduction

I’ve previously written about various AWS services and how using serverless offerings results in great development experience, reduce management overhead and applications can benefit from various out-of-the-box features such as high-availability, performance and cost optimization.

Today, we will see a simple workflow to port an existing .NET core application which was designed to run on-premise to AWS Serverless and managed services without doing a lot of application changes.

Most of the skills required to do this task are already covered in my previous articles and this exercise kind of glue those together.

Application Overview

For this exercise, I will be using an excising application which, which I developed for my book Build Accounting Application Using .NET Core, Angular and Entity-Framework.

This application is written around Accounting domain and application has a simple structure i.e. a UI (Angular.js), API (.NET Core) and Database (Postgres):

Currently, both the UI (angular application) and .NET Core API are setup as a single unit and delivered by .NET Core built-in webserver capabilities.

We’ll take this application and update it to make it ready to deploy on AWS.

I will also take the very simple approach and focus of this iteration is move the app to AWS without much complication and later iteration will focus on more automation.

Target Design

Following are target AWS services for the application:

LayerAWS ServicesNotes
UI (Angular)CloudFront + S3(accounting.awsclouddemos.com)
Web API (.NET Core)API Gateway + AWS Lambda
Database (EF+Postgres)RDS (Postgres)

Here is the diagram showing the components and their arrangement:

I’ve covered all of these topics individually in earlier posts, so refer to earlier posts if you need more information.

Initial Steps (Getting the Source Code)

First step, we will get the source code for the deployment. As mentioned earlier, I will be reusing an existing application. You can also use the same code or you can also use your own application code and follow along, principles will be same.

So, I created a new git repository and copied the web-application source code to it, so all the changes will be made to this repo:

Here is how the solution looks like in visual studio:

(currently Angular application is delivered from wwwroot folder, angular build command puts the output to this folder).

Deploying the Angular Application to S3

Lets navigate to web folder and install the frontend dependencies and build the angular application:

npm install packages

npm install

build the angular app

npm run build -prod -aot

this will produce the output in the wwwroot folder. At this point, we can simply take the content of this folder and copy it to S3 bucket of our choice which we can configure as static website:

Here is how the S3 bucket looks like after copying the angular build output:

Note: I used CloudFormation template to create the bucket and then used AWS CLI to copy the angular files:

aws s3 sync . s3://accounting.awsclouddemos.com --acl public-read

You can check following articles for details

and here is the bucket URL:

and if we now visit the bucket, following UI shows up:

It is currently just the UI, no wiring with backend API yet, but its a start.

CloudFront Distribution

Without going into much details of how and why we want to use CloudFront, lets setup the distribution:

Here is the distribution created and we can now visit distribution URL:

Now, we are accessing the application via cloudfront and we also have https enabled.

Route-53 Setup

Again, I will be reusing the learning from earlier post on Route53 to configure a route for our application. You can read about the setup on this link.

So, I simply edited the CloudFront distribution and provided the alternate domain name:

With that application can be accessed via the URL: https://accounting.awsclouddemos.com

You can now check different UI routes. Angular frontend wiring is still missing and if you inspect the console, you will notice errors there:

We do not have a backend yet which will connect to a database and provide the data to be displayed to the UI. Following picture shows the components (red border) we have covered so far:

We will pause here for UI work and now lets setup data and API layers and then we will come back to UI and do the final integration.

Database Migration

First we need a cloud database and we will use AWS RDS (postgres) managed database service. Here is the link to article AWS Relational Database Service (RDS) – PostgreSQL in Cloud and this will show you how to setup an RDS instance.

I’ve used Entity Framework ORM for database operations in the application. We can generate SQL script for all database changes using following command:

dotnet ef migrations script --project AccountingBook.Data `
            --startup-project AccountingBook.Web --idempotent --output ../AWS/accountingBookDB.sql

and this command will generate the SQL script needed for application database:

We can now simply take this script and execute it on AWS RDS instance.

I am using Azure Data Studio for executing the SQL to RDS instance. Here is an article if you want to learn about ADS more.

Create database

First lets create the database:

with database created, next lets execute the script which we generated earlier using EF command:

once script execution is completed, you can see that database tables and other objects have been created along with some seed data:

So at this point the database part is done and here is the updated diagram:

Next, lets focus on the API layer.

Migrate .NET Core API to AWS Lambda + API Gateway

I have covered the basics of .NET Core on AWS on this article. Which shows the use of AWS SDK and how we can use a visual studio template to build such API which has necessary wiring done for AWS lambda deployment.

Now, we have two simple options, first, we can create a new API project using the visual studio template for AWS serverless and then move our current application code to this new project. The second option is to update the existing project with artifacts needed for AWS serverless wiring.

These processes are covered in details on various articles online, so I will not go into much details. What I simply did is that I created a new project with serverless template and then copied files to my existing AccountingBook project and updated the packages and references as needed:

packages install:

and following picture shows the files/packages updated in target application (AccountingBook):

These changes will make .NET Core WebAPI project integrated with AWS Lambda and AWS API Gateway.

also, lets update the appsettings.json file with connection string information for RDS as follows:

Here is the updated diagram with these changes integrated:

We can now publish the API to AWS lambda:

and this will result in an API Gateway integrated with Lambda Function for our .NET Core API:

We can now test REST calls to the API:

Integrating FrontEnd:

This part is simple, we have only one place to change in the Angular code which deals with REST calls to backend. Following picture shows that update:

Also, we need to update the Startup.cs file in Web API for CORS Settings:

at this point, all the components are integrated:

Now we can republish the frontend and backend changes and this time if we visit the application, it works as expected:

our on-prem web application is now deployed to a highly available, performant and cost optimized AWS infrastructure.

You can visit the application on the following URL:

https://accounting.awsclouddemos.com/

The source-code for this application is available on this git repository.

Related Articles

Here is the list of related articles, for detailed information on various services used for this excercise:

Summary

In this post, we migrated an existing .NET Core, Angular and PostgreSQL based web application to AWS serverless and managed RDS cloud services.

I used combination of ways to create resources, deploy application code and do the testing and a lot of the setup part can be automated. I will cover those topics in a separate post.

In general, it was not that difficult and doesn’t require to do a lot of code changes to run the application on AWS cloud. AWS SDK for .NET makes this process a lot easier.

Let me know if you have come comments or questions. Till next time, Happy Coding.

My Recent Books

1 thought on “Migrate On-Prem Web app (.NET Core, Angular and Postgres) – to AWS Serverless”

Comments are closed.