vue 应用如何部署节省成本？这个月 cdn 花了 4K 有点烧不起了...

[zzztongxue]

目前手上有一个网页社区，经过 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 友）

[daiv]

F12 看一下请求, 不会一次性下载的. 按需的

坐标在哪里, 什么方面的社区, 有没有可能合作

[cheese]

1.oss 流出流量并不比 cdn 便宜啊，你把静态资源放 oss 不解决你这个问题。关于跨域的问题，OSS 有 CORS 控制，可以自定义允许的跨域访问域名
2.如果你的图片资源都在首页上，并且没有做懒加载，那就会一次性请求完成。图片考虑压缩，如果移动端用户少并且苹果用户更少的话，可以考虑 webP 格式
3.vue 如果用了一些第三方的 UI 框架的话，使用按需引入的方式，可以缩减一些打包后的体积

[hefish]

oss 的流量费可贵了，比 cdn 贵多了。我用 oss 都是要套一层 cdn ，因为 oss 到 cdn 是免费的。
oss 可以自定义域名。

[Aixiaoa]

找便宜 cdn 压缩图片 按需加载

[zzztongxue]

@cheese 不好意思老哥，我没有描述清楚。
1.为什么考虑放 oss 上，还有个原因是因为现在放在自己服务器上 nginx 处理比较吃内存，目前只是是 4H8G 的小机子，且跑了比较多的定时任务，用户反馈有时候访问前端界面比较卡，靠久不久重启一下 nginx 撑着。只是存在 oss 上，访问的话我还需要套 cdn 吧。
2.就是一些页面缺省图片啊，图标资源啊... 经一楼的提醒刚才 F12 看了一下发现是按需的

[SQLException]

我觉得你和 /t/877718 提供的服务很符合 @star7th 或许你俩有合作的可能

[zzztongxue]

@SQLException 谢谢指路~！

[qhgongzi]

Oss 更贵，先把静态资源压缩，精简，增加缓存时间，降低单用户的资源开销

然后评估下是不是 cdn 按带宽计费会更便宜，如果之前没 cdn 走单服务器成本也不高的话，应该可以优化下来

在杭州的话有机会的话可以找我当面看看，其他地方就找个资深点的前端分析优化下

[zzztongxue]

@daiv 老哥是指技术合作吗还是？坐标倒是不限，都是远程工作

[zzztongxue]

@qhgongzi 在厦门，感谢指点~！

[semoon]

看了楼主#5 的回复，按我经验，如果都在阿里云的话，可以试试如下几个操作：
1 、新增 ecs 主机 1 台，剥离定时任务、跑后端 job
2 、不清楚 op 具体多少流量，ecs 本身带宽使用情况，可以试试加入 slb ，走 ecs 的流量（弹性），能省比较多
3 、拆分应用热点页面，图片压缩、懒加载组合拳搞一搞，静态 js 这些拆分减少打包体积

可以交流交流~

[daiv]

@zzztongxue #9 我们很近... 商务 /技术 都可以, 聊了才知道有没有可能, 联系
https://smms.app/image/uLTRJgtvqG8aspM
可以加我

[vace]

我的方案：前后端分离，前端部分是持续集成部署到 oss 的，可以通过配置静态网站托管获得单页应用的路由体验。再从 CDN 绑定域名访问，成本方面从几个方面优化：
1. 预估访问量，买流量、https 请求数等资源包
2. 优化前端项目，减少加载体积、加载数量、图片之类的懒加载
3. 优化资源格式，渐进式缩略图、上面说的 png => webp ，gif => mp4 等等
4. ！！！用客户端缓存资源，我的项目使用 PWA ，用户第一次打开以后，所有资源都会从 ServiceWorker 中拿，更新发版时通过 ServiceWorker 更新资源，更新完后刷新一下页面。

[yestodayHadRain]

楼主是觉得 CDN 走的流量不正常，在被人刷流量吗？

OSS 的下行流量比 CDN 贵，但是可以把静态网站托管在 OSS 再给 OSS 套上 CDN ，OSS 可以设置跨域，不需要担心跨域的问题。

楼上建议客户 CDN 按带宽计费的想法不太赞同，走带宽的话要看带宽平均使用率，小客户是不会去掉 top5 峰值计费的。另外走服务器带宽后按量付费也不合适，那个比 CDN 价格更贵。

楼主如果是觉得有人盗刷 CDN 流量的话，可以设置下访问控制。

[yestodayHadRain]

对了，CDN 应该支持 gzip 的，把这个加上流量也会少一些

[zzztongxue]

@yestodayHadRain 我其实不是很懂阿里云的 DCDN 跟 CDN 区别是啥，我是直接前端直接放源站，然后域名套了 DCDN

[n18255447846]

你 cdn 下行流量涨了就得花钱，存 oss 里只是把你的资源从你自己的服务器上移到官方 oss 服务器上，而且还有存储费用。

DDoS 攻击不知道，自己 google 解决吧。作为前端角度提建议：

1. 减少请求数。合并资源精灵图，h2 等
2. 按需 or 懒加载
3. nginx 或者 cdn 里缓存时间设长点，减少流量，代价就是发布可能不及时
4. gzip 必开，打包一份后记得 nginx 里开启 static
5. 跨域其实很简单，加个请求头而已，但是不建议，因为浏览器会多发个 options 请求，还不如 nginx 反代一下。另外不是所有请求都需要处理跨域，像下载图片，加载 script 这些没有同源策略限制

[yestodayHadRain]

@zzztongxue DCDN 是全站加速，相比 CDN 只能做静态资源的内容分发，DCDN 还可以加速接口的请求

[eason1874]

@zzztongxue 你这一半以上是请求费用，现在立刻马上迁移到不收请求费而且流量便宜的百度智能云或者华为云（注意别开错 DCDN ，普通网页就 CDN 就可以了），啥都不用动就可以省 70%~80%

静态 HTTPS 请求 0.05 元 /万次+动态 HTTPS 请求费用 0.15 元 /万次：12530*0.05+12078*0.15=2438.2

[eason1874]

@yestodayHadRain #18 不是的，CDN 也支持动态请求，只不过不像 DCDN 那样专门优化过链路，CDN 有时候增加时延很明显，几十上百 ms ，但是对普通网页来说基本不影响，只对高时延要求的场景有影响