Angular front-end UI for containerized distributed logging component ExceptionLess

write in front


With the popularity of the microservice architecture, the log also needs to be completed by a dedicated distributed log component. Our project uses ExceptionLessthis component, which is separated from the front and back ends; in this article, we will practice ExceptionLessthe containerized front end, And include nginxa host for it, forming a self-contained environment that can run independently, so that when we use k8s cluster, we can use this out -of-the-box image, arbitrary scaling, rolling update, on-demand expansion, etc. Wait.

ExceptionLess UIIt is a pure front-end developed with Angular Web UI. First, we need to install the environment ( git、npm、bower、grunt etc.), please refer to the detailed steps . After the installation is complete, use gruntPublish the project, such a purely static front-end website is generated; then all the static files just generated are tar.gzcompressed into archive files in the format, eg exceptionless.ui.gkb.tar.gz.

Construct mirror


principle

An image of a Linux version is essentially a Linux system with a certain environment. For example, an image is an image nginx:1.13.12of the installed nginx 1.13.12Linux system and then packaged. After understanding the nature of the image, we can construct an nginximage of any version with the specified configuration from scratch (in fact, we are going to do this next).

In the same way, now we need to host the pure front-end containing static files to one web服务器, which is the same as the traditional method, install one first web服务器, and then use it as the host of static resources. The difference is that when we use the idea of ​​containerization to do this, we Dockerfilecan arrange all the processes into it, it's that simple.

Example description

I've k8sdeployed an nginx 1.13.12environment using, and now enter the container in interactive mode:

kubectl -n k8s-ecoysystem-apps exec -it nginx-deployment-6c45fc49cb-zdlfb /bin/bash

See, this is an installed nginx 1.13.12linux environment.

How to write Dockerfile?


guide

In fact, when we installed nginxit, it has already configured an example of static resources, as follows:

So we can access the following interface through the browser:

This interface is the effect of static files /usr/share/nginx/html/index.htmlbeing rendered by the browser.

Orchestration steps

Arrange the steps of deploying static resources into Dockerfile(this step can also be built from scratch FROM SCRATCH, all roads lead to Rome, everyone goes down and fights by themselves)

FROM nginx:1.13.12
MAINTAINER justmine
WORKDIR /usr/share/nginx/html
ADD ["exceptionless.ui.tar.gz","."]
  • FROM nginx:1.13.12 build from a start with nginx:1.13.12environmentlinux
  • MAINTAINER justmine Description Author
  • WORKDIR /usr/share/nginx/html sets the working directory
  • ADD ["exceptionless.ui.tar.gz","."] Copy static resources to nginxthe directory where the host provides static resources to the outside world. This can also be done using copycommands, but we need to unzip the archive in advance.

    Note: The WORKDIR working directory refers to the working directory of the current command execution, so ADDthe second parameter can be directly replaced by a dot (.), which is relatively convenient to operate. However ADD, the working directory of the first parameter has nothing to do with this. It refers to docker buildthe working directory passed at the time, so it should be noted that if the archive file cannot be found in the passed directory, an error will be reported in the last step of generating the image Forbidden path outside of the build context.

Dockerfile generates an image and uploads it to DockerHub

docker build -t justmine/nginx-hosted-exceptionless-ui:1.0 .
docker push justmine/nginx-hosted-exceptionless-ui:1.0

Do pay attention to docker buildthe last point (.), which is the context directory of the archive.

k8s cluster


deployment.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-hosted-exceptionless-ui
  namespace: k8s-ecoysystem-apps
spec:
  replicas: 1
  selector:
    matchLabels:
      app: nginx-hosted-exceptionless-ui
  template:
    metadata:
      labels:
        app: nginx-hosted-exceptionless-ui
    spec:
      containers:
      - image: justmine/nginx-hosted-exceptionless-ui:1.0
        imagePullPolicy: Always
        name: nginx-hosted-exceptionless-ui
        ports:
        - containerPort: 80
          protocol: TCP

service.yml

apiVersion: v1
kind: Service
metadata:
  name: nginx-hosted-exceptionless-ui
  namespace: k8s-ecoysystem-apps
spec:
  type: NodePort
  selector:
    app: nginx-hosted-exceptionless-ui
  ports:
  - nodePort: 32003
    port: 80
    targetPort: 80

Browser (firefox) to view the effect

log

Summarize

This article analyzes the nature of mirroring, the construction principle of mirroring, and guides you step by step to containerize an out-of-the-box pure front-end UI , which is also a typical example of containerized front-end after the microservice architecture implements the separation of front-end and back-end. It can be said that after containerization, you can do whatever you want with k8s, which really makes k8s a great tool for the microservice application platform. This is also a case that I have implemented on the road of containerized microservices. I hope to share it with you, and I hope to share the whole thought process with you.

Project reference: https://github.com/justmine66/k8s.ecoysystem.apps/tree/master/k8s/ExceptionLess

postscript


After the last detailed explanation of k8s zero-downtime rolling release of microservices , some people in the community hope to write canary deployment quickly this week . I’m sorry here. Since our own microservice project also needs to be integrated with k8s, we need to solve the actual situation first. Some urgent problems encountered at work. I will take time to complete the canary deployment practice later , please continue to pay attention.

如果你觉得本篇文章对您有帮助的话,感谢您的【推荐】,这将成为我继续写作的动力
如果你对 kubernets 和 dotnet 感兴趣的话可以关注我,我会定期的在博客分享我的学习心得

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326973263&siteId=291194637
Recommended