快速上手 vercel,手把手教你白嫖部署上线你的个人项目

news2024/11/25 12:40:13

在这里插入图片描述

壹 ❀ 关于 vercel

Vercel 是一个云服务平台,支持静态网站(纯静态页面,比如现在base utils 文档也是基于vercel)和动态网站的应用部署、预览和上线。如果你用过 GitHub Pages ,那么心里可能不会太陌生,但你也能通过 vercel 集成 GitHub 后后,在 GitHub 项目进行代码推送,PR合并自动部署的目的,且你不需要考虑服务器问题。

与其说这是 vercel 可行性调研方案,不如说是 vercel 用法普及,因为 vercel 自身内置 CI CD,只要你将项目与 vercel 关联,你就能通过命令快速部署,这没什么难度,接下来给大家讲解 vercel 优势、部署方式、能力边界以及接下来工作可能要思考的点。

贰 ❀ Vercel 优势(能带来什么)

使用 vercel 能为我们带来什么?关于 vercel 能力优势,这里我根据我个人使用体验简单罗列:

  • 个人版永久免费,每个月 100G 带宽(别人访问你的项目所耗费的流量),个人项目部署完全够用,需要注意的是团队模式收费,所以要协作你只能付费。
  • 内置 CI CD,你可以理解成一个黑盒,项目丢进去,只需要将项目导入 vercel ,一句命令自动部署。
  • 因为内置构建流程,支持代码推送、PR 自动触发构建,不同分支唯一地址,方便测试。
  • 支持本地、测试、生产三种环境部署,仅仅是命令区别,上手成本极低。
  • 丰富的集成能力,项目部署自动监控,端到端自动化测试等等,当然这些并并属于 vercel 自身的能力,但它可以为你提供集成入口,让这些成为你自动部署中自动进行的一步,比如构建生产后自动完成性能指标输出,自动化测试,以及后续项目监控等等。

叁 ❀ 部署方式

将项目导入 vercel 后,vercel 会自动检测并为项目所用的框架设置最佳构建配置和部署配置,这也是为什么导入项目就能直接构建的一部分原因,我们先说两种导入项目到 vercel 平台的两种方式。

3.1 GitHub部署

在 dashboard 点击 Add New 按钮选择 Project,这时会跳转到导入项目界面,选择你的 GitHub 账号(如果之前没绑定这里也可以绑定 GitHub 账号),然后点击导入按钮,这是会跳转到项目设置。

比如这里我提前把 vercel 官方的 next 模版项目克隆到了我的 GitHub 账户,并在这里尝试导入这个 next 项目,可以看到 vercel 自己识别到项目所用框架是 nextjs ,以及构建命令会自动识别成 npm run build,当然如果项目框架识别不准,你自己的项目可能后续使用了 pnpm 等其它命令,所以这些配置在此时都可以根据实际情况修改,这里我们直接默认。

直接点击下面的 Deploy 进行部署,然后坐等构建就能看到 vercel 为我们部署后独一无二的预览地址了。

由于实际开发,我们本地肯定也会克隆 GitHub 项目,那么在后续只要我们修改项目代码,push 到仓库,GitHub 感知到代码变动,vercel 就会自动再次部署。

你可能会想,我 GitHub 项目拷贝下来会有主分支,以及我的开发分支,vercel 虽然能自动部署,它怎么知道我要部署到什么环境,事实上 vercel 也已经做了提前预设,假设你的代码变动发生在 main 或者 master 分支,那么 vercel 就会自动构建部署生产环境,除此之外的分支,vercel 都会更新预览(测试)环境。

关于 GitHub 主分支,你可以在 GitHub 进行设置,这个 vercel 无需感知,反正是主分支变动它会对应帮你部署就完事了。

另外,让远程仓库代码变动有两种方式,第一种是直接本地推送代码,第二种就是提 PR 后合并到目标分支触发变动,这里做个演示。

假设你集成了 GitHub ,在你 PR 合并前,你甚至能在 GitHub PR 中直接看到你需要提 PR 的分支部署后的预览地址,直接看 vercel 帮你部署后的效果。

