Media Buy之Landing Page的资源文件CDN部署方案

前言

最早期的时候,我是跟随《40天》教程的方法,把资源文件(img/css/js)也放到CloudFront里面,第二个月CDN的费用扣了我60多刀,当时跑的Pop。切换到Push为主之后好多了,但是我也持续的在寻找其他的部署方案。

后来有人给我推荐了fast.io,结合GitHub使用,把资源文件统一放到fast.io,LP的加载速度提升了,CDN的费用也降低了。当时fast.io是每个月100GB的免费流量,十月份的时候收到官方的邮件要开始收费了。于是又继续寻找新的替代方案,了解到fast.io也是用的CloudFlare的CDN,于是往这方向上去寻找资料。

找到资料后我就开始配置部署,并且进行小范围测试,证实方案的可靠性,现在我正在使用的LP已全部迁移至新方案,已稳定运行一个月左右,感觉比fast.io更为稳定可控。(fast.io抽过一次风导致我的css文件无法访问,LP的CTR骤降)

资源准备

CloudFlare

我们主要使用它的CDN和DNS,我的个人博客maxjmac.com也是使用它的CDN加速。

Backblaze B2

类似于AWS的S3,是一个云存储解决方案,我们主要使用它来存储资源文件(image/css/js/video/audio等)。

域名一个

用于添加站点到CloudFlare,解析到B2,二级域名也可以,但是必须把DNS托管到CloudFlare。

原理解析

正常来说,云存储都是要支付带宽费用的,但是由于有Bandwidth Alliance(带宽联盟),我们从B2到CloudFlare的带宽费用是完全免费的,我们主要就是利用这一原理来实现这个部署方案。(低价,绝大多数时候是免费的)

部署流程

Backblaze B2

首先创建一个Bucket,Bucket Unique Name填个唯一的就行,记得要选择Public

创建成功后先随便上传一张图片,然后进入Bucket,点开刚刚上传的图片,可以看到以下内容

把这个Friendly URL下的f002.backblazeb2.com部分记下来,后面会用到。

CloudFlare

用准备好的域名新建一个站点,进入站点后选择上方的DNS菜单,把域名的NAME SERVERS(名称服务器)切换成CloudFlare的,你的DNS就托管给CloudFlare了。

然后添加一个CNAME记录解析到上面记录的Friendly URL下,可以使用二级域名,我这里使用的是assets,如图

上方切换到SSL/TLS菜单,确保加密模式设置为完全,如图

上方切换到页面规则菜单,按顺序添加两个页面规则,注意按顺序(即优先级),如图

这里假设你的域名是example.com,你的Bucket Name是mybucket,规则1里面的URL就是https://assets.example.com/file/mybucket/*,规则2里面的URL就是https://assets.example.com/file/*/*,我这里转发重定向用到的URL是https://secure.backblaze.com/404notfound,这样别人试图通过你的域名访问其他仓库的时候,就会提示404。

最后一项配置,选择上方的缓存菜单,点击配置,往下滚动找到浏览器缓存 TTL,把时间修改为1年

至此,配置部分就完成了。

高效使用

你可以直接在Backblaze B2的后台直接上传文件,但是那样做的效率并不高,所以我借助的是一个叫Cyberduck的软件。

首先到Backblaze B2的后台菜单App Keys下新建一个Application Key,如图

给这个key起个名,可以叫Cyberduck说明是给这个软件用的key,选择你创建的Bucket,类型保持默认的Read and Write。创建成功后会出现下图,只会出现一次,所以记得把applicationKey复制下来。

打开你下载的Cyberduck,新建一个连接,如图

选择Backblaze B2 Cloud Storage,然后填入上方的keyID和applicationKey后点击Connect即可连接上,可以看到你之前随便上传的那张图片。现在你可以方便的在这个应用上创建文件夹,批量上传文件了。

这时你这个文件的访问路径就由原来的https://f002.backblazeb2.com/file/mybucket/create-bucket.png(不带CDN加速)变成了https://assets.example.com/file/mybucket/create-bucket.png(带CloudFlare CDN加速)。

部署效果

话不多说,上个GTmetrix测速效果图,双A稳稳的。

总结

Landing Page的访问速度很重要,可以说是转化的关键因素之一,必须重视。目前我使用了这个方案一个月左右,运行稳定,已将所有LP迁移至此方案。这个可作为fast.io收费后的免费解决方案。

广告时间

我建立了一个知识星球,在这里分享一些我找到的公开资源和我的一些经验,同时希望能建立一个友好的新手交流的社群,大家共同成长,成为未来大牛。

具体的联系方式,访问原文吧。

原文链接: https://maxjmac.com/affiliate-marketing/assets-cdn/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,331评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,372评论 3 398
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,755评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,528评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,526评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,166评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,768评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,664评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,205评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,290评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,435评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,126评论 5 349
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,804评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,276评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,393评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,818评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,442评论 2 359