foreword
Are you annoyed by the inconsistency of tools when developing and deploying your projects, and the patchwork is not easy to manage? If there is a tool that can contract you to deploy a front-end and back-end separation project from the code, and a platform that provides one-stop service from front-end, back-end to application release, would you be tempted?
--I can!
Code Engineering/Project Introduction
Code base address:
Front-end code link: https://gitlab.com/cloudospml/ai-demo-vue.git
Back-end code link: https://gitlab.com/cloudospml/ai-demo-tensorflow.git
front end
Technology stack: vue;
Core logic: upload pictures, send picture information to the background, and use the data returned by the interface to render picture recognition results.
Backend-AI module
Technology stack: python TensorFlow Flask;
Core logic: process the image into a numpy array and hand it over to the model for calculation.
Publish applications on CloudOS
create project
Since the front-end and back-end separation involves multiple services, a microservice project is created here. 
draw architecture diagram
In CloudOS, the architecture diagram is the core resource of the entire project. By dragging and dropping components, the information of each service in the entire application and the relationship between them are described. Finally, the platform will deploy the application in the cluster based on this diagram.
components
① code source
For the first time to add a component of code type in the architecture diagram, the account information of the code library needs to be bound:
After the binding is complete, select the code warehouse where the component source code is located, and select the default branch:
②Technology stack/compilation and construction
The code components need to be mirrored to complete the deployment. The general technology stack provided by the platform can be selected for mirror construction. The specific information of the technology stack can be viewed in [Project Settings] - [Compile and Build]:
You can also maintain the Dockerfile in the code project by yourself according to the actual needs of the project. When selecting the technology stack, select [Dockerfile in source] and provide the real path of the Dockerfile under the project, and the platform will build the image accordingly.
Taking the python project provided above as an example, the Dockerfile is under the root path of the project, so the path can be filled in as Dockerfile.
Image construction of the python project: select the appropriate base image, download the module according to the dependent file, and run the main program.
component configuration
Declare port: Add the port information exposed by the service (very important: the port information filled in is consistent with the one declared in the code project). Taking the python project as an example, the port of the flask service is configured as 8001 in the code, then in the component You need to add the same port information in . At the same time, if this port needs to provide access to other services outside the application, you need to turn on the domain name switch and bind the port to an accessible domain name address.
For example: if the front-end vue service needs to provide an address for users to access through a browser, this switch needs to be turned on:
access between components
The endpoint on the top of the component represents the address output after the component is launched, and this value can be assigned to the environment variable of other components through the connection.
Take the front-end service request for the back-end java address as an example: From the code, it can be seen that the back-end address prefix of the front-end nginx request is obtained from the system environment variable AI_SERVER_HOST.
Therefore, add environment variables and bind them for services that need to obtain addresses when connecting.
You can also see the binding relationship in the component's sidebar details.
tip: Click the [Layout] button in the lower right corner of the canvas to get a neat architecture diagram.
According to the above steps, add all microservice components, and finally click Save Architecture Diagram.
publish application
① Release configuration
Click the Publish button in the upper right corner of the architecture diagram.
Enter the publishing configuration page: select the code branch for the component to deploy the service; you need to provide the port to access the domain name to fill in the domain name information, and finally click Publish.
release process
During the release process of the application, or view the relevant information at the [Operation and Maintenance Monitoring] entry of the application card.
On this page, you can see the steps and log information of each component. Among them: the build log is the log of the whole process of code pulling, compiling and building the image, the startup log is the log output by the console before the service is ready, and the startup event is the deployment and scheduling information of the service in the k8s cluster.
application access
Access effect after successful deployment:
Upload a picture containing a portrait (the model is our siege lion, please do not use it for commercial use):
app update
When there is a problem with the release of the application, the configuration of the architecture diagram is changed, or the code is updated, the application can be updated through [Application Upgrade].
If the configuration of the architecture diagram changes, modify the architecture diagram and save it, and select the corresponding architecture diagram when updating.
Select the components that need to be updated this time. The left side is the architecture diagram of the updated application, and the right side is the actual service status of the current application.
When updating and upgrading, you can adjust the related configuration of the application and the related configuration of the services participating in this update on the release configuration interface.
Take the demo project as an example:
Modify the confidence threshold of the image recognition result:
Only the code is changed, and there is no need to re-select the architecture diagram when the application is updated, and select the components that need to be recompiled after the source code changes.
Publish on the release configuration page, this update will obtain the latest code in the specified branch of the code source to compile and build, and regenerate the image for deployment.
After the update is successful, check the effect. After the confidence threshold is modified to 0.8, only objects higher than 0.8 are recognized:
The above is how to release an ai object detection/intelligent image recognition with front and back ends separated from the source code through CloudOS, and update the whole process of the application through the platform.
Part of the reference of the source code model: https://github.com/AIZOOTech/flask-object-detection, thanks for the power of open source~
Cloud native digital innovation platform
CloudOS (https://www.cloudtogo.cn/product-CloudOS) includes cloud-native application visual architecture design, online collaborative coding development, cloud-native-based API management and interface testing, multi-cloud delivery and application scheduling, grayscale release, and pipeline , application operation and maintenance, service governance, multi-container cluster management, cloud-side integrated business delivery and other capabilities. The goal is to improve the agility of the application architecture, build an agile and innovative application R&D environment for enterprises, realize the visualization and agility of application R&D, and standardize the technology platform, greatly accelerate the iterative speed of software development, and improve the flexibility and utilization of IT resources. Support the migration of traditional applications to the cloud, help enterprise customers accelerate the realization of business value, and assist traditional application R&D teams to efficiently complete cloud-native application innovation.
CloudOS generally includes four parts:
-
Cloud-native application factory: realize all-round support for cloud-native application research and development, integrate cloud-native DevOps capabilities, and provide application project management, architecture design, online development, online testing, multi-cloud deployment, visual operation and maintenance, test environment management, R&D Kanban, Pipeline and other capabilities. Enterprise public capability components in the cloud-native application store can be used for application development.
-
Cloud-native application store: Realize the precipitation and management of enterprise cloud-native assets, including enterprise public business capability components, message middleware, database middleware, etc. The enterprise public business capability components developed by the application factory can be put on the cloud native application store.
-
Cloud native application management: realize the deployment of enterprise digital applications, business scheduling management, business operation and maintenance, and service governance capabilities. The K8S
cluster/container platform realizes the operation support of digital applications, including automatic scaling, multiple copies, etc. This platform can be docked and integrated with other manufacturers' container platforms, or Xingyun can provide
a version based on open source K8S. -
Interfacing with IaaS resources: This product has no special requirements for the IaaS resource layer, which can be public cloud IaaS resources or enterprise private cloud resources, and can be physical machines or virtual machines.