vercel部署过程

我懒的很，很多时候这里是放指令的地方，但是我网站访问偏慢，我也不知道是不是问ai更快啊QAQ，那我写这个有什么意义吗？
猜猜我为什么不发图，发图很费图床的好吧，而且代理站点有点远，上图床很大概率加载不出来┭┮﹏┭┮

文章参考地址：https://www.cnblogs.com/echolun/p/17524216.html

Vercel，一个支持静态和动态网站部署的云服务平台，其特点包括个人版免费、内置CICD、自动部署、GitHub集成和丰富的集成能力。文章详细讲解了如何部署、优势及注意事项，包括环境区分、部署保护和高级功能如Monorepos和Next.js项目支持。

但是这玩意部署的东西是墙外的，如果要墙内访问，请手动解析dns和解析一个国内域名，或者更暴力的，直接挂梯子出去访问

你可以让其和你的git仓库联系上，可同步过来几个仓库，方便管理

我还是多啰嗦下啊，为什么选择Vercel

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

部署方便且便宜是最大的优点了，至于访问这个不是问题
##部署方式
将项目导入 vercel 后，vercel 会自动检测并为项目所用的框架设置最佳构建配置和部署配置，这也是为什么导入项目就能直接构建的一部分原因，我们先说两种导入项目到 vercel 平台的两种方式。

GitHub部署

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

这个过程会自动识别你的项目框架，如果没识别准确的话，请根据实际情况更改
配置完毕后直接点击下面的 Deploy 进行部署，然后坐等构建就能看到 vercel 为我们部署后独一无二的预览地址了。这个网站如果要访问的话一般要梯子，请提前准备好。
你之后更新的项目，在后续的修改过程中，你修改项目代码，push 到仓库，GitHub 感知到代码变动，vercel 就会自动再次部署。这个过程完全自动
我GitHub项目拷贝下来会有主分支，以及我的开发分支，vercel 虽然能自动部署，它怎么知道我要部署到什么环境，事实上 vercel 也已经做了提前预设，假设你的代码变动发生在 main 或者 master 分支，那么 vercel 就会自动构建部署生产环境，除此之外的分支，vercel 都会更新预览（测试）环境。

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

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

本地部署

你要觉得一些测试项目扔git上面太掉价，你又要一个假云服务器，就直接本地部署得了。

我们需要在本地安装 vercel，建议是全局安装，这时候在不c盘战士后头累死你

1
npm install -g vercel

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

1
vercel login

他会叫你邮箱验证的喔，去邮箱里面操作，不是卡住了o(￣ヘ￣o＃)

然后进入到项目根目录，执行vercel即可：

1
vercel

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

我的建议是除非你很熟练，那么先一路默认配置先，后头可以改的
我们需要区分 GitHub 部署与本地部署的一些区别，集成 GitHub 后，vercel 会根据 GitHub 代码仓库分支变化，对应的自动部署匹配环境：

  • 生产环境：假设 GitHub 主分支直接发生代码变动，比如 push，或者有 PR 合并到主分支都会导致生产环境重新部署，而主分支默认是 main 或者 master 分支，你可以在 GitHub 自定义你的主分支。
  • 预览环境：除了主分支之外的其他分支如果发生代码变动，vercel 会自动构建属于这个分支的独一无二的预览地址。
    我们也可以直接通过命令来进行本地部署，但如果我们集成 GitHub，还是建议走 GitHub 工作流，这样构建会更加规范。

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

你的项目结构请一定要清楚，使用什么框架进行部署

构建命令与环境介绍

vercel 其实也分为开发环境，预览环境（测试环境）以及生产环境三个概念，在 vercel 团队版，你甚至能在预览环境直接进行评论（而且评论也能集成到 slack，挺符合目前我们的生态）
我们可以通过如下三个命令分别构建不同环境，个人感觉很重要的，因为你在编辑的时候看不见啊，要是谁可以搞个多语言通用的即时编辑器我会爱死他的。

  1. vercel dev： 这个命令用于启动本地的开发环境。它会模拟 Vercel 的云环境，让你可以在本地进行开发和测试。使用这个命令，你可以实时看到你的更改效果，而不需要将它们部署到预览或生产环境。
  2. vercel： 这个命令用于将你的项目部署到 Vercel 的预览环境。预览环境是一个为了测试和分享而设立的临时环境，你可以在里面看到你的更改会在生产环境中出现的样子。这个命令非常适用于团队合作的场景，你可以用它来分享你的更改，获取反馈，然后在推向生产环境之前进行进一步的调整。
  3. vercel --prod： 这个命令会将你的应用部署到生产环境。生产环境通常代表了你的应用的正式发布版本，所部署的内容会对公众可见。这个命令就是将你的项目部署上线的最终步骤。

注意事项

注意你的英语阅读能力或者有一个靠谱的阅读器或者翻译器，你会感谢我的噗噗。

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

所以如果遇到这样的错误，直接找到构建错误信息的文件去看看资源是否存在，或者资源命是否大小写匹配
乐中乐之大小写错误，简单而又致命，怎么这么大人还会大小写不分啊，杂鱼杂鱼

  • 主要对应版本号
  • 你可能需要根据自身项目构建配置，对应的调整 vercel 平台的项目设置，在这里可以看到构建相关设置，在之前我们提到 vercel 会根据你的项目自动识别框架并初始化默认配置，然而这有些时候你的项目并没有叫这个的，记得核对更改
  • vercel 平台环境并不支持 zip，我在很长一段时间构建项目时 vercel 一直给我报找不到 zip 命令的错误，但我并未发现我的包依赖中有这个包名，

未来展望

支持域名自定义
你要一直用默认给你分配的那个又臭又长的地址，我相信你会疯的，点进去就一直转圈圈，你咖啡都凉了都进不去。
自用还好，你对外使用？，呦西，你也不想让别人看见你的地址环境吧，快去搞个域名使使。
支持部署 URL 私有化与预览地址自定义（要钱）
看见那个要钱了吗，我当然知道，但是我……哇达西，没钱啊┭┮﹏┭┮
所以这部分没体验过，拜拜~
部署保护
vercel 支持单个部署添加密码保护或者直接将部署设置为私有化部署，前者需要输入预设的密码才能访问地址，后者可以直接大范围让所有部署地址变成私有化，你可能需要密码或者 vercel 身份效验才能访问，比如企业版中我们可能不希望团队外任何人访问测试地址。
丰富的集成能力
除了前面提到的 GitHub 在集成上表现，vercel 其实提供了配套的对于项目部署中性能检测、项目安全、项目监控、端到端测试等一系列能力，当然现在我们的做法是分散了不同平台（比如 sentry），而非自动化部署一条线中的一部分。

最后我发现我写这个基本上没啥大用处，更多的是作者无聊的体现，是的，作者的脑子已经不在这里了，它随着早上的洗脸水一起流到下水道去了。