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

最新推荐文章于 2024-08-20 09:15:35 发布

Fong灵

最新推荐文章于 2024-08-20 09:15:35 发布

阅读量2.2k

点赞数 10

文章标签：无服务器 ci/cd 自动化持续集成持续部署

本文链接：https://blog.csdn.net/weixin_45987569/article/details/137111968

版权

前言

假如想做一个简单的功能，例如一个博客网站或网页小程序，以往我是要先花几百元购买ECS服务器，在服务器上安装运维面板、再安装Nginx、MySQL、NodeJS、Java、PHP等环境，最后实现一个API服务器。
这种传统模式不但有着较高的技术门槛，而且站点的维护升级工作就已经足够繁琐、分散了诸多精力。

在这里插入图片描述

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

该方案有以下两个优点:

操作简单：服务器的管理从应用开发中抽离了出来。云提供商负责置备、维护和扩展服务器基础架构等例行工作。开发人员可以简单地将代码进行自动打包与部署。
节省费用：部署之后，无服务器应用即可响应需求，并根据需要自动扩容。公共云提供商的无服务器产品通常通过事件驱动执行模型来按需计量。因此，当无服务器功能闲置时，不会产生费用。

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

在这里插入图片描述

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

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

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

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

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

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

在这里插入图片描述

创建一个空目录 demo-vercel

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

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

在这里插入图片描述

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

{
   
    "routes": [
        {
   
            "handle": "filesystem"
        },
        {
   
            "src": "/(.*)",

关注