上图就是我基于主分支 main 切出了一个开发分支 main-echo,然后给 main 分支提了一个 PR,在 PR 合并页面你能看到 GitHub 这里直接给出了 main-echo 分支的部署预览地址,之后我们合并 PR ,由于 main 分支代码发生改变,vercel 会自动帮你构建部署 main 分支,好处就是能保证每次部署前,你能直接看每个分支效果是否符合你的预期。

可以看到 PR 合并后,vercel 这边已经帮我更新了生产环境,且提交记录与 GitHub 保持一致。

3.2 本地部署

有时候,我们的项目可能并不在 GitHub 上,比如现有的 notta 在亚马孙,我如果需要上传 GitHub 还要做初始化一系列操作,比较麻烦,那么我们就可以通过本地初始化 vercel 让项目直接关联到 vercel,之后直接通过构建命令来达到不同环境的部署效果。

我们需要在本地安装 vercel,建议是全局安装:

npm install -g vercel

之后执行如下命令保证你本地登录了 vercel 账号:

vercel login

之后进入你的项目根路径,执行 vercel 即可:

vercel

之后你需要进行一些基础配置,比如你需要选择要部署的项目目录、构建命令和输出目录,如果直接回车就是执行默认配置,这些配置走完后项目就会进行部署,你可以直接等待终端部署完成后的预览地址,你可以回到 vercel 后台找到你刚才关联部署的项目,一样可以找到预览地址。

我们需要区分 GitHub 部署与本地部署的一些区别,集成 GitHub 后,vercel 会根据 GitHub 代码仓库分支变化,对应的自动部署匹配环境:

  • 生产环境:假设 GitHub 主分支直接发生代码变动,比如 push,或者有 PR 合并到主分支都会导致生产环境重新部署,而主分支默认是 main 或者 master 分支,你可以在 GitHub 自定义你的主分支。
  • 预览环境:除了主分支之外的其他分支如果发生代码变动,vercel 会自动构建属于这个分支的独一无二的预览地址。

我们也可以直接通过命令来进行本地部署,但如果我们集成 GitHub,还是建议走 GitHub 工作流,这样构建会更加规范。

因此构建命令更适用于本地部署,因为我们的项目并未集成 GitHub ,vercel 无处感知代码变化,这就需要开发来手动通过命令来达到不同环境部署更新的目的,接下来我们介绍不同环境的区别以及对应的命令。

肆 ❀ 构建命令与环境介绍

vercel 其实也分为开发环境,预览环境(测试环境)以及生产环境三个概念,在 vercel 团队版,你甚至能在预览环境直接进行评论(而且评论也能集成到 slack,挺符合目前我们的生态),比如 UI 觉得某些页面还原度不够他就能在预览环境进行评论,所以不同环境确实有本质上的区别以及作用。

我们可以通过如下三个命令分别构建不同环境,因为比较简单,就一笔带过:

  1. vercel dev: 这个命令用于启动本地的开发环境。它会模拟 Vercel 的云环境,让你可以在本地进行开发和测试。使用这个命令,你可以实时看到你的更改效果,而不需要将它们部署到预览或生产环境。

  2. vercel: 这个命令用于将你的项目部署到 Vercel 的预览环境。预览环境是一个为了测试和分享而设立的临时环境,你可以在里面看到你的更改会在生产环境中出现的样子。这个命令非常适用于团队合作的场景,你可以用它来分享你的更改,获取反馈,然后在推向生产环境之前进行进一步的调整。

  3. vercel --prod: 这个命令会将你的应用部署到生产环境。生产环境通常代表了你的应用的正式发布版本,所部署的内容会对公众可见。这个命令就是将你的项目部署上线的最终步骤。

伍 ❀ 踩坑与 vercel 平台设置

单论 vercel 平台你会发现非常简单,导入项目,通过代码推送或者几句命令基本上能满足你的大部分需求,但事实上,我觉得困难的其实是将你个人的项目导入 vercel 并部署成功。

