实现vercel的反向代理和重定向

实现 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" }]
}

改为下面的（使用了 Vercel 的路由功能）

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

其中如果没有域名可以使用IP地址来代替。这样就能实现将后端的接口地址进行隐藏，也能解决前端的跨域问题。

• 这个配置的意思是，当请求路径以 /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，后端地址是https://your-backend-api.com/api，而vercel代理的是请求路径以 /api/ 开头的，因此你的前端项目请求后端的接口地址要改成https://example.com/api，这样vercel才能实现反向代理。(这个是要到你前端项目中编写请求后端接口的文件里去修改)

---

重定向

• 重定向是指客户端向服务器发送请求后，服务器返回一个特殊的响应，告诉客户端重新发送请求到另一个地址。在这个过程中，客户端会发起两次请求，第一次是原始请求，第二次是重定向后的请求。

• 在 vercel.json 文件中，可以使用 redirects 字段来配置 URL 重定向。如果你需要永久性重定向一个 URL，可以使用 redirects 字段。示例如下：

  {
    "redirects": [
      { "source": "/old", "destination": "/new", "statusCode": 301 }
    ]
  }
  

  • 这个配置将把 /old 重定向到 /new，并且使用 HTTP 301 状态码。

注意，在修改 vercel.json 文件之后，你需要重新部署才能使其生效。

举个栗子:

1. 在项目根目录下创建一个名为vercel.json的文件
2. 将以下代码复制到该文件中：

{
  "redirects": [
    { 
      "source": "/(.*)", 
      "destination": "https://blog.csdn.net/honorzoey", 
      "statusCode": 301 
    }
  ]
}

比如我将项目地址重定向到我的CSDN博客下： "https://blog.csdn.net/honorzoey
这样当访问我项目的地址时会重定向到我博客的域名。该规则会将任何匹配/.*的请求（即所有请求）都重定向到 "https://blog.csdn.net/honorzoey这个地址，并且使用状态码 301 （永久重定向）。
你可以根据自己的需要修改这个配置文件以满足特定的重定向需求。

3. 将更改推送到你的Vercel存储库(如果你是使用的GitHub来部署vercel项目， 只需提交修改，vercel会自动进行更新部署)。Vercel将自动更新并应用这些更改。

现在，所有流量都将重定向到新域名，并且浏览器和搜索引擎会将所有旧的链接视为永久性移动到新域名。

注意重定向和反向代理的区别 : 重定向是通过让客户端重新发送请求来实现跳转，而反向代理是通过代表服务器向客户端提供服务。反向代理是指将客户端的请求转发到内部网络中的服务器，并将服务器的响应返回给客户端。与重定向不同，客户端只需发起一次请求，而反向代理服务器则负责将请求转发到实际处理请求的服务器，并将响应返回给客户端。