您好，我是Hellos AI，一个10年+互联网从业者，现在专注于自媒体。希望我的文章能够为您带来更多精彩。如果您觉得我的文章对您有帮助，可以关注、点赞，谢谢！

一般来说我们部署前端也好、后端也好，我们都需要拥有一台服务器，这时我们才能部署，但是部分公司也为了拉新客户会提供一些优惠活动，所以也能够白嫖一些服务器来部署，这里我介绍如何白嫖vercel来部署我们的前端应用。

思路

想要在vercel上面部署前端项目，总的来说，我们可以按照如下的步骤来做：

一、上传自己的项目到github

把自己的目标项目push到github，无论是public或private都可以；

二、从vercel上绑定github账号

从vercel关联github账号，过程中让github授权vercel访问自己的项目；

三、vercel新建项目选定git项目

在vercel中新建项目，选定目标项目，确定，则会自动构建；

四、访问

通过vercel的子域名来访问应用

步骤1：项目准备

例如，我们随便在github上找一个纯前端项目https://github.com/all-in-aigc/aicover；

一、登陆github

这里可以使用自己已有账号或者gmail邮箱来登陆

登陆后github看板页面如上图

二、fork到自己的仓库

点击右上角的fork按钮，就相当于把当前项目clone一份到自己的仓库中：

"Repository name"字段可以保持原有名字或改成新名字，这里我保持不变，点击右下角的按钮；

该项目已经到了我自己的仓库中！

步骤2：vercel注册和绑定github

一、打开https://vercel.com/

二、注册/登陆

点击右上角"Sign up"，进入如下的页面

输入一个用户名后点击下一步

这里我们可以选择github或google账号，看个人什么方便就用什么。

github授权完毕后会进入如下的页面

步骤3：绑定和部署github项目

一、绑定github项目

这里根据自己的实际情况来选择，例如，我们可以指定某些github工程，就选择"Only select repositories"，指定项目

点击确定，那么该项目就关联到vercel.com中了。

注意：这里后续还会出现一个问题就是：如果我当前仅关联了一个项目，那么后续有新项目，我还要关联到vercel.com中，那怎么办？可以照如下操作：

1.点击Adjust GitHub App Permissions →

2.在弹出的也弥漫中往下拖，到"Only select repositories"下拉框中继续选择一个

点击"Save"按钮后可以让新项目导入到vercel.com中，而如果要删除关联项目，可以看上面项目名右边的×；

3.关联结果

这样，我们就关联了多个项目到vercel.com，后续更多项目可以照此方法如法炮制；

二、部署项目

1.点击任意项目的"Import"黑色按钮

2.填写表单

根据当前aicover项目的实际情况来选择框架就好了，接着点击底下的"Deploy"按钮发布项目

那个框架怎么看，可以回到github项目点击根目录下的package.json文件，看看里面是什么，如下：

看到scripts里面都是next XXXX，如果对package.json这个文件不是太明白，那还有一招就是直接把这里的内容复制了，让AI告诉我，当前前端项目使用的什么东西来管理前端组件；

这里：这个aicover项目使用的是next框架来管理，所以步骤1中那里选择next.js就好，我们不需要修改；

点击了"Deploy"按钮后等待项目部署完毕，我们可以点击底下的"Build log"来看构建过程日志：

3.回到项目列表看板

步骤4：访问项目

一、访问

即访问：https://aicover-xi.vercel.app/，如下：

但是报错了，不要拿担心，我们去log中看看到底是怎么回事

二、配置环境变量

对于需要配置什么环境变量，我们可以回到项目中查看readme.md文档，如下

根据这里的要求，一个一个的进行配置就好了！

好了，白嫖vercel.com部署前端项目就说到这里了！

另外最后还啰嗦一下，就是一个vercel.com账号，使用免费套餐能够部署好像是不超过10个前端项目，不过，如果我们需要更多项目部署，那可以多备几个github账号就好了，这个问题就解决了！

最后

白嫖vercel.com部署前端项目就说到这里了！