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:
Contents
Build the ASP.NET Core REST-API Backend
Create the Angular Frontend App
Dockerize the .NET Core API and the Angular App
Deploy the Containers to Kubernetes on Docker Desktop
Final Thoughts and Outlook
1. Build the ASP.NET Core REST-API Backend
Install Visual Studio 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:
Add a new controller “DemoController”. It just returns “Hello World”:
Enable CORS for the Angular app on port 4200 (develop) and 80:
Edit launchsettings.json and change the URL of the “DemoApi” configuration to Port 80. Then choose the DemoApi configuration and start it:
Test it in the browser:
2. Create the Angular Frontend App
Download and install Node.js/NPM.
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 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:
Call the REST-API in app.component.ts:
Display the loaded data in app.component.html:
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”:
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
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:
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:
Further reading: How to deploy a .NET 5 API in a Kubernetes cluster 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:
Create the file “.dockerignore” (with a dot at the beginning):
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 by Wojciech Krzywiec
Test Both Containers
You can list your containers (your container IDs and timestamps will be different):
Start the app in the browser:
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:
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 for details
Create C:\dev\demo\kubernetes.yaml:
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 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:
Test the Deployments
“get deployments” shows the deployments and number of pods:
Open your browser on port 80(!) and test your Kubernetes deployments:
Further reading: How to deploy a .NET 5 API in a Kubernetes cluster 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 and how to use events for inter-microservice communication.
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:
Please contact me if you have any questions, ideas, or suggestions.
Top comments (2)
Hello, Christian,
I'm trying to repeat steps described above, but I cannot deploy to k8s, after applying .yaml file I constantly getting ImagePullBackOff status for a pod. image pull error:
Events:
Type Reason Age From Message
Normal Scheduled 39s default-scheduler Successfully assigned default/pocdemo-pod-deployment-69fd9c777d-vnsks to docker-desktop
Normal SandboxChanged 37s kubelet Pod sandbox changed, it will be killed and re-created.
Normal Pulling 21s (x2 over 38s) kubelet Pulling image "pocdemo-pod:latest"
Warning Failed 21s (x2 over 37s) kubelet Failed to pull image "pocdemo-pod:latest": rpc error: code = Unknown desc = Error response from daemon: pull access denied for pocdemo-pod, repository does not exist or may require 'docker login': denied: requested access to the resource is denied
Warning Failed 21s (x2 over 37s) kubelet Error: ErrImagePull
Normal BackOff 9s (x4 over 35s) kubelet Back-off pulling image "pocdemo-pod:latest"
Warning Failed 9s (x4 over 35s) kubelet Error: ImagePullBackOff
So, pull access denied. Why? This is the local docker repository and local cluster. I can login and logout from docker cmd. What could be a reason for this problem?
Try adding 'imagePullPolicy: IfNotPresent' to deployment if you are running things locally.