vue 应用如何部署节省成本？这个月 cdn 花了 4K 有点烧不起了...
zzztongxue · 2022-11-30 22:57:16 +08:00 · 4133 次点击这是一个创建于 728 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前手上有一个网页社区，经过 5 个月的发展目前百度统计的日 PV 是 80W+，UV 差不多 4W 左右...
上个月不知道被谁(目测是竞对)，ddos 了几次。每次 ip 都进了阿里云黑洞, 没办饭只能给用到的域名都套上了 cdn 。然后流量费用就飞涨了，这个月全部费用加起来要 5K ，但是业务不赚钱，所以只能从成本上考虑节省。
项目采用前后端分离，前端 uni-app, 编译后包的大小 4.6m ，光前端图片资源就占了 3M+。
现在考虑的是将静态资源部署到阿里云 oss, 但是不明白该如何部署。我现在前端所有请求都是请求到 a.xxx.com 这个域名，然后用 nginx 将 a.xxx.com/api 请求打到动态请求服务上。如果我上部署到 oss, 该如何解决跨域问题呢？（评论区有懂哥可以说说，不白嫖，采纳的会请喝咖啡）
还有个 vue 的问题，就是用户前端访问的时候会直接把我 4.6M 的文件全部直接一次性下载吗？还是页面展示的时候发现没有这个资源才会去访问...（目前创业中，全干型切图仔，属于要用到啥就学啥，会的东西不够深入也不够扎实，求助万能的 V 友）
 |
1
daiv 2022-11-30 23:12:32 +08:00  1
F12 看一下请求, 不会一次性下载的. 按需的
坐标在哪里, 什么方面的社区, 有没有可能合作 |
 |
2
cheese 2022-11-30 23:19:21 +08:00 1
1.oss 流出流量并不比 cdn 便宜啊，你把静态资源放 oss 不解决你这个问题。关于跨域的问题，OSS 有 CORS 控制，可以自定义允许的跨域访问域名
2.如果你的图片资源都在首页上，并且没有做懒加载，那就会一次性请求完成。图片考虑压缩，如果移动端用户少并且苹果用户更少的话，可以考虑 webP 格式 3.vue 如果用了一些第三方的 UI 框架的话，使用按需引入的方式，可以缩减一些打包后的体积 |
 |
3
hefish 2022-11-30 23:21:24 +08:00 1
oss 的流量费可贵了，比 cdn 贵多了。我用 oss 都是要套一层 cdn ，因为 oss 到 cdn 是免费的。
oss 可以自定义域名。 |
 |
4
Aixiaoa 2022-11-30 23:27:27 +08:00 via iPhone 1
找便宜 cdn 压缩图片 按需加载
|
 |
5
zzztongxue OP @cheese 不好意思老哥，我没有描述清楚。
1.为什么考虑放 oss 上，还有个原因是因为现在放在自己服务器上 nginx 处理比较吃内存，目前只是是 4H8G 的小机子，且跑了比较多的定时任务，用户反馈有时候访问前端界面比较卡，靠久不久重启一下 nginx 撑着。只是存在 oss 上，访问的话我还需要套 cdn 吧。 2.就是一些页面缺省图片啊，图标资源啊... 经一楼的提醒刚才 F12 看了一下发现是按需的 |
 |
6
SQLException 2022-11-30 23:30:10 +08:00 1
|
|
7
zzztongxue OP @SQLException 谢谢指路~！
|
 |
8
qhgongzi 2022-11-30 23:32:24 +08:00 via Android 1
Oss 更贵，先把静态资源压缩，精简，增加缓存时间，降低单用户的资源开销
然后评估下是不是 cdn 按带宽计费会更便宜，如果之前没 cdn 走单服务器成本也不高的话，应该可以优化下来 在杭州的话有机会的话可以找我当面看看，其他地方就找个资深点的前端分析优化下 |
|
9
zzztongxue OP @daiv 老哥是指技术合作吗还是？坐标倒是不限，都是远程工作
|
|
10
zzztongxue OP @qhgongzi 在厦门，感谢指点~！
|
 |
