实践教学 - 用Fastly CDN加速静态网站

相比 CloudFlare 而言，Fastly CDN 的体验对个人用户不是非常友好，如版本控制

如下教程教你如何加速一个简单的静态网站

Prerequisite

• Fastly CDN Developer 帐户
• 自有域名一个并已接入到 DNS 解析服务商
• 具有公网 IP 的服务器一台

创建CDN服务

在控制台中创建新的 CDN 服务较为简单，点击 "Create Service" 进入向导

进入向导后可以 "Skip and go to service configuration" 跳过向导，如果你非常熟悉 Fastly CDN

编辑服务名称

第一项 "Service name" 即编辑你的服务名称，起一个好听的名字或容易记住的名字即可。例如 Test Service

新增域名

第二项 "Domain"，简而言之填写你需要使用 Fastly CDN 服务加速的域名。例如 test.microcharon.com

新增源站

第三项 "Add an origin" 添加指向源站的 IP 或指向源站的域名，不能带端口，此处向导默认设置为 443 端口，后续可在 "Service configuration" 中配置。建议使用指向源站的域名，方便后续统一在 DNS 解析服务商那里操作，例如 origin.microcharon.com，其 A/AAAA 记录为指向源站的 IP

推荐设置处默认即可，设置好检查无误后 "Activate"

配置CDN服务

进入所创建的 CDN 服务，可以看到总览，你应该特别注意到这个已经是第 5 个版本的配置了

是的，Fastly CDN 每次修改配置都需要克隆一个新的版本，新增版本以配置服务，当前的版本就运行并锁定服务，历史版本同样也锁定不可编辑。好处是，若配置不当可以回滚到适当的历史版本中再次调试

最开始创建 CDN 服务时，系统会自动生成第一个版本 Version 1

在导航右侧选择 "Service configuration" 来进行配置服务操作

配置源域

为了方便展示，此处只选择不开启 TLS，使用 80 端口

Address 处 填写之前的 origin.microcharon.com

Enable TLS? 选择 "No, do not enable TLS. Instead connect using port" 并配置为 80 端口，其它配置不变默认即可

其余杂项配置

在未启用 TLS 下，不要先配置 "Force TLS and enable HSTS" 一项。以下仅为参考配置

在 "Content" 选项卡中可以开启 Brotil 压缩

启用TLS

左侧菜单中选择 "Security" --> "TLS Management" --> "Domains/Subscriptions" --> "Secure another domain" 以开始添加新的域名。这里选择用 Fastly 自家的证书，其余配置默认即可

然后验证域名所有权，需要添加一条 CNAME 记录以完成 acme 质询验证

在 DNS 解析服务商中添加对应的 CNAME 记录，此处我用的是双栈模式，即 "Fastly TLS with IPv6 support"，详情请见 Working with CNAME records and your DNS provider | Fastly Help Guides

_acme-challenge.test.microcharon.com. IN CNAME vsp2gyavutp2p07epw.fastly-validations.com.
test.microcharon.com. IN CNAME dualstack.t.sni.global.fastly.net.

添加完记录后，等待 Fastly 配置（一般 1-2 分钟），issued 后可查看订阅详情

配置并测试网站

服务器上放置静态网站资源，NGINX Vhost 参考配置如下

server
    {
        listen 80;
        listen [::]:80;
        server_name test.microcharon.com ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/test.microcharon.com;

        #include rewrite/none.conf;
        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }

#        location / {
#            return 301 https://$host$request_uri;
#        }

        access_log  /home/wwwlogs/test.microcharon.com.log;
    }

此处可以用 Fastly 提供的测试域名，亦可直接测试原网站

文中测试网址：Frontier - Microcharon Dev

参考资料

1. Introduction | Fastly Documentation

2. Getting started with Fastly | Fastly Documentation

Working with hosts | Fastly Help Guides

Working with CNAME records and your DNS provider | Fastly Help Guides