Angular 7, .NET Core Web API with EF core,MSSQL server, VsCode, Azure DevOps CI/CD, Azure Container Service, Google Kubernetes Engine, Terraform
This is a sample project showing the steps taken to develop a simple 3 tier application using Angular 7, .NET Core Web API with EF core and MSSQL server using open Open Source development tools (VsCode) using a Windows 10 Professional laptop. Azure DevOps is used to automate the CI/CD process and deploy to both Azure Kubernetes Service and Goolge Kubernetes Engine using Terraform
- Make sure you have Windows 10 Pro or Enterprise (Docker for Windows require Hyper-V)
- Install Docker for Windows at https://docs.docker.com/docker-for-windows/install/
- Make sure Docker is running in Linux mode
- install latest angular-cli using
npm i -g @angular/cli
- create new folder called
Docker
somewhere on your computer - inside
Docker
folder create new Angular App by usingng new angular-ui
command - inside the
angular-ui
folder, add new filenginx.conf
andDockerfile
- create new docker image by running
docker build --rm -f "angular-ui\Dockerfile" -t nvhoanganh1909/docker-demo-ui:latest angular-ui
command from the root folder. Note:nvhoanganh1909
is your Docker Hub username.docker-demo-ui
is the name of the image:latest
is the tag or the version number of the image.
- check to make sure image is created by running
docker images
command - run the newly created image by running
docker run -d --rm -p 4200:80 nvhoanganh1909/docker-demo-ui:latest
where - open http://localhost:4200 , you should see the Angular app is running
Note:
- view the running docker container by running
docker ps
- stop the running container by running
docker container stop 0f
where0f
is the first 2 characters of the Container ID - run
docker system prune --volumes -f
to remove all unused images and containers
- login to https://hub.docker.com/
- search for
microsoft SQL linux
- select https://hub.docker.com/r/microsoft/mssql-server-linux/
- check instructions on how to use this image
- now pull down the latest version of this image by running
docker pull microsoft/mssql-server-linux:latest
- start the container using SQLExpress mode by running
docker run -e 'ACCEPT_EULA=Y' -e 'SA_PASSWORD=Password1' -e 'MSSQL_PID=Express' -p 1433:1433 -d microsoft/mssql-server-linux:latest
(changeSA_PASSWORD
to something else) - you now can connect to this SQL server using SQL Management Studio
- from the root folder (
Docker
), create new folder calleddotnetcore-api
usingmkdir dotnetcore-webapi
- cd into the
dotnetcore-webapi
and rundotnet new webapi
- edit
dotnetcore-webapi.csproj
and add<DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
element under<TargetFramework>netcoreapp2.1</TargetFramework>
element. - in the dotnetcore-webapi folder create
Dockerfile
and.dockerignore
file - Build the docker image by running
docker build --rm -f "dotnetcore-webapi\Dockerfile" -t nvhoanganh1909/docker-demo-user-api:latest dotnetcore-webapi
from the root folder - now run the webapi by running
docker run -d -p 8080:80 nvhoanganh1909/docker-demo-user-api
- open http://localhost:8080/api/values and you should be able to see the response from the API
- from the root folder (
Docker
), create new folder calledapi-gateway
- cd into the
api-gateway
and rundotnet new webapi
- add
ocelot
nuget package - modify
Startup.cs
andProgram.cs
accordingly
NOTE:
- Ocelot uses information stored in
configuration.json
to route requests to the correct API. During development the configuration.json file underapi-gateway\configuration
- When we deploy the app, we will use Volume mapping to replace this file with the correct config file
In this step, we will add a simple User management functionality to our system using ASP .NET Identity.
- Add ASP .NET Identity using SQL See Instructions
- Add Data Seeder to create 1 user called admin
- Create
UsersController.cs
which expose CRUD REST endpoints at http://localhost/api/user - Modify Angular UI which call the api gateway and return the list of users (calling http://localhost/api/u/users)
- Now if you run all 3 apps at the same time (Web API + Ocelot API Gateway + Angular) you should be the app running
- go to the root level (
Docker
folder) and create new file calleddocker-compose.yml
. This file describe how containers are started and stopped - run
docker-compose up
to run the app - run
docker-compose down
to shut down the app
- Login to docker hub by running
docker login -u nvhoanganh1909
- Tag the local image
docker tag f16 nvhoanganh1909/docker-demo-ui:latest
wheref16
is the first 3 characters of your image - Push the newly tagged image
docker push nvhoanganh1909/docker-demo-ui:latest
- Login to https://hub.docker.com/ and make sure you can see the new docker image
- From Docker for Windows Settings, turn on Kubernetes option
- Verify Kubenetes is running by running
kubectl cluster-info
command. You should see something like this
Kubernetes master is running at https://localhost:6445
Heapster is running at https://localhost:6445/api/v1/namespaces/kube-system/services/heapster/proxy
KubeDNS is running at https://localhost:6445/api/v1/namespaces/kube-system/services/kube-dns:dns/proxy
monitoring-grafana is running at https://localhost:6445/api/v1/namespaces/kube-system/services/monitoring-grafana/proxy
monitoring-influxdb is running at https://localhost:6445/api/v1/namespaces/kube-system/services/monitoring-influxdb/proxy
- Create new K8s namespace (k8s-namespace) by running
kubectl create namespace dev
- Register user context by running
kubectl config set-context dev --namespace=dev --cluster=docker-for-desktop-cluster --user=docker-for-desktop
- Switch to dev context
kubectl config use-context dev
- Create ConfigMap
kubectl.exe create configmap apigwconfig --from-file=./apiconfigs/configuration.json
- Create resources defined in the
k8s.yml
indev
context by runningkubectl apply -f k8s.yml --record
- Run
kubectl get all
ande make sure all services and pods are running - Browse http://localhost:30004/ and make sure you can see the app running
- At anytime you can run
kubectl delete daemonsets,replicasets,services,deployments,pods,rc --all --namespace=dev
to remove all created resources in the dev namespace - Install
nginx ingress
by runningkubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/master/deploy/mandatory.yaml
then runkubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/master/deploy/provider/cloud-generic.yaml
Notes:
- get current rollout update status
kubectl.exe rollout status deployments webui-deployment
- get Deployment history
kubectl.exe rollout history deployments webui-deployment
- check current deployment details
kubectl.exe describe deploy webui-deployment
- to roll back
kubectl.exe rollout undo deployment webui-deployment --to-revision=1
- run Bash command inside a pod
kubectl.exe exec apigw-pod -i -t -- bash