毛毛的梦 - CDN https://www.maodream.com/tag/CDN/ zh-CN Sat, 13 Jan 2024 23:53:00 +0800 Sat, 13 Jan 2024 23:53:00 +0800 给常联系页面加了个英文 https://www.maodream.com/archives/129/ https://www.maodream.com/archives/129/ Sat, 13 Jan 2024 23:53:00 +0800 maomao   因为自己有时候可能会和一些外国友人交流,所以挺早之前就想给自己的常联系页面加一个英语,但是一直没去行动。我认识一个来自埃及的朋友,之前经常和他一起打游戏啥的,但是三个多月前,他突然就没任何动静了。
lrc881h0.png
lrc88l9z.png
我问了很久,他也没回复。终于半个月前(这半个月没怎么上线),他回复了我:
lrc8c6js.png
  这次经历教会了我们,好朋友之间还是要留下足够多的联系方式。刚好最近不是很忙,就抽出时间给我的联系页加了一个英文的选项:( https://maao.cc/global )
  我选择是将中文和英文分成两个单独的子目录,访问网站首页时,自动检测用户的语言,跳转到对应的语言目录。实现起来非常简单,只需要15行代码(不完全遵守规范的话,还可以更少):

<!DOCTYPE html>
<html>
<head>
  <title>maao.cc</title>
  <script>
    var userLang = navigator.language || navigator.userLanguage;

    if (userLang === 'zh-CN') {
      window.location.href = '/cn';
    } else {
      window.location.href = '/global';
    }
  </script>
</head>
</html>

  这样,访问首页就会自动判断,将用户引导至合适的语言。当用户的语言是 zh-CN (简体中文)时,就自动跳转到https://maao.cc/cn 是其他语言时,就跳转到https://maao.cc/global
lrc8wax4.png

  当然,如果识别出错或者只是想看看另一种语言的页面的话,我也做了一个区域选择器(Region Selector 有点模仿任天堂官网那意思): https://maao.cc/regionselector 因为一般来说大部分简体中文访问者不会打开这个页面,所以在这里我是把英文放在第一个。
lrc8r5l7.png

  同时,我也将常联系站(maao.cc)的境外流量接入了上一篇文章提到的Amazon CloudFront(详见 本站的境外网络访问优化记录 - 毛毛的梦 ),现在全球连接速度都嘎嘎快
lrc9k6d8.png
lrc9jlr1.png

]]>
2 https://www.maodream.com/archives/129/#comments https://www.maodream.com/feed/tag/CDN/
本站的境外网络访问优化记录 https://www.maodream.com/archives/104/ https://www.maodream.com/archives/104/ Sat, 16 Dec 2023 21:39:00 +0800 maomao   毛毛的梦是我的一个个人博客网站,由于我是中国人,网站主要访客在中国大陆,所以网站服务器也自然是在国内。同时为了提升国内各地区访问者的体验,我使用了阿里云的DCDN全站加速服务,通过分布在各地的缓存服务器来加快连接速度,减轻源服务器压力,同时还能在一定程度上避免网络攻击。经过优化后,大陆地区的访问速度确实快多了,但是由于阿里云全站加速服务是按流量收费的,而境外的流量费和大陆的不一致,境外要比大陆贵得多(如图)
lq7yh3sz.png
  一般来说境外的攻击比国内要更多,再加上成本原因,最终还是选择只加速大陆地区。设置只加速大陆地区后,境外访问者将会被解析到位于上海的服务器,并且算作国内流量。这样的好处是能大大降低成本,但同时坏处也显而易见,境外地区的访问者就不会有非常优秀的体验。
  虽然我网站的境外访客不算多,但是也并不是完全没有。为了照顾到他们的体验,我还是决定使用境外CDN服务。但阿里云的肯定不行,主要原因还是攻击多并且流量费太贵。不过好在我的域名使用阿里云的DNS云解析服务,可以通过简单的配置来实现让不同地区的访问者被解析到不同的服务器。这意味着我可以让国内的访问者使用阿里云的全站加速服务,而让境外的访问者被引导至另一个服务商。
  接下来就是寻找一个合适的境外CDN服务提供商。我首先想到的是Akamai,作为全球最大、历史最久的的分布式计算平台之一,Akamai有着非常不错的口碑,并且一直为IBM、Adobe等大公司提供稳定的服务。然而经过我的一些了解,Akamai主要方向似乎是帮助团队和公司,对个人开发者并不是非常友好。
  我又去找了亚马逊AWS(Amazon Web Services),亚马逊有CDN业务,他们叫做Amazon CloudFront。Amazon CloudFront有永久免费套餐,每月有1TB的免费出站流量,这对于我这样一个小站来说是完完全全足够了的。
lq7z2krj.png
  我先注册了AWS账号,选择Amazon CloudFront免费套餐,AWS要求我提供银行卡信息来绑定自动扣款。我刚好有一张中信银行的Visa白金借记卡(持卡人是我本人,因为是借记卡,所以未成年人也可以办),但是激活的时候,柜台的工作人员和我说因为国家反诈要求,这种新办的外币卡需要等待一段时间才能完全可用。我之前也尝试过绑定Paypal和Apple Pay,但是都失败了,说明在解锁之前确实不行。不过我还是抱着试一试的心态,填入了我的银行卡信息:
