Some time ago, I met some problems related to the front-end grayscale release in the interview. Just before, the company had designed the front-end grayscale release scheme, which has been verified on several systems. Recently, I have time to sort it out, and now I also bring it out to communicate with you. In the end also left some code implementation for you, interested partners can go to view

tips

Some scaling algorithms on gray scale rules are also easier to find, panda this article is not about the algorithm, but more fit the actual scene of the grayscale scheme, for scaling algorithm partners have high requirements can search scaling algorithm related, bucket leakage, token algorithm, etc

What is grayscale publishing

Grayscale release of a function (gradually increasing the volume) to a specific online crowd to avoid the risk of full launch of new functions

A project is currently in version 1.0, but wants to update a version 1.1. There is no problem with the internal test of version 1.1, but due to the change of key functions, I want to achieve the use experience of only a part of online users, look at the feedback. At this time, some online users need to continue to use version 1.0, and some users need to use version 1.1. If the feedback of version 1.1 is so serious that the online service is affected, version 1.0 will be rolled back. The affected users are relatively small; if version 1.1 is stable, all users will be directly transferred to version 1.1. To achieve this kind of scene effect, it is grayscale publishing.

What is the grayscale rule? Gray rules can be user level, gender, regional, clients and other business information or equipment information, such as gray level set rules for the guangdong area users put q version 1.1, so even when the user to access project in guangdong hit gray rules, turned to them to version 1.1, users continue to use in other parts of the 1.0 version

Common grayscale publishing schemes

Gray schemes are all kinds of, both diverse and contrast, there is no best, only the most suitable for their own business scenarios, here to introduce several schemes, so that we can make a comparison

1. Simple NgXIN shunting (recommended index: ⭐️)

