利用阿里云CDN加速vercel上的网站—2023最新可用

已于 2024-01-20 15:50:17 修改
阅读量9.6k 收藏 12
点赞数 9
分类专栏： 个人网站 文章标签： 阿里云
于 2023-12-20 18:35:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62392149/article/details/135114752
版权

前提：你已经在vercel添加了域名

注意：国内的CDN暂不支持未备案域名

我们以 已经在vercel绑定过的域名 xxx.yourdomain.com 为例

在你的DNS服务商找到以下该字段复制作为后续使用

一般情况都是使用下面这个，可以直接复制

cname.vercel-dns.com

开始使用阿里云CDN配置

CDN管理控制台 (aliyun.com)icon-default.png?t=N7T8https://cdn.console.aliyun.com/domain/list

打开上面网站开始配置CDN

验证域名（不多做介绍）

验证通过后、 

添加源站信息，将cname.vercel-dns.com填入

按照我的示例填写

进入域名管理

复制阿里云CDN提供的 cname 字段

进入DNS服务商添加记录如下记录

类型：cname

记录值就填刚刚复制的

删掉或者停用原来的 cname 记录

 这个时候就配置成功了，但是只能通过http访问，还需要如下步骤

配置HTTPS证书

如果你没有SSL证书可在下面通过阿里云免费获取一个（3个月）有的话直接看下面的

证书服务_SSL数字证书_HTTPS加密_服务器证书_CA认证-阿里云 (aliyun.com)

具体如何申请教程有很多，可以自己搜 阿里云SSL免费申请教程

生成后如下所示：记住这个cert-XXX编号

 有了证书之后（通过阿里云获取的）

 使用证书来源：云盾，选择刚刚的证书编号

测试一下

蛙趣，真快

这里我用的是阿里云CDN（我有300元学生优惠券，所以随便用/haha）

不过不建议使用阿里云 太贵啦，价格参考价格计算器 (aliyun.com)

可以搜一下免费CDN，有什么疑问都可以直接在评论区问我，我会尽力回答的