11
semoon 2022-11-30 23:47:36 +08:00 1
看了楼主#5 的回复，按我经验，如果都在阿里云的话，可以试试如下几个操作：
1 、新增 ecs 主机 1 台，剥离定时任务、跑后端 job 2 、不清楚 op 具体多少流量，ecs 本身带宽使用情况，可以试试加入 slb ，走 ecs 的流量（弹性），能省比较多 3 、拆分应用热点页面，图片压缩、懒加载组合拳搞一搞，静态 js 这些拆分减少打包体积 可以交流交流~ |
|
12
daiv 2022-11-30 23:48:37 +08:00
|
 |
13
vace 2022-12-01 00:00:29 +08:00 1
我的方案：前后端分离，前端部分是持续集成部署到 oss 的，可以通过配置静态网站托管获得单页应用的路由体验。再从 CDN 绑定域名访问，成本方面从几个方面优化：
1. 预估访问量，买流量、https 请求数等资源包 2. 优化前端项目，减少加载体积、加载数量、图片之类的懒加载 3. 优化资源格式，渐进式缩略图、上面说的 png => webp ，gif => mp4 等等 4. ！！！用客户端缓存资源，我的项目使用 PWA ，用户第一次打开以后，所有资源都会从 ServiceWorker 中拿，更新发版时通过 ServiceWorker 更新资源，更新完后刷新一下页面。 |
 |
14
yestodayHadRain 2022-12-01 00:00:51 +08:00 via iPhone 1
楼主是觉得 CDN 走的流量不正常，在被人刷流量吗？
OSS 的下行流量比 CDN 贵，但是可以把静态网站托管在 OSS 再给 OSS 套上 CDN ，OSS 可以设置跨域，不需要担心跨域的问题。 楼上建议客户 CDN 按带宽计费的想法不太赞同，走带宽的话要看带宽平均使用率，小客户是不会去掉 top5 峰值计费的。另外走服务器带宽后按量付费也不合适，那个比 CDN 价格更贵。 楼主如果是觉得有人盗刷 CDN 流量的话，可以设置下访问控制。 |
|
15
yestodayHadRain 2022-12-01 00:02:26 +08:00 via iPhone 1
对了，CDN 应该支持 gzip 的，把这个加上流量也会少一些
|
|
16
zzztongxue OP @yestodayHadRain 我其实不是很懂阿里云的 DCDN 跟 CDN 区别是啥，我是直接前端直接放源站，然后域名套了 DCDN
|
 |
17
n18255447846 2022-12-01 00:09:05 +08:00 1
你 cdn 下行流量涨了就得花钱，存 oss 里只是把你的资源从你自己的服务器上移到官方 oss 服务器上，而且还有存储费用。
DDoS 攻击不知道，自己 google 解决吧。作为前端角度提建议： 1. 减少请求数。合并资源精灵图，h2 等 2. 按需 or 懒加载 3. nginx 或者 cdn 里缓存时间设长点，减少流量，代价就是发布可能不及时 4. gzip 必开，打包一份后记得 nginx 里开启 static 5. 跨域其实很简单，加个请求头而已，但是不建议，因为浏览器会多发个 options 请求，还不如 nginx 反代一下。另外不是所有请求都需要处理跨域，像下载图片，加载 script 这些没有同源策略限制 |
|
18
yestodayHadRain 2022-12-01 00:09:45 +08:00 via iPhone
@zzztongxue DCDN 是全站加速，相比 CDN 只能做静态资源的内容分发，DCDN 还可以加速接口的请求
|
 |
