API Gateway：前端灰階外掛程式

基礎配置（按使用者灰階）

grayKey: userid
rules:
- name: inner-user
  grayKeyValue:
  - '00000001'
  - '00000005'
- name: beta-user
  grayKeyValue:
  - '00000002'
  - '00000003'
  grayTagKey: level
  grayTagValue:
  - level3
  - level5
baseDeployment:
  version: base
grayDeployments:
  - name: beta-user
    version: gray
    enabled: true

cookie中的使用者唯一標識為 userid，當前灰階規則配置了beta-user的規則。

當滿足下面調試的時候，會使用version: gray版本，否則使用version: base版本。

• cookie中userid等於00000002或者00000003

• cookie中level等於level3或者level5的使用者

按比例灰階

grayKey: userid
rules:
- name: inner-user
  grayKeyValue:
  - '00000001'
  - '00000005'
baseDeployment:
  version: base
grayDeployments:
  - name: inner-user
    version: gray
    enabled: true
    weight: 80

總的灰階規則為100%，其中灰階版本的權重為80%，基準版本為20%。

使用者資訊存在JSON中

grayKey: appInfo
graySubKey: userId
rules:
- name: inner-user
  grayKeyValue:
  - '00000001'
  - '00000005'
- name: beta-user
  grayKeyValue:
  - '00000002'
  - '00000003'
  grayTagKey: level
  grayTagValue:
  - level3
  - level5
baseDeployment:
  version: base
grayDeployments:
  - name: beta-user
    version: gray
    enabled: true

cookie存在appInfo的JSON資料，其中包含userId欄位作為當前的唯一標識。當前灰階規則配置了beta-user的規則。 當滿足下面的調試條件時，會使用version: gray版本，否則使用version: base版本。

• cookie中userid等於00000002或者00000003

• cookie中level等於level3或者level5的使用者

使用者資訊儲存在LocalStorage

由於網關外掛程式需要識別使用者為唯一身份資訊，HTTP協議進行資訊傳輸，只能在Header中傳遞。如果使用者資訊儲存在LocalStorage，在首頁注入一段指令碼將LocalStorage中的使用者資訊設定到cookie中。

(function() {
	var grayKey = '@@X_GRAY_KEY';
	var cookies = document.cookie.split('; ').filter(function(row) {
		return row.indexOf(grayKey + '=') === 0;
	});

	try {
		if (typeof localStorage !== 'undefined' && localStorage !== null) {
			var storageValue = localStorage.getItem(grayKey);
			var cookieValue = cookies.length > 0 ? decodeURIComponent(cookies[0].split('=')[1]) : null;
			if (storageValue && storageValue.indexOf('=') < 0 && cookieValue !== storageValue) {
				document.cookie = grayKey + '=' + encodeURIComponent(storageValue) + '; path=/;';
				window.location.reload();
			}
		}
	} catch (error) {
		// xx
	}
})();

rewrite重寫配置

一般用於CDN部署情境，{version}會在運行過程中動態替換為真正的版本。

grayKey: userid
rules:
- name: inner-user
  grayKeyValue:
  - '00000001'
  - '00000005'
- name: beta-user
  grayKeyValue:
  - '00000002'
  - '00000003'
  grayTagKey: level
  grayTagValue:
  - level3
  - level5
rewrite:
  host: frontend-gray.oss-cn-shanghai-internal.aliyuncs.com
  notFoundUri: /mfe/app1/dev/404.html
  indexRouting:
    /app1: '/mfe/app1/{version}/index.html'
    /: '/mfe/app1/{version}/index.html',
  fileRouting:
    /: '/mfe/app1/{version}'
    /app1/: '/mfe/app1/{version}'
baseDeployment:
  version: base
grayDeployments:
  - name: beta-user
    version: gray
    enabled: true

在HTML首頁注入代碼

grayKey: userid
rules:
- name: inner-user
  grayKeyValue:
  - '00000001'
  - '00000005'
baseDeployment:
  version: base
grayDeployments:
  - name: beta-user
    version: gray
    enabled: true
injection:
  head: 
    - <script>console.log('Header')</script>
  body:
    first:
      - <script>console.log('hello world before')</script>
      - <script>console.log('hello world before1')</script>
    last:
      - <script>console.log('hello world after')</script>
      - <script>console.log('hello world after2')</script>

通過 injection往HTML首頁注入代碼，可以在head標籤注入代碼，也可以在body標籤的first和last位置注入代碼。