Vercel搭建线上项目 (无服务器版-免费)

news2024/12/23 9:17:41

前言

  • 假如想做一个简单的功能，例如一个博客网站或网页小程序，以往我是要先花几百元购买ECS服务器，在服务器上安装运维面板、再安装Nginx、MySQL、NodeJS、Java、PHP等环境，最后实现一个API服务器。

  • 这种传统模式不但有着较高的技术门槛，而且站点的维护升级工作就已经足够繁琐、分散了诸多精力。

在这里插入图片描述

无服务器方案

这篇文章我给出了一个方案，借助Vercel、NextJS让你几分钟就能实现一个CURD（增删改查）的后端API，无需购买服务器，完全免费。

该方案有以下两个优点:

  • 操作简单：服务器的管理从应用开发中抽离了出来。云提供商负责置备、维护和扩展服务器基础架构等例行工作。开发人员可以简单地将代码进行自动打包与部署。

  • 节省费用：部署之后，无服务器应用即可响应需求，并根据需要自动扩容。公共云提供商的无服务器产品通常通过事件驱动执行模型来按需计量。因此，当无服务器功能闲置时，不会产生费用。

工具介绍

Vercel是什么

它是一个强大的 网站托管服务。Vercel类似于github page，但比github page强大、速度也快得多。通过绑定你的github项目，就能实现提交代码自动部署你的应用。

在这里插入图片描述

Next.JS是什么

Next.js是Vercel官方推荐的、一款极易上手的React 应用框架。使用NextJS可以快速开发 React 应用，而不是先花很多时间和精力去折腾各种开发工具。
在这里插入图片描述

Serverless 是什么

简单地理解：Serverless = Faas（函数即服务） + Baas（后端即服务）；

Serverless不代表再也不需要服务器了，而是说：开发者再也不用过多考虑服务器的问题
在这里插入图片描述
这里只是截图腾讯云对Serverless的表述进行讲解, 并不代表腾讯云才有Serverless技术, 望知悉!

快速开始

账号

首先要在 Vercel 后台注册一个账号，推荐用github直接登录。

初始化Vercel环境

执行 npm i -g vercel 安装vercel（NodeJs版本大于12）

在这里插入图片描述
控制台输入 vercel login 登录Vercel账号，输入指令后需要验证你的vercel邮箱，vercel会向该邮箱发送一个链接，点击邮箱中的链接就可以确认登录。

在这里插入图片描述

创建一个Vercel项目

创建一个空目录 demo-vercel

mkdir demo-vercel && cd demo-vercel # 创建并进入空目录

输入命令 vercel ，将当前目录初始化为vercel项目，vercel会询问你一些信息，一路回车就好。

在这里插入图片描述

第一个简单页面

在根目录新建的配置文件vercel.json，并填入下面的配置。(配置说明默认访问服务将跳转到welcome.html页面)

{
    "routes": [
        {
            "handle": "filesystem"
        },
        {
            "src": "/(.*)",
            "status": 404,
            "dest": "/welcome.html"
        }
    ]
}

welcome.html页面内容如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>欢迎</title>
	</head>
	<body>
			<h1>欢迎</h1>
	</body>
</html>

代码结构

在这里插入图片描述

第一个api接口

Vercel官方仅支持 Nodejs、Go、Python、Ruby 这几门语言创建服务，具体使用接入请参考 官方文档

这里选用 Node.js 来开发接口，初始化package.json、引入vercel相关的Typescript便于规范，执行以下脚本:

npm init # 一路回车按到底
npm i typescript 
npm i @vercel/node -D # 安装vercel依赖库

在这里插入图片描述
新建目录/api，并在/api下创建文件helloworld.ts， 文件内容如下：

import { VercelRequest, VercelResponse } from '@vercel/node';
module.exports = async (req: VercelRequest, res: VercelResponse) => {
    const data = {
        msg: "hello world!"
    };
    res.status(200).json(data);
}

当前目录结构如下：

在这里插入图片描述
执行 vercel dev 进行本地调试

vercel dev --debug

访问页面 http://localhost:3000/api/helloworld ; 链接效果如图：

在这里插入图片描述

部署上线

在控制台输入 vercel 即可开始自动部署，点击控制台输出的Preview后面的链接即可预览部署效果。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

数据库持久化

API接口最基本的增删改查等功能，依托于数据库持久化。这里我们选择接入免费的云数据库。

这里我使用 mongodb 举例, 你也可根据实际业务需要接入任意数据库来完成你的项目。因篇幅有限不做拓展