Itself only rely on Nginx to do triage is not grayscale release, but accidentally talked to a friend about their small company SAO operation implementation, lai said to me to write in, said they have tested

  • Two pieces of code, deployed separately
  • Nginx-weighted polling to control access percentages (provided there is no identity in the client cookie)
  • The front end introduced the SDK (panda took a look at the source code, in fact, is to store a random cookie does not repeat (or just a large probability does not repeat it) logo
  • On secondary access, nginx returns the corresponding version by assigning a unique identifier to the cookie

Advantages: Simple and does not involve back-end operations disadvantages:

  1. Can simply rely on nGINx weighted polling percentage to control the flow, all rely on the front end, can not be combined with the business to do streaming
  2. Weak control, in the gray version of the problem, you can only modify the nginx configuration to let the user back version
  3. Poor problem collection ability, can only wait for user feedback
  4. After the client cookie has been cleaned up, the user needs to re-enter through Nginx’s weighted polling and may be assigned to a different version than the last assignment

2. Nginx + Lua + redis (recommended index: ⭐️⭐️)

Tips: This scheme may be because panda didn’t find good information or didn’t have a deep understanding of this scheme. Panda feels that there is a lack of flexibility and it is difficult to make too much gray logic judgment in combination with complex business. If there are big men who have used this scheme, please kindly comment.

  • When a user request reaches the front-end proxy service nginx, the embedded Lua module parses the Lua script code in the Nginx configuration file
  • Lua variable obtains the IP address of the client to query whether there is such a value in the Redis cache. If there is a returned value, perform the grayscale version logic; otherwise, perform the current production environment version

Nginx + Lua + Redis scheme online information is also more, you can understand, although the panda on the set of scheme understanding is not thorough, from the whole link length theory this scheme efficiency should be relatively high, so still give you posted some articles reference article 1 reference article 2 reference article 3

3. Service end rendering traffic (recommended index: ⭐️⭐️ port)

Server rendering shunt scheme, in fact, I think better to make a scheme, here I first do some process brief, the follow-up will be separate to a piece of some introduction

  • The two pieces of code packaged at the front end are deployed separately to the server (for example, a single-page application; for multi-page applications, some other details need to be handled separately)
  • Add the version in the background (essentially asking the server to read a single page of index.html)
  • The client accesses the server, and the server stores the corresponding version of index.html in Redis according to the gray rule set-cookie
  • When the secondary access passes through the server, if there is cookie and redis already has the corresponding version information, the system returns directly. Otherwise, the grayscale process is restarted

Advantages: flexible, strong controllability, can be combined with the business system to do gray scale rules disadvantages: almost a shuttle back end, pressure on the server, need to do more related optimization, multi-page application is more trouble

4. Judgment of client comments (difficult to maintain) (Recommended index: Push maomao, not recommended)

The client through annotation conditional compilation, to do grayscale, in fact, according to the grayscale rules corresponding to the code level to make a judgment to show what version of the function, this scheme is also used by companies, grayscale function but more, extremely difficult to maintain, not recommended, here is more than introduced

5. Nginx + Server + Redis + [front-end SDK] (recommended index: ⭐️⭐️ college)

Overview of the overall plan

  • We’ll call the online stable version stable, and the new feature release beta
  • The developers started nginx services for stable and beta versions respectively, and started a layer of entry Nginx services at the operations layer as forwarding

  • The client accesses the project through the domain name, requests the gray rule, matches the gray rule, and sets the cookie for the client as the identity, and stores the user identity in Redis, and redirects the user to the specified version
  • When the gray rule interface requests, if there is cookie, the corresponding version will be returned directly; if there is no cookie, redis will be searched; if there is corresponding information in Redis, the corresponding version will be returned directly; if there is no gray rule identification process
  • Front-end SDK functions: used to control the timing of initiating gray rule requests, callback operations and other business operations The grayscale function needs to be triggered at a specific time in the project. Click a button or enter a page. For example, some applications will pop up a popup window, telling the user that there is an internal test version and whether they need to experience it

Schematic design Diagram

Noun code

  • Stable: Official production environment (version 1.0)
  • Beta: Grayscale version (version 1.1)
  • Uuid: in the code demonstration, there is no account system, no login behavior, so through the URL with uUID as the user ID to go through the process

Concrete implementation (simple demo)

  1. Create two SEPARATE HTML, let’s say two projects, beta is the grayscale version of the new feature, and stable is the current production environment version
  2. Introduce a front-end SDK (front-end SDK is not required, depending on the business scenario)
  3. The front end makes a request to get version information (this can be done through configuration if an SDK is introduced)

4. Back-end service logic:

Background implementation code

// This is just a demonstration, get the user ID directly from the link, the actual scenario would be to get the user session to identify the user related information
const uuid = ctx.query.uuid; 
// Can enter the grayscale version of the UUID, stored in the database
const uuids = ['123'.'456'.'789'] 
// The user ID stored in redis. If redis is cleared, it means that the version id of the user is cancelled. Here, the user is simply stored in array
const redisUuids = [{id: '789'.version: 'beta'}, {id: '333'.version: 'stable'}];
Copy the code

If uUID = 123, 456, or 789, then redis is already in beta with uUID = 789 and 333

  1. Effect:

Gray problem processing operation

  • Q: If there is a serious problem with the grayscale version after it goes online, an emergency rollback is required. A: Directly close the grayscale function in the background, clear redis, and end the user’s login session (in fact, clear client cookies).
  • Q: You need to specify a user to enter a version A: Modify the redis information in the background to end the user login session
  • Q: Gray scale is enabled only when a page in the project is specified. A: Relevant logic can be processed in the front-end SDK, and the relevant page path can be used as a list for front-end recognition (SDK is best introduced dynamically, SDK is placed on CDN)

code

The back end of the company is to use Java to achieve, panda here in order to facilitate you to better understand the whole process, also use node to give you a realization, interested partners can go directly to see the code github, the general design idea is the same

Note: For the convenience of running the demo, the panda is composed by docker compose. If docker and Docker compose are available, you can run the example directly by command

docker-compose build

docker-compose up -d

localhost:8000
Copy the code

Recent situation

Recently is in a transition period, leaving the company during the period of leave, the panda in the current company is a front group leader, in a week after departure, first began to do the management work related transition, after finish management transition, was having sex quickly, ha ha ha ha, in the face of some people’s attitudes are beginning to change, the heart is cool cool, pull pull Had waited in line for plan to do some optimization of construction and project team to share, may not need too worry about pandas, turn off the previous blogs, to study in the nuggets here also try to update some articles, there are some the regulation on the state of mind, also more idea to return to the technology as well as to organize themselves, Next do a good job before leaving the technical project handover on the show, thank you for giving the panda “like” support of the beautiful boys and girls.

push


Help friends send a push: Miha tour, Shanghai coordinates, interested partners squeak \color{red}{color{red}{color{red}{color{red}{color{red}{color{red}{color{red}{color{red}{

conclusion

Solution case, it is good to choose a suitable, in the demo code panda is simply wrote some logic code, not really into the logic of the project, specific adjustment or in combination with the actual project scene, front-end SDK and part of the Java code has not released the panda, because it has been in the company, the inconvenience, We can write according to the general idea, if you have any questions, welcome to discuss with panda. If there is something wrong in the article or there is a better scheme, we hope you will give us your advice