手把手教你将github项目部署到vercel上

本文将主要介绍如何将github的项目部署到vercel上进行托管

一般情况下,github上的项目我们会把它部署到github pages上,通过创建分支gh-pages来实现,但免不了操作的繁琐,我们需要将代码合并到gh-pages并且执行build生成可直接访问的文件才可。

今天就教大家怎么把代码部署到vercel上,只需要push代码即可触发部署,减少操作。

image.png

什么是vercel

vercel是一个用于部署前端应用和Node服务的云平台,提供CDN加速,自带https,自带丰富的模板,支持根据模板创建项目和一键导入 github 的项目,非常方便。

同类的平台有NetlifyGithub Pages,相比之下,vercel 国内的访问速度更快,并且提供了多环境部署,支持持续集成,一次push或者一次PR会自动化构建发布,发布在development环境,生成不一样的链接可供预览。

github迁移到vercel

  1. 确定要部署的github仓库 image.png
  2. 进入vercel官网进行导入git仓库或者根据模板新建项目

image.png 3. 选择账户,如果没有自己的账户,选择Add Github Account进行添加 image.png 4. 选择对应账户 image.png 5. 在选择的账户上安装vercel image.png 6. 重新进入vercel官网,选择对应账户和代码库 image.png 7. 选择后进入配置页面,按自己项目配置后,点击deploy进行构建 image.png 8. 到这里就成功了!点击下图红框中的部分都可打开vercel上托管生成的网址 image.png 9. 之后每一次提交,vercel都会生成专属的预览链接,如下图 image.png

vercel其他功能

新建项目

如果你还没有要部署的项目,可以根据vercel提供的模板创建项目,无需配置,一键即可创建项目和部署流水线,目前vercel共提交42种框架模板。

image.png

image.png

image.png

查看日志

进入某项目,可以看到View Build Logs按钮,点击即可查看编译过程中的日志,如果遇到编译失败,可以在这里查找原因。 image.png

image.png

查看部署

在项目的Deployments菜单下可以看到所有部署的流水线,可以通过部署状态和分支来筛选符合条件的流水线,每一次commit都有对应的预览环境,针对每一次commit可以有如下操作:

  1. Promote to Production:推送到生产环境
  2. Redeploy:重新部署
  3. Inspect Deployment:查看部署
  4. View Source:查看源码
  5. Copy UrL:复制当前预览环境的url
  6. Assign Domain:分配域名
  7. Visit:访问当前流水线生成的预览环境

image.png

项目配置

在项目的Settings菜单下可以进行修改配置,如下: image.png

如果你对当前分配的域名不满意,可以在Domains这个目录下进行修改。

image.png

vercel还有很多功能,可以自己多去尝试看一下!

总结

vercel部署github项目,非常方便,不需要再将代码合并推送到专属分支gh-pages,即可实现,每一次提交都会生成专属的预览环境。

image.png

参考文档

  1. juejin.cn/post/711195…
  2. juejin.cn/post/710157…
  3. juejin.cn/post/690781…

猜你喜欢

转载自juejin.im/post/7143067114025254919