https://cloud.mongodb.com 提供的Mongodb数据库举例，512M免费存储额度，个人使用已经绰绰有余。

当然还有 db4free.net、mlab.com等其他云数据库网站，除此之外还有免费的rabbitMQ，kafka等。

创建数据库

在 https://cloud.mongodb.com 注册一个账号,注册完毕后进入找到 Create a cluster， 选择Free的免费方案。

在这里插入图片描述

配置服务器地点和服务提供商，(举例用的是Google Cloud，北美中部的服务器)；等待1-3分钟后创建完毕：

在这里插入图片描述

配置连接参数

创建一个访问用户，并选择用Password密码的形式连接：

在这里插入图片描述
添加允许访问改数据库的IP地址：这里可以点Add current ip address 表示添加当前电脑ip地址，点击 Allow access from anywhere 表示允许所有网络ip地址访问该数据库（这样可能会有风险）

在这里插入图片描述
在这里插入图片描述

客户端连接数据库：

点击connect

在这里插入图片描述
点击第三个Connect using MongoDB Compass，采用图形界面连接；

在这里插入图片描述
复制下面的连接代码

在这里插入图片描述
打开Navicat，选择新建MongoDB，在URI中输入刚才复制的代码，并且将密码部分改成你实际设置的密码；点击测试连接。

在这里插入图片描述
在这里插入图片描述

添加测试数据

我们用Navicat往MongoDB添加一条数据：创建一个数据库名叫vercel、创建一个集合的名叫demo，document内容为 {name:“tanghh”}

在这里插入图片描述
至此，数据库的创建，与连接配置已经完成，接下来在代码中实现功能

在代码中访问数据库

NPM 安装Mongodb依赖库

npm i mongodb
npm i @types/mongodb -D

在这里插入图片描述
接下我们用接口查询这条数据。我们在api目录下创建名为getUsername.ts的文件

import { VercelRequest, VercelResponse } from '@vercel/node';
import { MongoClient } from 'mongodb'
const CONNECTION_STRING = "mongodb+srv://xxx/vercel";
module.exports = async (req: VercelRequest, res: VercelResponse) => {
  const client = await MongoClient.connect(CONNECTION_STRING, { useNewUrlParser: true, useUnifiedTopology: true });
  const db = await client.db('vercel');
  var result = await db.collection("helloworld").find().toArray();
  console.log(client)
  console.log(db)
  console.log(result)
  res.status(200).json(result);
}

注意：

代码中的CONNECTION_STRING信息更换成你自己的!!!
CONNECTION_STRING变量的值，和之前用Navicat连接的代码不太一样，可以在网站后台找到, 如下图:
在这里插入图片描述

完成效果展示

至此，一个通过MongoDB返回数据的serverless接口开发完毕；类似的你可以用这个平台简易的完成一个CURD的功能

在这里插入图片描述
通过运行vercel --prod命令即可将其发布。

总结

动态API，数据库，托管服务器都是免费的，结合这套方案，轻装上阵，搭建你的API服务端吧~

拓展

Vercel API说明

在 vercel 中通过 res.json(obj) 来返回 JSON 数据，像这样的简单方便的函数并不为原生的 HTTP Handler (opens new window) 所提供。而由 vercel 提供的 Node.js Helper (opens new window) 实现:

  • req.query: An object containing the request’s query string, or {} if the request does not have a query string.

  • req.cookies: An object containing the cookies sent by the request, or {} if the request contains no cookies.

  • req.body: An object containing the body sent by the request, or null if no body is sent.

  • res.status(code): A function to set the status code sent with the response where code must be a valid HTTP status code. Returns res for chaining.

  • res.send(body): A function to set the content of the response where body can be a string, an object or a Buffer.

  • res.json(obj): A function to send a JSON response where obj is the JSON object to send.

  • res.redirect(url): A function to redirect to the URL derived from the specified path with status code “307 Temporary Redirect”.

  • res.redirect(statusCode, url): A function to redirect to the URL derived from the specified path, with specified HTTP status code.

Vercel.json 重定向说明

部署完成后，默认的路由路径是 /api，此时 / 会显示文件目录，如果想更好地扩展路由呢？

通过配置文件 vercel.json 配置 Rewrites/Redirects 可完成此功能，通过这一功能可以快速实现反向代理、路由转换等功能。

