vercel和netlify部署代码并解决接口代理转发的问题(和Nginx功能一样)

前言

部署过程就不说了,部署完成后是这样子的

然后访问链接,无法访问

解决

依次点击 Settings–>Domains，在输入框中输入你的域名并点击 Add 按钮。

以此域名为例子demo.gshopfront.dreamlove.top为例,点击添加

我们前往域名管理系统,记录下绿色的值以腾讯云的为例

上图中的Name对应的是主机记录,Value对应的是记录值,记录类型选择CNAME

验证成功,vercel自动生成ssl证书当中

访问成功

例子http://demo.gshopfront.dreamlove.top/

vercel解决接口代理问题

编译为静态文件后,代理转发没有了,跨域了,所以我们需要自己配置下代理转发给vercel使用
一模一样添加完成https://segmentfault.com/a/1190000042276351?sort=newest
安装开发依赖

npm i -D http-proxy-middleware

目录建立vercel.json,注释记得删除

//注释记得删除
{"rewrites": [{"source": "/api/(.*)", //要匹配的路径前缀(我们本地访问的路径),结合自己的前缀设置"destination": "/api/proxy" //需要转发给哪一个目录下的配置}]
}

建立api/proxy.js文件
- 注意: 由于这里的接口不需要pathRewrite,所以就删除了pathRewrite配置
  - 效果,当我们访问搭建好的目录https://demo.gshopfront.dreamlove.top/api/user的时候,就会被转发给http://gmall-h5-api.atguigu.cn/api/user
- 如果需要去除掉api这个前缀,就把pathRewrite打开,
  - 效果:当我们访问搭建好的目录https://demo.gshopfront.dreamlove.top/api/user的时候,就会被转发给http://gmall-h5-api.atguigu.cn/user,(去除掉了api)

// api/proxy.js
// 该服务为 vercel serve跨域处理
const { createProxyMiddleware } = require('http-proxy-middleware')module.exports = (req, res) => {let target = ''// 代理目标地址// 这里使用 backend 主要用于区分 vercel serverless 的 api 路径// target 替换为你跨域请求的服务器 如： http://gmall-h5-api.atguigu.cnif (req.url.startsWith('/api')) {target = 'http://gmall-h5-api.atguigu.cn'}// 创建代理对象并转发请求createProxyMiddleware({target,changeOrigin: true,pathRewrite: {// 通过路径重写，去除请求路径中的 `/api`// 如果开启了,那么 /api/user/login 将被转发到 http://gmall-h5-api.atguigu.cn/user/login//'^/api/': '/',},})(req, res)
}

编辑好后推送,然后等待重新编译
之后会出现此下拉栏目

如果没有出现Functions栏目,就点击这里

这样子也可以出现Function

选择我们的api/proxy

然后就可以正常啦

如果部署遇到这种问题error @achrinza/node-ipc@9.2.2: The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17". Got "18.13.0"

发现vercel设置node版本后重新部署也不行,不知道为什么,…

netlify解决接口代理问题

建立netlify.toml文件

[[redirects]]from = "/prod-api/*"to = "http://gmall-h5-api.atguigu.cn/:splat"status = 200

在netlify网站请求接口如果使用 http://localhost/prod-api/news 就会被转发到 https://http://gmall-h5-api.atguigu.cn/news 来获取 news 接口数据。
- 部署演示地址:https://demo.gshopfront.dreamlove.top/
官方的配置说明
- https://docs.netlify.com/configure-builds/file-based-configuration/#headers
- https://docs.netlify.com/routing/redirects/redirect-options/
- https://docs.netlify.com/routing/redirects/#syntax-for-the-netlify-configuration-file

参考文章

https://segmentfault.com/a/1190000042276351?sort=newest
https://www.jianshu.com/p/09d753c75fc7
React项目全球新闻发布管理系统 - 新版问题解决方式整理及部署网站至 Netlify
- 照片备份大法

vercel和netlify部署代码并解决接口代理转发的问题(和Nginx功能一样)相关推荐

.NET Core 实例接口代理转发
先讲讲本文的开发背景吧.. 在如今前后端分离的大背景下,咱的客户又有要求啦~ 要前后端分离~ 然因为种种原因..没办法用用纯前端的框架(其实是学习成本高,又没钱请前端开发人员)... 所以最终决定了一 ...
PHP_代理转发接口
原理:用PHP的GET和POSt请求,实现代理访问服务器内网接口. (代理不依赖于Nginx.Apache) 假设: 外网链接:http://127.0.0.2 内网地址:http://127.0.0 ...
都9012年了,你还在手动部署代码吗(二)
前言在写完基于 Webhooks 的"第一篇<都9012年了,你还在手动部署代码吗>"之后,有同学评论到"至少你得用个 docker 啊"&quo ...
解析WeNet云端推理部署代码
摘要:WeNet是一款开源端到端ASR工具包,它与ESPnet等开源语音项目相比,最大的优势在于提供了从训练到部署的一整套工具链,使ASR服务的工业落地更加简单. 本文分享自华为云社区<WeNe ...
还在用Swagger？我推荐这款零代码侵入的接口管理神器！
静态的 Swagger 们跟不上频繁变更的代码 "为什么改了这个没告诉我","实际功能和文档上说的不一样啊".这些话大家做开发的想必耳朵都听出老茧了.真不是故意 ...
比swagger更好用的工具？强烈推荐这款零代码侵入的接口管理神器
静态的 Swagger 们跟不上频繁变更的代码 "为什么改了这个没告诉我","实际功能和文档上说的不一样啊".这些话大家做开发的想必耳朵都听出老茧了.真不是故意 ...
还在用Swagger？我推荐这款零代码侵入的接口管理神器
静态的 Swagger 们跟不上频繁变更的代码 "为什么改了这个没告诉我","实际功能和文档上说的不一样啊".这些话大家做开发的想必耳朵都听出老茧了.真不是故意 ...
使用 netlify 部署你的前端应用
我前几天写了一篇文章, 如果你想搭建一个博客 ,其中提到了使用 netlify 做博客托管服务. netlify 可以为你的静态资源做托管,就是说它可以托管你的前端应用,就像 github page ...
netlify 部署vue_如何构建和部署无服务器功能以进行Netlify
netlify 部署vue 介绍 (Introduction) It is a good software engineering practice to separate portions of y ...

vercel和netlify部署代码并解决接口代理转发的问题(和Nginx功能一样)

前言

解决

vercel解决接口代理问题

netlify解决接口代理问题

参考文章

vercel和netlify部署代码并解决接口代理转发的问题(和Nginx功能一样)相关推荐

最新文章

热门文章