假设你使用 vercel 官方各框架的模版,因为这些模版比较纯粹简单,你确实不需要任何改动就能成功,但假设你是一个开发已久包含各种定制的项目,可能就没那么顺利,接下来介绍下我将 notta 部署到 vercel 所遇到的一些问题。

  • vercel 部署对于文件大小写引用更为严格,比如我发现自己项目一些文件引用文件是小写,但引用某个字母大写,Jenkins部署这些非常正常,也不会报错,但vercel 会认为这是错误,并直接报错,如下图。

    这里其实就是因为实际的文件命为 checkbox 而非 Checkbox,所以如果遇到这样的错误,直接找到构建错误信息的文件去看看资源是否存在,或者资源命是否大小写匹配。

  • vercel 在未来只支持 node 18 版本,且 vercel 平台默认就是 18 版本,一般如果你遇到了如下错误,那就是说明 node 版本过高,比如我们现在的项目使用的版本就是 16 ,然后走 vercel 部署 使用18 版本就会报错。

    我之前一直以为需要降低我本地的 node 版本,后来一想不对啊,vercel 部署走的是它的服务,跟我本地环境有啥关系,果然在项目设置中我们能找到 node 版本设置,将其修改为与项目 node 版本匹配的版本之后再构建就不会有上图的错误。

    但即便改成 16 避免了这个报错,vercel 还是会给出 node 版本的告警,它会告诉你在今年8月不再支持 node 14 以及 16 版本的部署,以及在官方博客也提到了这个问题。

  • 你可能需要根据自身项目构建配置,对应的调整 vercel 平台的项目设置,比如在这里可以看到构建相关设置,在之前我们提到 vercel 会根据你的项目自动识别框架并初始化默认配置,比如我们项目的在上传后 vercel 成功识别成了 umi,且默认输出目录是 dist,但事实上我们的输出目录并不是这个名字,所以需要在这里修改。

  • vercel 平台环境并不支持 zip,我在很长一段时间构建项目时 vercel 一直给我报找不到 zip 命令的错误,但我并未发现我的包依赖中有这个包名,同时保险起见,我甚至专门在项目中安装了 zip 这个包,但结果依旧不行,之后我尝试询问 GPT,也确实在 build 命令中发现了一小段利用 zip 来压缩打包产物的命令,在删除这段行为后构建正常。

    另外,如果大家看到类似上面的报错,一定不要去管两个错误,比如 exited with 1这种,这类错误都是属于构建失败的通用错误,就像接口 500 给了你一个通用 code 码一样,真正的错误一定就是第一句,你只用解决这个错误就完事了。

陆 ❀ 能力边界

以上是 vercel 平台部署以及一些使用上需要注意的点,考虑到未来项目发展,这里顺带普及下我注意到的能力边界。

6.1 支持域名自定义

理论 vercel 在项目部署后会给我们生产独一无二的地址,但都带有 vercel 后缀,如果是生产环境对外,vercel 痕迹就太明显了,所以如果大家有购买域名,也可以在项目设置中自定义域名。

6.2 支持部署 URL 私有化与预览地址自定义(要钱)

当我们部署预览环境或生产环境时,Vercel 将自动生成唯一的 URL 便于我们访问;默认情况下,该 URL 可以公开访问,但我们可以使用部署保护将其配置为私有地址,比如我们并不希望外界访问我们的测试地址。

关于 URL 这里先介绍几种地址结构:

生成环境生成的地址一般是项目名拼接 scope,结构为:

<project-name>-<scope-slug>.vercel.app;

除此之外还有项目名拼项目唯一哈希的地址:

<project-name>-<unique-hash>-<scope-slug>.vercel.app

当然有时候我们需要区分项目,所以 vercel 也提供了拼接了项目分支的地址:

<project-name>-git-<branch-name>-<scope-slug>.vercel.app

除了分支,假设我们是团队版,vercel 还会提供项目名拼接用户名的地址,便于区分这个地址是谁构建,结构为:

<project-name>-<author-name>-<scope-slug>.vercel.app;

我们在项目部署面板可以看到不同类型的地址类型,当然这些地址最终呈现的效果完全一致(这里我是个人版)

聊聊部署保护,vercel 支持单个部署添加密码保护或者直接将部署设置为私有化部署,前者需要输入预设的密码才能访问地址,后者可以直接大范围让所有部署地址变成私有化,你可能需要密码或者 vercel 身份效验才能访问,比如企业版中我们可能不希望团队外任何人访问测试地址。

但需要注意的是这项功能需要企业版或者 PRO 版本,简单来说无法白嫖。

6.3 支持 next 项目与 Monorepos 仓库部署