{
  "rewrites": [
    {
      "source": "/",
      "destination": "/api"
    }
  ]
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1551300.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

企业指标体系的落地与推广：让指标体系真正发挥作用

企业指标体系的落地与推广：让指标体系真正发挥作用

一、精心策划实施计划&#xff0c;确保项目有序进行 为确保指标体系的顺利落地与推广&#xff0c;我们精心策划了实施计划。首先&#xff0c;我们制定了详细的时间表&#xff0c;明确了项目启动、关键节点和结束时间&#xff0c;确保项目能够按期推进。同时&#xff0c;我们还将…
阅读更多...
rtph264depay插件分析笔记

rtph264depay插件分析笔记

1、rtp协议头 2、rtp可以基于TCP或者UDP 其中基于TCP需要加4个字节的RTP标志 3、rtph264depay定义解析函数gst_rtp_h264_depay_process&#xff0c;通过RFC 3984文档实现。 static void gst_rtp_h264_depay_class_init (GstRtpH264DepayClass * klass) {GObjectClass *gobject…
阅读更多...
C++初阶:2_类与对象(下)

C++初阶:2_类与对象(下)

类与对象(下) 一.再谈构造函数 1. 构造函数体赋值 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给对象中各个成员变量一个合适的初始值。 class Date { public:Date(int year, int month, int day){_year year;_month month;_day day;} private:int _ye…
阅读更多...
Kubernetes容器平台下的 GPU 集群算力管控

Kubernetes容器平台下的 GPU 集群算力管控

引言 随着最近一两年生成式大模型的迭代出新&#xff0c;尤其是以 ChartGPT 为代表的大语言模型&#xff0c;几乎一夜间让所有人都看到了人工智能改变世界的潜力。而作为持续发力 GPU 通用计算&#xff08;CUDA&#xff09;的 AI 专业显卡提供商&#xff0c;Nvidia 公司成为了…
阅读更多...
人大金仓数据库介绍与使用指南

人大金仓数据库介绍与使用指南

人大金仓数据库是一款强大的关系型数据库管理系统&#xff0c;具有简单易用、高性能和稳定可靠的特点。本文将介绍人大金仓数据库的安装方法、常用的SQL语法以及相关工具的使用。 一、安装方法&#xff1a; 1、下载人大金仓数据库安装程序&#xff1b; 2、运行安装程序&#…
阅读更多...
事件穿透效果

事件穿透效果

讲述一下事件穿透的需求&#xff0c;大家可以根据实际情况来考虑是否采用这种方式来制作页面&#xff0c;&#xff08;项目中遇到了底部是地图&#xff0c;两侧面板&#xff0c;但是UI在设计的时候为了好看&#xff0c;会有很大的遮罩阴影部分&#xff0c;如果按照时间制作会导…
阅读更多...
pip永久修改镜像地址

pip永久修改镜像地址

修改命令&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple/ 效果&#xff1a; 会在C:\Users\PC(用户名)\AppData\Roaming\pip目录下新增或修改文件pip.ini 文件内容&#xff1a; [global] index-url https://pypi.tuna.tsinghua.e…
阅读更多...
关于柔性阵列(/三维阵列)波束形成的仿真实践以及稳健波束形成的思考(1)

关于柔性阵列(/三维阵列)波束形成的仿真实践以及稳健波束形成的思考(1)

说明 关于波束形成&#xff0c;我之前写过几篇相关的博文&#xff0c;如参考资料[1]、[2]、[3]。除去在博文[2]中有讨论过阵元相对位置关系对波束形成的影响&#xff1a;“如何基于遗传算法优化阵元相对位置关系以压低旁瓣峰值”以外&#xff0c;似乎我认知里的天线阵列&#x…
阅读更多...
PS从入门到精通视频各类教程整理全集，包含素材、作业等

PS从入门到精通视频各类教程整理全集，包含素材、作业等

PS从入门到精通视频各类教程整理全集&#xff0c;包含素材、作业等 最新PS以及插件合集&#xff0c;可在我以往文章中找到 由于阿里云盘有分享次受限制和文件大小限制&#xff0c;今天先分享到这里&#xff0c;后续持续更新 【Photoshop 教程】史上最容易听懂的PS...在最后四…
阅读更多...
k8s入门到实战（十四）—— Helm详细介绍及使用

k8s入门到实战（十四）—— Helm详细介绍及使用

Helm 使用 Helm 是一个 k8s 应用的包管理工具&#xff0c;类似于 Ubuntu 的 APT 和 CentOS 中的 YUM。 Helm 使用 chart 来封装 k8s 应用的 yaml 文件&#xff0c;我们只需要设置自己的参数&#xff0c;就可以实现自动化的快速部署应用。 Helm 通过打包的方式&#xff0c;支…
阅读更多...
谭浩强第五版C语言课后习题（编程题）+答案

谭浩强第五版C语言课后习题（编程题）+答案

谭浩强第五版作为初学C语言必读的一本教材&#xff0c;课后习题具有非常大的参考价值&#xff0c;也是很多高校期末考试或者考研的重要参考。在这里我整理了一部分个人认为比较重要的编程题&#xff0c;供大家作参考 1.输入两个数&#xff0c;求他们的最大公约数和最小公倍数&…
阅读更多...
Cesium.js综合实验

Cesium.js综合实验

Cesium.js综合实验 1 概述 Cesium是一个跨平台、跨浏览器的展示三维地球和地图的开源 JavaScript 库&#xff0c;是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库&#xff0c;Cesium一词来源于化学元素铯&#xff0c;铯是制造原子钟的关键元…
阅读更多...
VUE+ elementUI 表头动态渲染的两种方法

VUE+ elementUI 表头动态渲染的两种方法

效果&#xff1a; <template><div><el-alert title"比较麻烦的写法" type"error"></el-alert><el-table border style"width:300px;" :data"tabelData"><el-table-columnv-for"column in colum…
阅读更多...
如何在群晖NAS搭建bitwarden密码管理软件并实现无公网IP远程访问

如何在群晖NAS搭建bitwarden密码管理软件并实现无公网IP远程访问

前言 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊如何在群晖NAS搭建bitwarden密码管理软件并实现无公网IP远程访问&#xff0c;希望大家能觉得实用&#xff01; 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&am…
阅读更多...
访问学者如何申请国外信用卡？

访问学者如何申请国外信用卡？

作为一名访问学者&#xff0c;如果你计划在国外长期居住或短期停留&#xff0c;并希望申请国外信用卡&#xff0c;这可能是一个相当实用的工具。国外信用卡不仅可以帮助你在海外购物和旅行时更加便利&#xff0c;还能建立起你在国际金融体系中的信用记录&#xff0c;为未来的金…
阅读更多...
鼠标不动了怎么办?鼠标不能移动解决方法

鼠标不动了怎么办?鼠标不能移动解决方法

鼠标不能移动有可能是鼠标坏了&#xff0c;或者是电脑的软件和硬件有冲突等原因造成。最近有小伙伴就咨询了有关鼠标的问题&#xff0c;昨天鼠标还能使用&#xff0c;不知道为什么今天就突然不能用了。那么我们在排除鼠标坏掉了的情况下&#xff0c;试试对鼠标进行修复吧。下面…
阅读更多...
请你记住这3款国产软件，免费又实用，它们值得收藏

请你记住这3款国产软件，免费又实用，它们值得收藏

闲话不多说&#xff0c;直上干货。 1、坚果云 坚果云是一款极具良心的网盘软件&#xff0c;其免费版本同样无广告干扰&#xff0c;界面设计简约大气&#xff0c;在文件上传与下载速度上&#xff0c;坚果云完全不限速&#xff0c;这一点远超其他同类产品。 用户可以在手机、电…
阅读更多...
粗略总结AI大模型学习需要了解的要点

粗略总结AI大模型学习需要了解的要点

目录 一、概念简介 二、兴起原因 三、相关要点 四、不足之处 五、总结 一、概念简介 AI大模型学习是指利用大规模数据集和强大计算能力进行深度学习模型的训练。随着数据的爆炸式增长和计算资源的提升&#xff0c;AI大模型学习成为了现代人工智能研究的重要方向。 二、兴起…
阅读更多...
徽宇阀门现已加入2024第13届生物发酵展会

徽宇阀门现已加入2024第13届生物发酵展会

参展企业介绍 温州徽宇阀门有限公司是专业生产高精度不锈钢过滤器设备及卫生级阀门、管道、管件及泵等系列产品。秉承严谨、实用的作风,所有产品均选用高品质的原材料。公司对产品品质的要求没有止境,生产全部采用CNC等国际一流的数控加工中心设备&#xff0c;所有产品均按照IS…
阅读更多...
Linux系统使用Docker部署Portainer结合内网穿透实现远程管理容器和镜像

Linux系统使用Docker部署Portainer结合内网穿透实现远程管理容器和镜像

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023