19
eason1874 2022-12-01 00:12:45 +08:00 1
@zzztongxue 你这一半以上是请求费用，现在立刻马上迁移到不收请求费而且流量便宜的百度智能云或者华为云（注意别开错 DCDN ，普通网页就 CDN 就可以了），啥都不用动就可以省 70%~80%
静态 HTTPS 请求 0.05 元 /万次+动态 HTTPS 请求费用 0.15 元 /万次：12530*0.05+12078*0.15=2438.2 |
|
20
eason1874 2022-12-01 00:14:59 +08:00
@yestodayHadRain #18 不是的，CDN 也支持动态请求，只不过不像 DCDN 那样专门优化过链路，CDN 有时候增加时延很明显，几十上百 ms ，但是对普通网页来说基本不影响，只对高时延要求的场景有影响
|
|
21
zzztongxue OP @vace 方案跟你想的差不多，现在执行落地有点疑问，CDN 绑定域名以后，之前的动态请求怎么处理。PWA 第一次听说，又学到了新的知识，感谢指点~
|
|
22
zzztongxue OP @eason1874 老哥留个 V 吗，请你喝一下红牛
|
 |
23
wdlth 2022-12-01 00:27:28 +08:00
先看看是否有大量的境外恶意流量，如果有境外的可以做分区解析把境外的换成 CF 之类的。
|
|
24
eason1874 2022-12-01 00:34:10 +08:00
@zzztongxue 我不习惯加人，有使用问题在这里问就可以，我最近天天高强度刷 V 站。打赏请用我的微信赞赏码🤣 https://imgur.com/a/NwxFQPo
|
|
25
zzztongxue OP @eason1874 感谢恢复！红牛已安排。刚才看了一下各家的计费文档，动态加速都会收取 https 请求费用，百度会便宜一些，动态 https 是 0.1/万次。为什么套动态加速主要是隐藏一下源站 IP ，被 D 怕了...
|
|
26
zzztongxue OP @wdlth 明人不说暗话，我其实不懂怎么看境外流量 。😂
|
|
27
eason1874 2022-12-01 00:46:39 +08:00
@zzztongxue 谢谢老哥的红牛
百度智能云那个只收动态 HTTPS 请求费，你不开动态加速，就用普通加速也可以加速动态请求的，这样就没有请求费，就像我#20 说的那样，时延稍微高一点而已，但是对网页场景影响很小 记得买流量包，在首页活动页进去，1T 流量包活动也就 106 元，日常得卖 180 元。我看你图表日均 50GB ，一个月也就 1.5TB 流量，跟我一个小网站差不多，我那个网站每月 CDN 成本也就 200 元以内 |
|
28
zzztongxue OP @eason1874 我比较愚钝，还是没太搞懂... 老哥说的是 api 动态请求也可以走普通加速的吗？我最重要目的是为了隐藏我的源站 IP
|
|
29
eason1874 2022-12-01 00:50:39 +08:00
@zzztongxue 普通 CDN 也可以隐藏源站 IP 的，DCDN 只是在链路上有优化，其他方面跟 CDN 是一样的
我比较推荐百度智能云，因为它不仅便宜，还支持边缘脚本，可以在 CDN 节点上运行简单的 JS 脚本，可以用来鉴权、动态限流 |
|
30
zzztongxue OP @eason1874 这就太好了！过两天试试看，成功优化后 会回来给老哥追加咖啡的☕️
|
 |
31
zeusho871 2022-12-01 01:07:11 +08:00 via Android
试试我用的，创宇云
|
|
32
vace 2022-12-01 01:08:11 +08:00
@zzztongxue OSS 上面只放静态资源，动态资源看业务类型走接口、回源、函数计算等都行。
|
 |
33
Victorcao 2022-12-01 08:28:34 +08:00 via Android
现在黄网不挣钱？
|
 |
34
fzleee 2022-12-01 08:48:11 +08:00 via iPhone
楼主说的问题感觉要针对解决，泛泛而谈不能起到实质性的作用。有网站地址吗，说不定我可以帮忙看看
|
 |
36
jack274 2022-12-01 10:19:33 +08:00
屏蔽一些 IP 访问过的，一般 IP 同时访问也就 20 个左右， 可以屏蔽比如同时请求超过 50 个的，因为这样的一般是机器或者用特别的爬虫软件
|
 |