比如未来我们项目仓库都需要迁移 Monorepos,可能一个项目下需要分别部署单个子项目,目前 vercel 能很好支持 Monorepos 仓库部署,官方也提供了 Monorepos 仓库的例子,因为比较简单大家可以自行尝试。除此之外 vercel 对于 next 项目支持也非常友好,的以及现有项目框架还要迁移

支持memorepo

6.4 丰富的集成能力

除了前面提到的 GitHub 在集成上表现,vercel 其实提供了配套的对于项目部署中性能检测、项目安全、项目监控、端到端测试等一系列能力,当然现在我们的做法是分散了不同平台(比如 sentry),而非自动化部署一条线中的一部分。

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

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

相关文章

Web3 在Truffle项目中编写出自己的第一个solidity智能合约

好 上文Web3本地搭建truffle智能合约开发环境我们在本地搭起了一个 Truffle 项目 然后 我们说明项目中文件的用途 然后 我们还是通过ganache模拟一个本地的区块链环境 然后打开我们搭建的Truffle项目 首先 我们第一个要看的肯定是truffle-config.js 肯定要先配好连接的环境 我…

UDP 协议【传输层协议】

文章目录 1. 传输层1.1 TCP 与 UDP 2. 端口号2.1 端口号标识进程2.2 通过IP地址、端口号、协议号进行通信识别2.3 协议号2.4 端口号的范围2.5 常用命令netstatiostatpidof 2.6 存疑 3. UDP 协议3.1 地位3.2 报头的分离和交付3.3 UDP 报文的格式3.4 UDP 数据封装和分用数据封装数…

rk3288中apk串口打开失败,selinux权限问题

apk打开串口失败 报错信息&#xff1a; 07-03 17:05:27.030 4582 4582 W jw.ComAssistant: type1400 audit(0.0:56): avc: denied { read } for name"ttyS2" dev"tmpfs" ino7704 scontextu:r:untrusted_app:s0:c512,c768 tcontextu:object_r:ttyS2_dev…

《YOLOv8魔术师》专栏介绍 CSDN独家改进创新实战专栏目录

&#x1f4a1;&#x1f4a1;&#x1f4a1;Yolov8魔术师&#xff0c;独家首发创新&#xff08;原创&#xff09;&#xff0c;持续更新&#xff0c;适用于Yolov5、Yolov7、Yolov8等各个Yolo系列&#xff0c;专栏文章提供每一步步骤和源码&#xff0c;轻松带你上手魔改网络 &…

xml合并

from xml.etree.ElementTree import ElementTree, Element, parseimport xml.etree.ElementTree as ETimport osimport shutilhole_path ./Annotationsarm_path ./Annotations1out_path ./out# 格式化def __indent(elem, level0):i "\n" level*"\t"if…

UE5.2 LyraDemo源码阅读笔记(三)

进入淘汰模式游戏流程 启动游戏&#xff0c;进入流程&#xff1a; 1、进入Lyra游戏第三个体验入口FrontEnd。 2、来到大厅主界面后&#xff0c;点击&#xff1a; Play Lyra > Start A Game >ELIMINATION就会进入到淘汰模式游戏。 看看蓝图和代码&#xff0c;其中的UI流程…

dubbo-admin下载安装教程

目录 1.下载 2.项目结构 3.后端打包 4.前端打包 4.1.node js环境准备 4.2.依赖安装 4.3.启动、打包 1.下载 下载地址&#xff1a; GitHub - apache/dubbo-admin at develop dubbo-admin项目有多个分支&#xff0c;最新版本的dubbo-admin在使用go语言进行重构&#xf…

解决电脑提示vcruntime140_1.dll无法继续执行代码的问题

vcruntime140_1.dll丢失要怎么办&#xff1f;其实很多人都在头疼这个问题&#xff0c;关于dll文件的丢失这事情是时常发生的&#xff0c;因为电脑的杀毒软件有时候会误杀&#xff0c;然后就会导致你的游戏程序都打开不了&#xff0c;你必须要修复好了才行&#xff0c;今天小编就…

统计文本中的数字出现频次

统计文本中的数字出现频次&#xff1a;磁盘上有多个文本文件&#xff0c;统计数据写入excel。 (本笔记适合初通 Python 的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教…

AttributeError: module ‘PIL.Image‘ has no attribute ‘ANTIALIAS‘

