实现 vercel 的反向代理

vercel简介

Vercel 是一家云服务提供商，旨在使 Web 应用程序的部署变得更加简单和快速。Vercel 的核心产品是 Next.js，它是一种基于 React 的 Web 应用程序框架，使开发人员能够轻松地创建、测试和部署静态和动态 Web 应用程序。通过 Vercel，开发人员可以利用服务器端渲染和静态生成等先进功能，从而大大提高 Web 应用程序的性能和可靠性。

• 官方网址:https://vercel.com/

• 使用 Vercel 部署前端项目的好处：

  • 自动化部署：Vercel 提供了自动化部署的功能，只需要将代码推送到支持的 Git 仓库或 Vercel 的 Git 仓库中，即可自动部署应用，不需要手动上传文件或配置服务器。

  • 全球 CDN：Vercel 的全球 CDN 服务能够将应用部署到全球各地的服务器上，使得应用能够更快地加载和响应。

  • 自定义域名：Vercel 支持自定义域名，可以将应用绑定到自己的域名上，使得应用更加专业和个性化。

  • HTTPS 支持：Vercel 会自动为应用添加 HTTPS 支持，保障数据传输的安全性。

  • 集成性强：Vercel 集成了很多前端框架和工具，包括 Next.js、React、Vue、Angular、Gatsby 等，可以轻松地部署这些框架和工具的应用。

  • 高度可扩展：Vercel 提供了高度可扩展的架构，能够应对高流量和高并发的情况。

最最最重要的是 : 个人使用是免费的啊!

Vercel 的免费套餐（Free Plan）可以让用户免费使用其基础服务，包括无限制的部署次数、无限制的带宽、自动 HTTPS、自动构建和部署等功能。免费套餐还提供了一定数量的 Serverless 函数调用、构建缓存、自定义域名等附加功能。同时，免费套餐还可以使用 Vercel 的服务器无限制时间，而且不需要使用信用卡进行注册。
不过需要注意的是，Vercel 的免费套餐并不包括所有功能，例如高级分析、自定义 SSL 证书、API 网关等高级功能需要升级到付费套餐才能使用。此外，免费套餐也有一些限制，例如每个项目最大可以部署 12 个实例、构建缓存只有 100MB 等。如果用户需要更高级的功能或者更大的限制，可以选择升级到 Vercel 的付费套餐。

前言

由于个人学习项目的需要，在部署一个前后端分离的项目时，出现了建立不了安全连接的问题。因为我的前端部署在vercel平台上，而后端部署在国内的阿里云服务器。
在vercel上部署前端项目，该平台都会给你的项目建立安全的https的连接，而我的后端没有https的连接，导致的问题是我的项目在上线时，无法进行登录，因为浏览器阻止了在不安全的连接下设置cookie值，直接导致我登录后，因为没有cookie而导致登录不成功。
浏览器认为在不安全的连接下设置 cookie 可能会存在安全风险，所以默认情况下会禁止这种行为。因此，为了解决这个问题，我需要在我的后端应用中添加 HTTPS 连接，这样才能和前端项目建立安全的连接并成功设置 cookie 值，实现登录功能。
这时，我突发奇想，既然vercel都是提供https的请求，那能不能让它进行反向代理，直接代理我后端的请求，这样我的浏览器就直接把后端的请求发送到vercel的服务器上，它再进行帮我转发到我的阿里云服务器上。好像看起来是一个不错的方案。虽然没有解决我后端不安全连接的问题，但是可以解决我浏览器上不能登录的问题。

反向代理

那我是怎么实现让浏览器认为我是建立了安全连接呢?—— 实现反向代理；但实际上我的后端请求是http的连接。

反向代理（Reverse Proxy）是一种服务器代理技术，它的作用是将客户端的请求转发到后端服务器上，并将后端服务器的响应返回给客户端，客户端并不知道自己请求的是一个代理服务器。反向代理服务器可以隐藏后端服务器的IP地址和实际的Web应用程序，提高了系统的安全性。

使用vercel的反向代理，因为vercel的服务器都是国外的, 不需要备案, 因此域名可以直接托管在上面，并且它会自动为你的项目颁发SSL安全证书。因此可以通过反向代理来实现向后端的请求由vercel的服务器发起，这样浏览器只是在与vercel的服务器进行交互， 没有直接向我的后端服务器发起请求。

之前遇到的问题是，因为我的后端服务器没有申请到SSL证书导致，我的后端请求都是以http的形式进行， 但是浏览器认为这是不安全的行为，直接将我的cookie给屏蔽掉， 导致我的前端一直登不上账号。因此如果你的后端不是https的请求，而前端是https的请求，有些浏览器会直接屏蔽掉不安全的请求。

那么如何实现vercel的反向代理的呢？

很简单， 如果你是通过上传项目到GitHub上，再去vercel上关联你的GitHub项目并进行部署，那你就可以直接去GitHub仓库中找到你的项目，把修改vercel.json文件。因为vercel上部署项目是和GitHub仓库相关联的, 你的仓库代码一改动，vercel就能识别到，自动为你重新部署(这一点要好评)，而且它会检查你的代码是否正确才会覆盖原来构建的代码。并且发邮件通知你是否构建成功! 这些天下来使用vercel，我觉得它非常好用, 省钱又省心，特别是域名交给它托管后，无需管理你的域名ip解析，直接就能自动设置。

将原来的vercel.json文件的内容

{"rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}

改为下面的

{"routes": [{"src": "/api/(.*)","dest": "https://your-backend-api.com/api/$1"}]
}

• 这个配置的意思是，当请求路径以 /api/ 开头时，Vercel 会将请求转发到你的后端地址 https://your-backend-api.com/api/，并将请求路径的后缀作为参数传递给后端。这样就可以通过 vercel 的路由规则，将 /api/* 的请求代理到后端应用上。这里使用正则表达式“(.*)”捕获了请求路径中的除了“/api/”之外的部分，并将其用“$1”表示。

• 在正则表达式中，$1 代表第一个括号匹配到的内容。例如，如果匹配的 URL 是 /api/users/123，那么正则表达式 /api/(.*)/ 中的 (.*) 将匹配到 users/123，并且 $1 代表的就是这个值。在这个配置中，dest 属性中的 $1 就是把匹配到的子串 users/123 替换成实际的目标 URL，从而实现反向代理的功能。

• 比如vercel部署的项目地址是https://example.com，你需要将 https://example.com/api/ 替换为你的实际后端地址https://your-backend-api.com/api。如果你的后端地址不是 HTTPS 的，可以使用 http://。

注意：开启反向代理后， 你的前端项目请求后端的接口地址要改动。比如你的前端项目的访问地址是https://example.com，而vercel代理的是请求路径以 /api/ 开头的，因此你的前端项目请求后端的接口地址要改成https://example.com/api，这样vercel才能实现反向代理。(这个是要到你前端项目中编写请求后端接口的文件里去修改)