37
perfectlife 2022-12-01 10:29:41 +08:00
其实我感觉别人 ddos 攻击你，怎么都得花钱的
|
|
38
zzztongxue OP @zeusho871 打算先试试百度的
|
 |
39
star7th 2022-12-01 12:04:44 +08:00
哎，有人推荐我了。嘿嘿。
非常鼓励你使用大风云 https://www.dfyun.com.cn 大风云不收回源费用，不收请求数费用，只收流量费，而且流量单价只有阿里云的四分之一。 赶紧试用一下吧。这个现在申请，整个 12 月份都是免费试用期，不收你钱。 |
 |
40
tanglu 2022-12-01 12:57:49 +08:00
|
|
41
zzztongxue OP @tanglu 不限量这个感觉有点慌跑路...
|
|
42
zzztongxue OP @star7th 昨天简单看了一下，好像需要用大风云提供的域名访问，我之前的图片资源在 oss 上且绑定了我设置的域名，可以不影响线上访问不停机切换到大风云不
|
|
43
star7th 2022-12-01 13:33:38 +08:00
@zzztongxue
可以绑定你的域名的，不停机切换也行。 你先走申请流程，源站地址选择域名，然后填入 oss 的公网域名。提交。通过申请后，会得到一个大风云的加速域名。同时网站管理后台会有绑定你自定义域名的教程。你按教程发 https 证书给我。我部署完毕后，你直接改 dns 解析，即可完美切换。 |
|
44
tanglu 2022-12-01 14:28:31 +08:00
@zzztongxue 可以月付嘛，不限量是京东推出的，我觉得还是比较划算。之前他也卖过 暂时可能没有问题
|
|
45
star7th 2022-12-01 14:42:19 +08:00
@tanglu 咦，国内 cdn 里，我还真没看到京东星盾有 400 远包月的套餐。我看到的 https://docs.jdcloud.com/cn/starshield/price-overview 是 5800 元 /月。而且流量包 3T 居然要 900 元。
如果你说的是国外 cdn ，那我不表态了。因为国外 cdn 在国内基本用不了。 如果 lz 接入 https://www.dfyun.com.cn/ ,按 一个月 400 预算来计 ，则相当于可用 8T 流量。这个流量，对于小站点来讲，怎么折腾都够用了。而且 dfyun 还不会额外收取请求数费用。就只收流量费 |
 |
46
shenqi 2022-12-01 15:33:41 +08:00
试试将那些 external 包用第三方公开 cdn
|
 |
49
Zy143L 2022-12-02 03:05:55 +08:00 via Android
图片不存在跨域问题 直接去嫖大厂 cdn 也不是不行
|
|
50
zzztongxue OP @star7th 前几天接入了百度云，百度云 0.2/g ，现在的 CDN 费用已经能接受了。观察一段时间，等日消耗再大些再找你开通，0.05/G 确实很香。。。
|
|
51
star7th 2022-12-12 14:42:22 +08:00
@zzztongxue 额， 白省下来的钱不香嘛，又不需要多少迁移成本，而且是一次接入工作，后续每个月都能省下馆子吃饭的钱。不过既然你觉得 0.2 元 /g 可接受就先接受吧。
|
|
52
zzztongxue OP @eason1874 感谢老哥，切到百度有半个月了，域名直接套普通 cdn ，符合预期，给你追加一杯咖啡☕
|
|
53
zzztongxue OP @zzztongxue 赞赏码失效了😂
|
|
54
eason1874 2022-12-25 13:53:04 +08:00
@zzztongxue 来了，谢谢🤣 https://ibb.co/B6v5JW7
|
|
55
zzztongxue OP @eason1874 发了一个我的幸运数字
|
|
56
eason1874 2022-12-25 14:06:08 +08:00
@zzztongxue 收到，谢谢，新年大家都好运！😁
|
Select Language