在使用ddddocr进行图片识别时&#xff0c;报错了&#xff1a; AttributeError: module PIL.Image has no attribute ANTIALIAS 我使用的是Python 3.11&#xff0c;查看一下pillow的版本&#xff1a; print(PIL.__version__)10.0.0 到处百度也没找到原因&#xff0c;最后&am…

IDEA解析Maven依赖过慢

查看Maven配置文件&#xff0c;是否更改为阿里源 maven安装目录/conf/setting.xml 搜索mirrors并在其中添加 <mirror><id>alimaven</id><name>aliyun maven</name><url>http://maven.aliyun.com/nexus/content/groups/public/ </url&…

【嘉立创EDA】层次原理图功能使用,或放置复用图块方法

文章路标👉 文章解决问题主题内容小结文章解决问题 1️⃣ 在一些较为复杂的原理图绘制时,常需要使用到复用图块。何为复用图块,笔者摘取ST MB1136设计原理图纸可以较好表述这个功能,如下图所示: [本图摘取自NUCLEO-F103RB设计图纸 sheet 2 of 5] 图中左上角绿色图块为…

探索iPadOS 17的亮点特性:值得关注的新功能揭秘

探索iPadOS 17的亮点特性&#xff1a;值得关注的新功能揭秘 看完在WWDC23上作为久违的“OneMoreThing”亮相的令人兴奋的AppleVisionPro后&#xff0c;是时候看看同样作为重要角色出现在发布会上的iPadOS了。与iOS一样&#xff0c;iPadOS也来到了17时代。除了一年后同步iOS16的…

WinApp自动化测试之WinAppDriver工具简介

前篇文章中&#xff0c;我们讲到了WinApp自动化测试工具的选择&#xff0c;今天我们来简单介绍WinAppDriver工具。 Windows Application Driver (WinAppDriver)是Windows系统上的一个应用程序驱动工具&#xff0c;使用该驱动程序&#xff0c;测试人员能够通过Appium-Python-Cl…

el_table切换行前校验,决定是否可切换

思路&#xff1a;拿到当前点击行并存储比如叫做oldRow&#xff0c;把即将切换行的row与oldRow做对比&#xff0c;校验是否可切换&#xff0c;若校验不可切换&#xff0c;则通过遍历仍选中仍选中oldRow.

python简单实现人脸检测/跟随

import cv2# 加载人脸识别器的模型 face_cascade cv2.CascadeClassifier(cv2.data.haarcascades haarcascade_frontalface_default.xml)# 打开摄像头 cap cv2.VideoCapture(0)# 初始化人脸框位置 prev_faces []# 定义绘制带圆角矩形边框的函数 def draw_rounded_rectangle(…

C语言学习(三十一)---结构体、联合体的在内存中的存储

在上一篇文章中&#xff0c;我们学习了枚举、位段和联合体的相关内容&#xff0c;在文章的末尾&#xff0c;我们还差了关于联合体的存储问题的内容&#xff0c;今天我们将学习该部分的内容&#xff0c;好了&#xff0c;话不多说&#xff0c;开整&#xff01;&#xff01;&#…

TiDB(2):TiDB架构特性

1 TiDB 整体架构 TiDB 集群主要包括三个核心组件&#xff1a;TiDB Server&#xff0c;PD Server 和 TiKV Server。此外&#xff0c;还有用于解决用户复杂 OLAP 需求的 TiSpark 组件和简化云上部署管理的 TiDB Operator 组件。 架构图解 1.1 TiDB Server TiDB Server 负责接收…

20个主流的代码生成LLM大模型及9种常见应用场景

基于生成式AI的代码生成&#xff08;Code Generation&#xff09;是一个重要的新领域&#xff0c;用于根据不完整的数据源、用另一种编程语言编写的程序、自然语言描述或执行日志来预测代码或程序结构。 多年来&#xff0c;开发人员经常从博客、帖子、文章和其他网站获取代码&…

vue引用百度地图,drawingManager.setDrawingMode不能接受参数,否则会报错

直接上部分代码&#xff1a; 引用百度地图后&#xff0c;没报错&#xff0c;但是鼠标绘制线路时报错&#xff1a; // 绘制点线 this.drawingManager new window.BMapLib.DrawingManager(this.map, { isOpen: true, //是否开启绘制模式 //enableDrawingTool: true, //是否显示…