How to Build an ASP.NET Core C# Kubernetes Microservice Architecture with Angular on Local Docker Desktop using Ingress
Tags: kubernetes, dotnet, angular, webdev
Published: 2021-04-10 18:51:43


In this guide, you will create a **raw microservice-based cloud architecture**. It uses **.NET Core with REST-APIs** in the backend services and **Angular** as the frontend. All **components are dockerized** and **Kubernetes orchestrates** the containers. The application is **exposed via an Ingress controller**.

> Kubernetes **runs in a local environment** with docker desktop. It is **similar to a cloud environment**. You can **use it for developing and testing**. There are **no extra costs**. You can always **easily deploy it later to the cloud**.

*Overview diagram of the components:*


![](https://cdn-images-1.medium.com/max/2000/1*HpXKDFXrMWduTglmXWDFBg.png)

## Contents

1. Build the ASP.NET Core REST-API Backend

2. Create the Angular Frontend App

3. Dockerize the .NET Core API and the Angular App 

4. Deploy the Containers to Kubernetes on Docker Desktop

5. Final Thoughts and Outlook

------


## 1. Build the ASP.NET Core REST-API Backend

**Install [Visual Studio Community](https://visualstudio.microsoft.com/en/vs/community/)** (it’s free) with the ASP.NET and web development workload. 

Create an ASP.NET Core 5.0 Web API project and call it “DemoApi”. Activate Docker and use the “Linux” setting. Disable HTTPS:

![](https://cdn-images-1.medium.com/max/2000/1*CLDD1YGTeyM25sWWXuRxPg.png)

Add a new controller “DemoController”. It just returns “Hello World”:

{% gist https://gist.github.com/Chriz76/bacaaab8be0a42f779be8fe95370a4bb
%}

Enable CORS for the Angular app on port 4200 (develop) and 80:

{% gist https://gist.github.com/Chriz76/21c6c27e39382f725bff81eedc7c6c64
%}

Edit launchsettings.json and change the URL of the “DemoApi” configuration to Port 80. Then choose the DemoApi configuration and start it:

![](https://cdn-images-1.medium.com/max/2000/1*bpZ2rJnEGx8SeRxyTehTHQ.png)

Test it in the browser:

![](https://cdn-images-1.medium.com/max/2000/1*DEKRomRgrH_guE1WjQ2JoA.png)

------

## 2. Create the Angular Frontend App

**Download and install [Node.js/NPM](https://nodejs.org/en/download/).**

**Create the folder C:\dev\demo** and open a command prompt.

**Install Angular** (I used Angular 9 when writing this guide):

    C:\dev\demo>npm install -g @angular/cli

**Create the app:**

    C:\dev\demo>ng new DemoApp

*Further reading: [Understanding Angular and Creating Your First Application](https://javascript.plainenglish.io/understanding-angular-and-creating-your-first-application-4b81b666f7b4) by gravity well (Rob Tomlin)*

------

### Call the REST-API

Adjust the code in C:\dev\demo\DemoApp\src\app

Add the HttpClientModule to **app.module.ts**:

{% gist https://gist.github.com/Chriz76/5cdb21961b54c3bdd2d27711c7011931
%}

Call the REST-API in **app.component.ts**:

{% gist https://gist.github.com/Chriz76/24ab8aa42d4dcf80d7512a422cecaa29
%}

Display the loaded data in **app.component.html**:

{% gist https://gist.github.com/Chriz76/df1869a2d65bb92c80ee02df39acc6a5
%}

### Test the app

Make sure the .NET Core API is running. Start the Angular app and open it in your browser to see if everything is working:

    C:\dev\demo\DemoApp>ng serve

It should load and display the data “Hello World”:

![](https://cdn-images-1.medium.com/max/2000/1*aDfnaJJr97GeWsJrGNCdNg.png)

------


## 3. Dockerize the .NET Core API and the Angular App

I will show you two different ways to create and run a docker image. For the .NET Core API, you will use the UI. For the Angular App the command line.

Install [Docker Desktop for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows)

### Dockerize the .NET Core API

In the Visual Studio DemoApi project rename the file “Dockerfile” in the Project-Explorer to “dockerfile” (first character lowercase). Then right-click the dockerfile and select “Create Docker Image”.

Check the build output if everything worked:

![](https://cdn-images-1.medium.com/max/2000/1*EQiT3Ze5QPoX-YrfEFHR7Q.png)

Stop your API project in Visual Studio if it is still running, because docker and Visual Studio can’t bind to port 80 at the same time.

Run the “latest” “demoapi” image in the Docker Desktop UI and map port 80:

![](https://cdn-images-1.medium.com/max/3116/1*W_q-lx_MU-M7foBOR51hYw.png)

![](https://cdn-images-1.medium.com/max/2000/1*uqUAphA6n5hIPvLQwAqi8g.png)

*Further reading: [How to deploy a .NET 5 API in a Kubernetes cluster](https://faun.pub/how-to-deploy-a-net-5-api-in-a-kubernetes-cluster-53212af6a0e2) by Ivan Porta*

### Dockerize the Angular App

**Create the file C:\dev\demo\DemoApp\dockerfile**
> Make sure the file “dockerfile” has no file extension

This will use NGINX to serve the app:

{% gist https://gist.github.com/Chriz76/328cb07ca21f210dd32914906bd9fd92
%}

**Create the file “.dockerignore”** (with a dot at the beginning):

{% gist https://gist.github.com/Chriz76/0a28ea4ac12383e0e30bf4a953cd289d
%}

**Open a command prompt and build the docker image** (the dot at the end is important):

    C:\dev\demo\DemoApp>docker build -t demoapp .

**Stop your Angular app** if it still running. Use the command line (the whole command in one line) to start the app in the container and **publish it on port 4200**:

    C:\dev\demo\DemoApp>docker run --publish 4200:80 --name demoappcontainer demoapp

*Further reading: [Build and run Angular application in a Docker container](https://wkrzywiec.medium.com/build-and-run-angular-application-in-a-docker-container-b65dbbc50be8#) by Wojciech Krzywiec*

### Test Both Containers 

You can list your containers (your container IDs and timestamps will be different):

![](https://cdn-images-1.medium.com/max/2350/1*R3iLOr2nwwZVOgMbZyBHLQ.png)

**Start the app** in the browser:

![](https://cdn-images-1.medium.com/max/2000/1*aDfnaJJr97GeWsJrGNCdNg.png)

**Stop both containers** so the ports are not blocked for the next step of this guide:

    C:\dev\demo\DemoApp>docker stop demoappcontainer
    C:\dev\demo\DemoApp>docker stop demoapi

------


## 4. Deploy to Kubernetes on Docker Desktop

**Enable Kubernetes in Docker Desktop:**

![](https://cdn-images-1.medium.com/max/2744/1*IzjJfH56yoJGrxUQru1fSA.png)

**Install the NGINX Ingress controller** (in one line on the command line):

    C:\dev\demo>kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v0.41.2/deploy/static/provider/cloud/deploy.yaml

*See the [NGINX Ingress Installation Guide](https://kubernetes.github.io/ingress-nginx/deploy/) for details*

**Create C:\dev\demo\kubernetes.yaml:**

{% gist https://gist.github.com/Chriz76/e933a6761b03c9b81b46a644c7307d7b
%}

**Apply the yaml:**

    C:\dev\demo>kubectl apply -f kubernetes.yaml

This will create two Kubernetes “Deployments” and for each deployment a “Service”. Both services are then exposed via an Ingress on port 80.

*See the [Kubernetes documentation](https://kubernetes.io/docs/home/) for details*

The first deployment uses the DemoAPI image and two replicas to show how it is possible to scale. The second deployment uses a single replica of the DemoApp. The Ingress routes to the service based on the path prefix:

![](https://cdn-images-1.medium.com/max/2000/1*E5XwWdOIlvk2tm50Kmyf7Q.png)

### Test the Deployments

“get deployments” shows the deployments and number of pods:

![](https://cdn-images-1.medium.com/max/2000/1*60srpHN1Fee5vqkbgGVhUw.png)

Open your browser on port 80(!) and test your Kubernetes deployments:

![](https://cdn-images-1.medium.com/max/2000/1*wqEW7Mj7LtSvuG9ZDWq8UA.png)

*Further reading: [How to deploy a .NET 5 API in a Kubernetes cluster](https://faun.pub/how-to-deploy-a-net-5-api-in-a-kubernetes-cluster-53212af6a0e2) by Ivan Porta*

------


## 5. Final Thoughts and Outlook

You created the **working basis for a microservice-based cloud architecture**. But **there is still a lot missing**. 

See my follow-up posts [how to add a MySql database and MongoDB replica set to your architecture](https://dev.to/christianzink/databases-in-a-kubernetes-angular-net-core-microservice-architecture-22jc) and [how to use events for inter-microservice communication](https://dev.to/christianzink/how-to-build-an-event-driven-asp-net-core-microservice-architecture-4fnh).

I will **show you more in further posts**: Kubernetes secrets, security aspects like SSL, communication, logging, debugging, CI/CD, Helm charts, (code) quality, (auto) scaling and self-healing, etc.

**See my other stories how to:**

* [Sign-In with Google in Angular and use JWT based .NET Core API Authentication with Asymmetrically (RSA) Signed Tokens](https://dev.to/christianzink/how-to-sign-in-with-google-in-angular-and-use-jwt-based-net-core-api-authentication-rsa-1anl)

* [Use NSwag to Autogenerate a TypeScript Client to Access a .NET Core service API and use OpenAPI/Swagger to describe the API](https://dev.to/christianzink/how-to-jwt-authenticate-with-angular-to-an-asp-net-core-api-openapi-swagger-using-nswag-typescript-54fl)

**Please contact me if you have any questions, ideas, or suggestions.**