lq7zhpo3.png
  到了下一步,似乎是通过验证了?接下来要求我验证我的手机号:
lq7zj5uc.png
  验证通过后,到了选择支持计划的页面,我可以选择支付一笔费用升级到更高级的支持计划,会有专业人员来帮助我解决我的问题。但是对于我这种个人开发者,还是选择自食其力:
lq7zjv4n.png
  点击完成注册后,提示我成功激活了我的AWS账户:
lq7zmhwz.png
  看来这张还没有解锁的卡也能通过验证(我还尝试过使用这张卡开通Cloudflare for Saas,也成功了)
  进入Amazon CloudFront控制台,点击“创建 CloudFront 分配”
lq7zqgj9.png
  先将我的DIgicert SSL安全证书导入到美国东部(弗吉尼亚北部)区域(us-east-1)
lq8005rb.png
  创建完CloudFront分配后,我得到了CNAME解析域名。接下来登录到阿里云云解析DNS配置页面,点击添加记录,主机记录填写www,解析请求来源选择境外(即向除中国内地以外的其他国家和地区,返回设置的记录值),记录值填入刚得到的分配域名:
lq80lz3t.png
  稍等片刻,使用工具检测解析,确认解析设置生效:
lq80qlf2.png
  接下来,请求我「身在境外的朋友」帮忙打开我的网站,看看是否有效:
lq80umw7.png
  提示网站使用了不受支持的协议,看来是某个地方配置有问题。我搜索了一下,发现似乎并没有人和我遇到同样的错误。于是我便开始了漫长的摸索...
  后来我通过搜索,找到了亚马逊云服务官方在知乎发布的一篇文章:《 技术干货 | 手把手教你排查 Amazon CloudFront 常见配置问题 》,在这篇文章里,提到了一个问题:“中国区 CloudFront 直接访问CloudFront 生成的 url,返回 403”,在这里给出的原因是:“中国区访问 CF 分发的时候,只能用客户自己的已经备过案的域名访问,不可以用 http://xxx.cloudfront.cn 的域名访问”:
lq81tw8u.png
  这段话看得我云里雾里,我百思不得其解,经过了一段时间的“头脑风暴”后,我得出了这样一个结论:上文提到的CloudFront分配给我的域名“d342janx8v6j2q.cloudfront.net”,是相当于分配给我的一个子域名... 我作为国际AWS用户,可以使用这个域名来建立网站,并让访客用这个域名来访问我的网站。我注意到,点击分配域名旁的复制按钮,复制下来的是“https://d342janx8v6j2q.cloudfront.net”,而不是“d342janx8v6j2q.cloudfront.net”:
lq822hpu.png
  如果这个域名只是用于CNAME解析,那么不应该将https前缀也复制进来。并且,直接访问“https://d342janx8v6j2q.cloudfront.net”,能显示出403页面。这说明这个“分配域名”不止是用于CNAME解析。于是我尝试知乎原文的解决方法,将www.maodream.com添加进“备用域名”:
lq829j24.png
  应用更改后,果然能连接上了:
lq82az2p.png
  于是我将AWS控制台切换到了英文,发现“分配域名”的原文是“Distribution domain name”:
lq82clr9.png
  这里的“Distribution”翻译到中文确实是“分配”,但是Distribution是CloudFront里的一个概念,有点像是“实例”,如果直接翻译成分配,很容易让人理解成是分配的域名。看来AWS的翻译质量还是不咋地,索性直接留在英文界面。
  虽然现在网站是能连接上了,但并没有显示出正常的网页,而是得到了一个来自CloudFront的403错误,大意是CloudFront的边缘服务器无法连接到源站。这就麻烦了,因为可能引起这种问题的原因有很多。我搜索了一下,似乎还是没有人遇到同样的问题,看来又得自己慢慢摸索了...
  我尝试多刷新几次,然后去查看源服务器上的网站日志,发现根本没有新记录。这说明CloudFront的服务器与我的服务器根本就没有建立连接,于是去看源站配置。源站域名这个地方,因为不能填IP地址,我就填的www.maodream.com(我以为是回源host)。但是我又突然想起来,它不能填IP地址,但是可以填CNAME解析的域名啊。
lq83f9ww.png
  于是我把绑定我源服务器IP的域名填了进去,保存。等一段时间生效后,再次打开网站,居然就稀里糊涂地成功了:
lq83g4df.png
  后来我才意识到,这里不是回源host,填写的是源站信息,而不是源站域名(当时中文界面,这里叫做“源域”,解释是“选择 AWS 源,或者输入源的域名。”,看来这翻译质量是真不咋地)。而且,我的www.maodream.com这个域名在海外是解析到CloudFront的,相当于CloudFront自己把自己当源服务器访问,那肯定是有问题的。
lq83kcyh.png
  现在,本站境外加速服务就由Amazon CloudFront提供,成功实现了国内和境外“一片绿”的美好景象:
lq83lv2a.png
lq83ndwg.png
  境外区域也得到加速后,来自全球的访问者就都能得到一个好的访问体验了。那这次境外网络访问优化就算圆满成功了!!

]]>
10 https://www.maodream.com/archives/104/#comments https://www.maodream.com/feed/tag/CDN/