DEV Community: Gayan Fonseka

Microsoft Full Stack on Docker to AWS EKS - 01

Gayan Fonseka — Fri, 30 Apr 2021 11:24:23 +0000

I've been working on Microsoft technologies for quite some time and a few years back Angular and React replaced the front-end of most applications, while the back-end REST APIs and the MS SQL Server remained. With the introduction of Blazor, it became possible to build client-side front-ends and I wanted to give it a try. With Visual Studio it is very easy to add docker support to a project but NOT to a Blazor project. When developing it is easy if you have all the components running locally and this is an attempt to show how to dockerize and run all components of the application which includes front-end, REST services, and the database locally, and then to have them running in an AWS EKS cluster.

For this, I am going with my favorite WineShop sample. I have a Catalog REST API Service that fetches the wine catalog from the database and the Blazor front-end will display it to the user. When I run,
docker-compose up
and browse to http://localhost:5000 I am able to see the wine catalog as follows.

In case you want to try this immediately, visit my Github repository and download the code. Make sure to be in the branch "005-AddFrontend" when you run the command. Shown below is an image from the docker desktop,

Now that you have a better idea about the different services that are running, let me explain how to get these components containerized. I'll start with the front-end and move further.

Blazor Front-end
There are a few things you need to know about Blazor before creating the front-end, remember I was trying to run this like React on the client-side. There are three types of Blazor projects that can be created with the Visual Studio templates,
a) Client-Side WebAssembly - Standalone
b) Client-Side WebAssembly - ASP.Net Core Hosted
c) Server-Side
We need to create the first type of project and for that make sure not to select any of the options provided. Simply click next when you see the following dialog.

I have no intention of explaining the whole code base, but you'll see when you check the program.cs file of WineWeb project that I am calling Catalog service running in http://localhost:3000 to get the catalog.

builder.Services.AddHttpClient<IWineDataService, WineDataService>(client => client.BaseAddress = new Uri("http://localhost:3000/"));

The service WineDataService.cs returns a deserialized list of Wine objects which will then be consumed by the WineList page. The deserialization code,

public async Task<IEnumerable<Wine>> GetAllWines() { return await JsonSerializer.DeserializeAsync<IEnumerable<Wine>> (await _httpClient.GetStreamAsync($"api/Wine"), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true }); }

The page you saw above is WineList.razor and it has a partial class in WineList.cs which fetches data from the service at the initialization,