阿里云CDN加速器基本概念与购买开通
江晓龙的博客
08-22 4万+
内容分发网络（Content Delivery Network，CDN）是建立并覆盖在承载网上，由不同区域的服务器组成的分布式网络。将源站资源缓存到全国各地的边缘服务器，供用户就近获取，降低源站压力。CDN相当于缓存服务，由不同地区的服务器组成的分布式网络，网站数据会缓存到CDN一份，当用户请求时，首先到达CDN加速器，由CDN将用户的请求分发到距离用户最近区域的服务器，加速网站的网络，当用户请求的数据在CDN不存在时，CDN则会回源，由CDN去请求WEB服务器中的数据，避免恶意用户频繁请求网站流量。
为应用程序接入阿里云CDN优化网站访问速度
江晓龙的博客
08-24 4万+
源站信息的种类有很多种，生产环境中都会选择使用OSS域名的形式，一般静态资源都会存储在OSS中，但是kodcloud没有将静态资源分离出来，因此我们只能选择IP类型，如果选择源站域名还是填写kodcloud.jiangxl.com.cn的话，最终还是会被DNS解析到CDN这里，从而无法回源。也可以在ping.chinaz.com网站中检测kodcloud云盘的速度，如下图，已经显示了我们使用了阿里云的CDN加速服务，并且不同地区的用户访问云盘系统都会有不同的解析地址。
Cloudflare + Vercel 实现网站中国访问加速
2402_88233879的博客
02-15 1410
Vercel+Cloudflare国内访问加速
【Hexo系列】【2】使用Vercel加速Hexo博客访问
2301_76884890的博客
08-12 1113
Vercel 是一个提供网站部署和前端开发服务的云平台，它支持静态网站和动态网站的应用部署、预览和上线。Vercel 特别以与 JavaScript 框架 Next.js 的无缝集成而闻名，尽管它也支持从其他框架和技术部署。它提供了快速部署、自动化部署、无服务器功能、自定义域名、HTTPS 支持、分支部署、团队协作等功能，确保应用程序具有高性能和可靠性。个人版（Hobby）永久免费，每个月100G流量，个人项目部署完成够用。如果是团队模式，则需要付费。
Vercel反向代理做CDN，免费给网站加速隐藏源站，可绑定域名
云墨小站
08-26 9652
Vercel免费用户拥有每月100G的流量，一般来说是够用的，这个100G的话，虽然网页上号称无限，实际上合理使用政策里写的是100G，构建时间是100小时，一般我们可以用它托管静态网站，它还支持路由重写功能，因此我们可以实现反代，也就是类似于CDN的功能。 使用方法 1、注册Vercel 官方网站 推荐使用Github账号登录 注：QQ邮箱注册不行，若Github绑定QQ邮箱，修改其他邮箱为主邮箱注册 2、安装Nodejs 可参考以下网址： 安装教程 注：我的版本12.18.3，高版本有些问题 3、.
猿创征文｜hexo博客访问速度优化：vercel+又拍云CDN
余白のblog
08-27 2518
vercel+又拍云嫖就完事了
Vercel 提高访问速度
希望是美好的，也许是人间至善，而美好的事物永不消逝。
08-10 1044
修改 DNS 解析为 cname.vercel-dns.com。
Github Pages 访问速度慢，使用vercel部署静态博客提高访问速度
04-23 2469
我是在 godaddy 上买的域名，这是 godaddy 上之前的 dns 设置，解析到 cloudflare 了。cloudflare 上的 dns 解析记录。修改 godaddy 上的域名解析记录到 vercel 的 dns 服务器上然后点击 update。可以看到过一会儿，vercel 上显示域名已经工作正常了。将 vercel 自己的服务域名强行重定向到自己的域名。之后等 DNS 记录更新了再来看看，和 vercel 自己提供的地址速度对比发现差距还是有点大。
阿里云CDN加速配置
11-10
以下是对阿里云CDN加速配置的详细说明： 一、基于源站域名加速 1. Nginx配置说明： 在Nginx服务器上，配置两个location，分别处理主域名`huodong.tongxinghui.com`和子路径`/huodong`。`proxy_pass`指令将请求转发...
阿里云CDN架构接入WAF应用防火墙案例实践
热门推荐
江晓龙的博客
09-13 4万+
KodCloud是以HTTPS方式访问的，因此CDN、WAF、SLB都需要配置HTTPS，如果网站部署强转HTTPS，那么WAF回源SLB的端口号可以使用80。配置完WAF网站接入后，在第二步会提供出WAF的CNAME地址，我们要将CNAME地址配置在CDN加速器中，此时先不进行配置。目前网站接入WAF防火墙是可以正常访问的，但是我们并不能看出与之前有什么效果，我们现在来模拟网站共计，观察WAF的作用。紧接着点击下一步完成网站接入WAF防火墙的配置，第三步会提示我们将WAF的地址加入到白名单，避免误拦。
CDN加速实战：使用七牛云CDN加速阿里云OSS资源访问
xingdiango的博客
11-02 1148
今天是双11搞活动，在阿里云1元注册了个域名，想着在学CDN，想使用CDN做个加速项目，但是阿里的要收费，上网查了下七牛云的不收费，想着将七牛云的CDN结合阿里的DNS做个访问加速，刚好看到了阿里的一个文章，照着改了改，实践成功了。使用CDN分发OSS中的图片、视频、文档等静态资源，可以降低流量费用，提升资源加载速度。
Vercel部署个人静态之DNS污染劫持问题
qq_34761385的博客
10-07 3021
Vercel支持给每个项目进行自定义域名配置，点击对应的项目，在Setttings里有个Domain,输入你要配置的域名即可。然后别忘了在你购买的对应的域名商控制台进行域名解析。lz这里的域名是阿里云的。解析配置如下：然后就可以正常访问啦，是不是很简单。当然，如果是vue和react这种框架项目，还需要配置下对应的构建命令。
Vercel 国内访问部署的私有项目，域名解析
ASP.NET
03-18 1320
【代码】Vercel 国内访问部署的私有项目，域名解析。
给网站提速，免费CDN”加速乐”初体验
weixin_34113237的博客
12-05 290
CDN是什么？很多新站长可能都还不清楚，说通俗点讲，它的作用就是通过多节点缓存智能分配DNS，使得用户能够访问到离自己最近的节点，从而加速网站访问。 CDN技术一直在大型网站中广泛使用，比如百度、新浪、搜狐等，从不同的地方ping到的IP是不一样的。否则即使百度的新浪的服务器再牛，试想每天数千万的访问再牛的服务器估计也得压爆。 CDN一直貌似是大网站的专利，...
如何提高 Vercel 在国内的访问速度?
01-05 1万+
Vercel 官网截图 Vercel 是什么? Vercel1(之前也叫 Zeit 或 now.sh) 是一家提供 静态站点的托管的平台，支持自动从 Github, GitLab, Bitbucket等代码仓库中自动拉取代码, 然后进行项目打包，最后把生成的静态网站资源(照片, JS, CSS等)文件分发到各大CDN节点上。 Vercel 在国内的访问速度? 以一个 Hexo博客2作为示例，部署到Vercel的服务器(Vercel的CDN节点上), 访问速度如下: Hexo博客 部署在...
hexo部署到vercel提升访问速度
qq_17197675的博客
04-07 2515
hexo部署到vercel提升访问速度
搭建和mybatis-plus官网一样主题的网站（cos+宝塔+vercel）
wresource的博客
09-02 1522
网站主题最初是在开发数据api的时候看到的，当时在学习Mybatis-Plus，最初也不知道这是个主题，就觉得Mybatis-Plus官网UI真的不错，直到后面发现另外一个类似的网站，我意识到这是个模板，于是有了自己也搭建一个的想法，不过拖延症相当严重，最初是在宝塔上修改的，效率极低，一度放弃部署，直到最近换成本地开发才好了很多，也就是最近网站搭建初步完成，接下来就是往里面增加文章等等，这里带大家从零开始搭建Vdoing主题网站，算是对过去一个月的知识总结。
【详细教程hexo博客搭建】2、Vercel部署并绑定自定义域名+安装Butterfly主题
wufaqidong1的博客
09-17 6574
vercel是一个代码托管平台，它能够托管你的静态html界面，甚至能够托管你的node.js与Python服务端脚本，是不想买服务器的懒人的福音！首先需要一个Vercel账号，这里推荐用GitHub账户关联，这样你就可以在vercel中直接托管你的GitHub库中的项目了，实现开发部署一步到位（网络不流畅可以考虑挂梯子）。当你用你的Github账户关联并绑定手机号登录之后，点击右上角的创建新的项目，之后导入选项那里选择。
微服务加前后端分离架构架构中是否像集群架构那样还要部署nginx进行前后台交互
最新发布
03-12
<think>好的，我现在需要回答用户的问题：在微服务加前后端分离架构中，是否还需要像集群架构那样部署Nginx进行前后端交互。首先，我需要明确用户的问题核心。用户可能已经了解集群架构中使用Nginx的情况，现在想知道在微服务和前后端分离的架构中是否同样需要。这可能涉及到Nginx在两种架构中的不同作用，以及微服务架构中是否有其他替代方案。 首先，我应该回顾一下Nginx在传统集群架构中的作用。通常，Nginx作为反向代理和负载均衡器，处理客户端的请求，将流量分发到多个后端服务器，同时可能处理SSL终止、静态资源服务、缓存等。在集群架构中，Nginx帮助提高可用性和扩展性，确保请求被合理分配到不同的服务器实例。 接下来，考虑微服务加前后端分离架构。在这种架构下，前端通常是独立的静态应用（如React、Vue），通过API与后端微服务通信。后端由多个微服务组成，可能通过API网关（如Spring Cloud Gateway、Kong）进行路由和统一管理。此时，用户的问题变为：在这样的架构中，是否需要在前端和后端之间部署Nginx，或者API网关是否已经承担了这部分职责？ 需要分析以下几点： 1. **前端静态资源托管**：在前后端分离架构中，前端代码通常是静态文件，需要托管在Web服务器上。Nginx擅长处理静态资源，因此可能仍需要用于托管前端文件，尤其是在生产环境中，提供高效的静态资源服务。 2. **反向代理和负载均衡**：在微服务架构中，API网关通常负责路由请求到具体的微服务，并可能处理负载均衡。但如果有多个API网关实例或需要进一步分发流量到网关层，可能需要Nginx作为入口点的负载均衡器。此外，如果前端直接与多个后端服务通信（不经过网关），可能需要Nginx来代理这些请求，但这种情况在微服务架构中并不常见，因为通常推荐通过API网关统一入口。 3. **SSL终止和缓存**：Nginx常用于处理SSL终止，减轻后端服务的负担，同时提供缓存功能以提高性能。即使存在API网关，这些功能可能仍然由Nginx处理，尤其是在网关不具备这些能力或需要统一管理的情况下。 4. **架构层次**：微服务架构可能包含多个层次，例如前端层、网关层、微服务层、支撑服务（注册中心、配置中心等）。Nginx可能部署在前端层和网关层之间，或者作为整个架构的入口点，处理来自客户端的初始请求，再将动态请求转发给API网关，而静态请求直接处理。 5. **替代方案**：是否有其他工具可以替代Nginx的角色？例如，云服务提供的负载均衡器（如AWS ALB、GCP Load Balancer）可能替代Nginx的部分功能。但在自建环境中，Nginx仍然是一个常见选择。 然后，需要验证用户提到的集群架构是否与微服务架构中的部署有不同需求。在集群架构中，Nginx主要用于后端服务的负载均衡，而在微服务架构中，API网关可能已经具备类似功能。但前端静态资源的托管和可能的入口负载均衡仍可能需要Nginx。 还需要考虑用户可能存在的误解，例如认为微服务架构中的API网关完全取代了Nginx的角色，但实际上两者可能有不同的职责，可以共存。例如，Nginx作为边缘服务器处理静态资源和SSL，而API网关处理动态请求的路由和微服务相关的策略。 此外，是否需要区分开发环境和生产环境。在开发环境中，可能使用Webpack Dev Server等工具处理前端请求，而在生产环境中则需要Nginx这样的高效服务器。 最后，总结回答的结构：明确回答需要部署Nginx，并解释其在微服务加前后端分离架构中的具体作用，与API网关的分工，以及可能的部署场景。同时，指出替代方案的存在，但Nginx仍然是常见选择。</think>在微服务加前后端分离架构中，**仍然需要部署Nginx**，但其角色和集群架构中的使用场景有所不同。以下是具体分析： --- ### **一、Nginx的核心作用对比** | **场景** | **集群架构** | **微服务+前后端分离架构** | |-------------------------|-------------------------------------|----------------------------------| | **主要职责** | 负载均衡、反向代理、静态资源服务 | 静态资源托管、边缘路由、补充负载均衡 | | **交互对象** | 直接代理后端应用集群 | 前端静态资源服务 + 与API网关协同工作 | | **典型配置** | `upstream`指向Tomcat/Node服务 | 前端资源托管 + 部分API请求转发至网关 | --- ### **二、在微服务架构中Nginx的必要性** #### 1. **前端静态资源托管** - **核心需求**： 前端工程（Vue/React）编译后为静态文件（HTML/CSS/JS），需通过Web服务器高效分发。 - **Nginx优势**： - 高性能处理静态请求（吞吐量可达万级QPS） - 支持`gzip压缩`、`缓存控制`（如配置`expires 7d`） - 示例配置： ```nginx server { listen 80; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; # 支持前端路由 } } ``` #### 2. **边缘代理与安全防护** - **SSL终结**： 由Nginx统一处理HTTPS加密（避免微服务自身处理SSL开销）： ```nginx server { listen 443 ssl; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; # 转发动态请求至网关 location /api { proxy_pass http://gateway:8080; } } ``` - **安全过滤**： - IP黑白名单控制 - 防御CC攻击（限制请求速率） - 示例： ```nginx limit_req_zone $binary_remote_addr zone=api_limit:10m rate=100r/s; location /api { limit_req zone=api_limit burst=50; proxy_pass http://gateway; } ``` #### 3. **与API网关的分工协作** - **典型架构流**： $$ \text{客户端} \xrightarrow[\text{静态资源}]{\text{HTTPS}} \text{Nginx} \xrightarrow[\text{动态请求}]{\text{/api/*}} \text{Spring Cloud Gateway} \xrightarrow{\text{路由}} \text{微服务集群} $$ - **分工明确**： - Nginx：处理静态资源、SSL、基础安全 - API网关：服务路由、鉴权、熔断等微服务治理 --- ### **三、不依赖Nginx的替代方案** 1. **云服务方案**： - AWS CloudFront + S3（静态资源） + ALB（负载均衡） - 阿里云CDN + SLB 2. **现代前端方案**： - 使用Vercel/Netlify等平台托管前端，内置CDN和边缘网络 3. **Service Mesh**： - Istio Ingress Gateway替代传统反向代理（需结合Kubernetes） --- ### **四、部署建议** 1. **基础架构必选**： - 生产环境建议保留Nginx，尤其在高并发场景 - 开发环境可用`webpack-dev-server`简化流程 2. **性能调优方向**： - 启用`HTTP/2`提升多请求并发效率 - 配置`Broti`压缩替代`gzip`（节省带宽约20%） - 静态资源分离至CDN（如配置`location ~* \.(jpg|js|css)$`指向CDN域名） --- ### **五、总结** 在微服务+前后端分离架构中，**Nginx并非用于直接代理微服务**（这部分由API网关处理），但仍是**不可或缺的基础组件**，主要承担： 1. 前端静态资源服务 2. 安全防护第一道防线 3. 补充性负载均衡（例如网关集群的负载均衡） 实际架构中，Nginx与API网关形成互补，共同构建高效可靠的服务入口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值