关于javascript:线上多域名实战

本文博主给大家分享线上多域名实战，当线上主域名不可用的状况下，启用备用域名实现网站高可用保障。

网站的高可用性始终是网站运维的重中之重。一旦网站宕机，不仅会造成微小的经济损失，也会重大影响用户体验。备份域名就是一种实现网站高可用的重要伎俩。通过备份域名，能够在主域名不可拜访时疾速切换域名，保障网站失常运行。

博主上个星期，线上我的项目忽然呈现了大量用户无奈关上我的项目网站，技术支持分割技术人员（也就是博主我）在用户电脑上复现了这一状况。

通过博主排查，发现在客户电脑拜访主域名时，会呈现连贯超时，通过 curl 进一步剖析连贯详情，举例如下：

C:\Users\16697>curl -v www.wayn.com

* Uses proxy env variable http_proxy == 'http://11.22.11.22:4780'
*   Trying 11.22.11.22:4780...

发现线上主域名在用户电脑上返回的 CDN 节点 11.22.11.22 存在拜访不通的状况。博主便跟运维沟通 CDN 节点不通的问题，运维回复是 CDN 节点不通是无奈防止的，要看 CDN 厂商对于用户的笼罩状况，倡议线上我的项目应用多域名，并且每个域名应用不同的 CDN 厂商，最大限度防止主备域名都不可用。

OK，失去的运维的意见，咱们开始着手做多域名实现计划。

实现域名高可用解决方案，首先须要筹备一到两条与主域名性能和模式类似的备份域名。如下

 主域名
www.wayn.com

备用域名一
bak1.wayn.com

备用域名二
bak2.wayn.com

购买备份域名后，须要留神一下两点：

须要在域名服务商那设置 DNS 记录，将主域名和备份域名指向同一个 IP 地址。同时也须要为两个域名设置雷同的 CDN 减速和平安证书，保障用户拜访体验统一。
将备份域名的网站配置（nginx 配置文件）与主域名保持一致。确保应用备份域名也能够拜访咱们的网站。

这里咱们介绍一下通过 JavaScript 代码来实现网站的主备域名如何进行切换。

JavaScript 实现域名切换的流程如下:

在页面启动时，首先发动对主域名的申请，判断其是否可能失常响应。如果启动时主域名不可拜访，就会拜访备份域名。针对每个备用域名每隔一秒发送三次申请，如果都能拜访胜利则认为备用域名可用。代码如下：

// ES6 的模块引入形式
import fetch from 'node-fetch'

const domain = 'https://www.wayn111.com'
const bakDomains = ['http://bak1.wayn.com', 'http://baidu.com']

masterDomainCheck()

// 主域名检测，如果不可用会查看备用域名是否可用
async function masterDomainCheck() {
  try {await fetch(domain)
 console.log('主域名启用胜利')
  } catch (e) {// console.log(e)
 try {await getBakDomain()
   console.log('备用域名可用')
 } catch (e) {console.log('备用域名也不可用')
 }
  }
}

// 拜访备用域名，返回其中可用的一个域名
async function getBakDomain() {const apiPromiseList = []
  for (let i = 0; i < bakDomains.length; i++) {
 apiPromiseList.push(new Promise((resolve, reject) => {bakDomainCheck(bakDomains[i], 3, resolve, reject)
   })
 )
  }
  return await Promise.any([...apiPromiseList])
}

// 域名检测逻辑
async function bakDomainCheck(url, count, resolve, reject) {console.log(count)
  if (count > 0) {
 try {await fetch(url)
   bakDomainCheck(url, --count, resolve, reject)
 } catch (e) {console.log('e')
   reject(e)
 }
  } else {console.log(`bak domain：${url} access success`)
 resolve({url, count})
  }
}

以上代码通过博主实测，大家感兴趣能够将代码拷贝在本地跑一遍。

如果主域名启动时失常，则开始定时监测主域名的可拜访性。每 30 秒发动一次申请，判断主域名的 HTTP 状态码是否为 200。

// 主域名失常, 开始定时监测
setInterval(() => {fetch('https://www.wayn111.com')
 .then(res => {if (res.status !== 200) {switchDomain() 
   }
 })  
}, 30000)

一旦监测到主域名故障，开始调用 JavaScript 函数，找到页面所有蕴含主域名的链接，并将其替换为备份域名。

// 开始替换页面内域名为备份域名
function switchDomain() {let links = document.querySelectorAll('a')
  for (let i=0; i<links.length; i++) {if (links[i].href.indexOf('https://www.wayn111.com') > -1) {links[i].href = links[i].href.replace('https://www.wayn111.com'
           , 'https://bak1.wayn.com')
 }
  }
}

持续定时监测主域名，在主域名恢复正常时，调用 JavaScript 函数将备份域名的链接替换回主域名。

// 定时查看主域名故障复原, 一旦复原再切回主域名  
setInterval(() => {fetch('https://www.wayn111.com')
 .then(res => {if (res.status === 200) {switchDomainBack()
   }
 })  
}, 5000)

function switchDomainBack() {let links = document.querySelectorAll('a')
  for (let i=0; i<links.length; i++) {if (links[i].href.indexOf('https://bak1.wayn.com') > -1) {links[i].href = links[i].href.replace('https://bak1.wayn.com'
           , 'https://www.wayn111.com')
 }
  }
}

这样通过 JavaScript 检测域名状态与主动切换，能够最大限度缩小域名切换造成的拜访中断工夫，确保网站高可用。

心愿大家通过这个案例，能对线上用多域名来实现高可用网站有一个较为全面的认知。网站过于依赖某繁多域名存在潜在危险，备份域名的引入次要是解决多数场景下用户拜访不通咱们网站的问题。

最初感激大家浏览，喜爱的敌人能够点赞加关注，你的反对将是我的更新能源😘。

公众号【waynblog】每周更新技术干货、线上我的项目实战经验、高效开发工具等。

关于javascript:线上多域名实战

一、前情回顾

二、购买备用域名

三、主备域名切换实战