protected async override Task OnInitializedAsync() { //Use below two lines of code when loading local data //InitializeWines(); //- Mentioned below //return base.OnInitializedAsync(); Wines = (await WineDataService.GetAllWines()).ToList(); }

Containerizing the Blazor App
If you right-click on any other project, you will get the option to add docker support but not for Blazor projects. Hence, let's add a file named Dokcerfile and add the following content to it.

Here you are building the Blazor app on an existing image. I came across build issues and had to switch to mcr.microsoft.com/dotnet/sdk:5.0-alpine for the build to succeed. You too may have to use the alpine version. The client-side app will have to be served by a web server and for that purpose, you will need Nginx, and the nginx:alpine image could be used, where the build files are copied to "web" folder. Nginx will need to have a config file that we are copying as part of the process from the local project folder. Make sure to maintain the unix line end character in the nginx.conf file as any change could give errors. The file is as follows,

Now we are good with the Blazor front-end app. In the coming articles, I'll go through the rest of the project. Feel free to explore Blazor and the ecosystem. Thanks for reading.

Add & Configure Resources- CloudFormation for Infrastructure set up-03

Gayan Fonseka — Tue, 06 Apr 2021 14:10:49 +0000

In the previous articles, we looked at an ideal infrastructure set up to host our application. Then we went on to create the VPC and the subnets that were discussed, using CloudFormation. Just having the subnets won't do, we had to create the security groups and the IAM roles that would provide the required permissions and open the ports for the communication. All the above steps were discussed in the previous two articles and the links are given below,

Get rid of old habits- Use CloudFormation for infrastructure set up -01

Configuring Security Groups/IAM roles - CloudFormation for infrastructure set up -02

Now that we have most of the network set up it is time to add some compute resources and have them configured. The whole idea of this exercise is to provide a set of temples that you can easily modify and use to set up your own infrastructure and compute resources and not to detail CloudFormation basics.

What do we have here? You may want to decide whether you are adding resources for the Production environment or something else like QA or Dev. Depending on the environment the size of your resources may vary and I have showcased how that can be handled by providing the option to select the environment (dev, qa, prod) before the execution of the template.

Also, I hope you can remember me suggesting that it is better to use the SSM agent to connect to the servers as opposed to the bastion host. I have taken the necessary steps to install the SSM agent and to enable it as you can see in the code. Assuming that we'll be using a PHP application, the necessary steps are taken to install the prerequisites.

Having the compute resources in an autoscaling group is key to handling the scaling requirements of the systems. In this sample setup, I have taken the necessary steps to place the resources in autoscaling groups. It's time to share the code that does all this and it is as follows.

Now you are good to go ahead and run the CloudFormation (yaml) files in the three articles to set up the infrastructure suggested by me. It would be easier to get these into three files before execution. You can easily modify this to include additional resources, change the configuration of the resources, or both.

Also, there is a VSCode plug-in that you can use while doing templates named CloudFomration Snippets. This can come in handy with auto-completion.

All the other resources such as API Gateway, VpcLink, API endpoints and etc can be configured with CloudFormation Templates. This would be the next step for you to try. Hope these three articles were helpful and thanks a lot for reading.

Configuring Security Groups/IAM Roles - CloudFormation for infrastructure set up -02

Gayan Fonseka — Tue, 23 Mar 2021 12:31:26 +0000

This is a continuation of the previous article where I set up the Virtual Private Network required to host the application using CloudFormation. Feel free to read the need and how to set up the VPC at the below link,

Get rid of old habits- Use CloudFormation for infrastructure set up -01

Now that we have set up various subnets as Public and Private subnets we need to control incoming and outgoing traffic to ensure that our application is secured and able to cater to the user requests. For this purpose, we will have to enable a certain type of traffic through certain ports. E.g. TCP over port 5000 for the application, TCP over port 3306 for MySQL. AWS has provided this facility through security groups that act as a virtual firewall for our EC2 instances that will host our application. Given below is the CloudFormation YAML for security group configuration.

As you can see, I have created security groups enabling traffic for EC2 instances in the app subnets, database subnet, public load balancer, VPC link, and the private load balancer. This basically covers all the areas for which we need to enable traffic.

As the next step, we will have to export some of these configurations as output values to be used in the coming stacks. I'll be doing that in the below code.

I am not going into details as most of these CloudFormation code snippets are self-explanatory. The description section has a brief on what each part does.

There are two ways to gain access to the EC2 instances in a private subnet. One of them is using the bastion host and the other is to use Systems Manager (SSM) provided by AWS. I prefer to use SSM and you can read more on this at "Toward a bastion less world". The reason I mentioned this is, in the upcoming section where I share the code to configure the IAM roles, you'll see me using policies that are related to SSM and I don't want you to be confused.

Now we have the VPC, subnets, the required security groups, and IAM roles configured using CloudFormation to host our applications. In the next article, I'll be adding some compute resources to each of these subnets so you can host your application. Also, in an article to follow, I'll share how to run these templates and get the infrastructure setup in AWS along with the complete code hosted in Github. Thanks for reading.

Get rid of old habits- Use CloudFormation for infrastructure set up -01

Gayan Fonseka — Sat, 06 Mar 2021 18:40:05 +0000

Yes, I too had the habit of creating the required infrastructure manually. Yes, we gave up the idea of changing databases manually a long time ago for good reasons and switched to migrations. With so many resources, policies, roles getting added and having to replicate them in three to four environments, why still stuck with the same old habits when it is as easy as writing a DB migration script. In case you haven't tried yet, I want to share a common scenario, where I'll guide you through setting up the infrastructure to host a service-based application running in multiple availability zones in secure subnets with auto-scaling enabled to provide high availability and scalability. In case you are wondering why I am writing this, I saw some really bad practices recently, and I think they should change and I am doing my bit to help anyone in need.

Sample Setup

I'll base my experience to write about an ideal setup. If you want to host a business application that you've written, most probably it will consist of two different sections namely applications for internal staff to run the business and client-facing applications / APIs which enable customer interaction.
Let's assume that the application for the internal staff is developed using a framework such as asp.net zero, serenity.io, or Laravel. Every bounded context can be hosted separately in the InternalApp Subnet with a public application load balancer handling the traffic.
The APIs that will be consumed by the web applications and the mobile applications better be secured using Cognito user pools and identity pools. When security for the APIs are provided using Cognito at API Gateway level it is not possible to use a public application load balancer, instead, it will have to be a private application load balancer. When the load balancer is private it will have to be connected to the API Gateway using a VPC link, so that the APIs you developed can be exposed in a secure manner. The deployment architecture diagram is as follows.

Our goal is to use CloudFormation templates to automate the deployment of the above infrastructure. I am not hoping to explain what CloudFormation templates are and their basics, hence providing the link to Amazon documentation.Link

The first step would be to create the VPC and it can be done with the following code. You may decide how many private IPs you need, here I am going for the maximum with a CIDR block of 10.0.0.0/16.

The next step would be the creation of subnets in the two availability zones. The expected outcome can be shown diagrammatically as follows.

As the next step, we can create other resources such as internet gateway, nat gateway and etc. We could also do the route table configuration. Once the route table configuration is done we may create the associations between subnets and route tables. The code for the above tasks is as follows,

In the future stacks, we'll be needing the resources we created above and for that purpose, we'll have to output these resources with names that could be referenced later.

We are done creating the resources but there is some more to be done such as security groups configuration, adding IAM roles, adding compute resources and etc. Due to the length of the article, I'll keep them for another day but you can expect them to arrive soon. Thanks for reading.