概述
本文概述CDN配置后支持手机和PC端的分别访问。
问题描述
网站是代码适配的网站（非响应式），PC端和移动端的URL是一致的，通过后端判断用户的UA来给用户推送不同前端模板。需要设置CDN对不同的UA做不同的缓存，实现手机访问网站跳转到Wap页面，PC端访问跳转到PC端的页面。比如nginx配置如下：
location / {
// 默认 PC 端
root /usr/local/website/web;
# 判断 UA，访问移动端
if ( $http_user_agent ~* "(Android|webOS|iPhone|iPad|BlackBerry)" ){
root /usr/local/website/mobile;
}
index index.html index.htm;
}
问题原因
因为通过UserAgent头识别用户的客户端，然后返回不同的内容给不同的UA用户。但是CDN缓存并不会区分UA，只会区分URL，所以相同URL缓存的内容是一致的，无论UA是什么样。
解决方案
CDN是支持对不同的UA，设置不同的缓存，这个是根据vary头来控制的。vary头里面的字段一般是头信息的字段，表示CDN会检测这个头信息。如果内容不一致就缓存不同的内容，命中时也一样，必须头信息一致才会缓存。这个vary头需要在源站添加。在Nginx中增加如下信息。
add_header Vary "Accept-Encoding, User-Agent";
但最好不要出现这种情况，PC 端和移动端如果是两套代码，建议用两个域名，理由如下
nginx 判断是否移动端容易出错- 对缓存不友好
- 如果UA实在过多，缓存失效的情况也会多。
参考资料：
- https://help.aliyun.com/document_detail/86967.html
- https://github.com/shfshanyue/Daily-Question/issues/330