I. Project background

Front-end project development of a module, online before the need to grayscale part of the user, to achieve a temporary grayscale scheme.

Current project Status:

  • A front-end project version 1.0.0
  • Back-end services version 1.0.0
  • Back-end grayscale services version 2.0.0
  • A domain name is resolved to the front-end service on port 80 and 443
  • The front end forwards static files through nginx

1. Implementation principle

  • 1. Package a front-end project version 2.0.0, upload it to the server, and deploy different ports
  • Nginx proxy static file to determine whether the current user gray scale, request different static resources
  • 3. During front-end packaging, add version number 2.0.0 to the requested interface. Request interface can judge the backend gray service accessed by version number.

2. Advantages and disadvantages

  • The implementation is simple and easy to understand
  • With Nginx you can grayscale to specific people

Disadvantages:

  • Maintain two sets of procedures, not suitable for a long time gray scheme
  • Nginx parameters cannot be too long (can be configured separately to avoid this problem)

Second, concrete practice

1. Configure a set of front-end services, deploy on port 80, and request interface version:1.0.0

Normal request domain name https://www.demo.com

2. Deploy another set of front-end services, deploy port 8080, request interface version: 2.0.0

3, such as gray scaletest.lv san.zhangPersonnel list

4. This ensures that static resources are requested separately by remote_user and back-end services are requested separately by version.

Configure nginx

server { listen 80; server_name www.demo.com; location / { if ($http_remote_user ~* (test\.lv|san.zhang)){ proxy_pass http://localhost:8081; } root /data/demo; index index.html index.htm; } location ^~/ API / {if ($http_version = "2.0.0"){# proxy to new service proxy_pass http://10.11.12.234:9001; } proxy_pass http://10.11.12.234:9002; }}Copy the code

Third, pay attention to

1, nginx configuration needs to be added to ensure that header lowercase can pass nginx

underscores_in_headers on;
Copy the code

2. Custom header is added, so the corresponding hader header is added in nginx or backend service to prevent cross-domain verification failure

Header c. header (" access-Control-allow-headers ", "content-type, remote_user, api_version")Copy the code