手把手教你将 Github 私有仓库部署到 Vercel

简介: 手把手教你将 Github 私有仓库部署到 Vercel

最近我在我的 Web3 社群找了一群 Web3 爱好者组建了一个 DAO,正在 builidng 一款标准的 Web3 产品,通过这个产品来帮助一些朋友熟悉 Web3 产品从零到一完整的 building 过程。

所以我在 GitHub 创建了一个组织,项目的代码暂时也不打算开源。所以仓库都选择私有。

项目的运行平台使用的仍然是 Vercel。

Vercel 有三个付费计划,分别是 Hobby、Pro 和 Enterprise。

其中 Hobby 是免费的,Pro 是每个月 20 美元。

在项目初期,我们通常都会为了降低成本而选择 Hobby。等到项目成熟后才会升级到 Pro。

但 Hobby 有个问题,那就是不能将 GitHub 私有仓库连接到 Vercel 中。

之前我也有碰到过这个问题,解决方案有几种。

比如换成 BitBucket 私有仓库。

如果你坚持使用 GitHub 私有仓库,那么可以通过 GitHub Actions 的方式去部署项目。

由于我已经几年没用使用 GitHub Actions 这种方式连接 Vercel 了,很多操作和配置已经发生了变化,所以这里做一个记录,帮助一些对这些平台不熟悉的朋友。

Vercel 有一个教程:vercel.com/guides/how-…

但是教程中有一大堆文档链接,如果你不熟悉这些平台的话将会很麻烦。

所以你可以直接看我这篇文章,可以帮你节省很多时间。

第一步是登陆到 Vercel 的控制台。找到 Settings -> Tokens。然后创建一个 Token。

注意不要选择过期时间,因为我们一直要使用这个 Token。

image.png

创建完 Token 之后一定要复制下来,这一步结束后你将再也无法看到这个 Token。

image.png

第二步是全局安装 Vercel CLI,如果你安装过可以跳过这一步。


npm i -g vercel

第三步,在 Vercel 中创建一个项目,随便选择一个模板就可以。不过需要注意项目名要取对。

image.png

第四步,在本地项目文件夹中通过 vercel link 命令连接到 Vercel 项目。

这个过程需要你填写 Token、选择 GitHub、并填写第三步创建的项目名。

成功之后会在项目根目录下生成 .vercel/project.json 文件。

image.png

里面的 JSON 会有 projectId 和 orgId 两个字段,这两个字段我们接下来会用到。

第五步,在 GitHub 仓库中,找到 Settings -> Secrets and variables -> Actions 页面。

image.png

点击 New repository secret 创建私钥。

三个私钥的名字分别是 VERCEL_TOKENVERCEL_ORG_IDVERCEL_PROJECT_ID。这里不建议你修改。

第六步,在本地项目根目录下创建 .github/workflows/preview.yaml 文件,这个也是 GitHub Actions 的配置文件。

文件内容 Vercel 已经帮我们写好了,我们可以直接复制过来。


name: Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches-ignore:
      - main
jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Vercel CLI
      run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
      run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
      run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
      run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

你也可以根据自身情况对这个配置文件中的步骤做一些调整。

第七步,把这个配置文件推送到 GitHub。

到这里,所有的配置就全部完成了。

需要注意,只有 PR 到 main 才会触发 Actions 进行 Deploy。如果直接 Push 到 main 分支是不会触发的。



相关文章
|
5月前
|
开发工具 git 开发者
2024最简七步完成 将本地项目提交到github仓库方法
该文章提供了一个简洁的七步教程,指导用户如何将本地项目提交到GitHub仓库。
2024最简七步完成 将本地项目提交到github仓库方法
|
2天前
|
开发工具 git
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
|
6天前
|
Devops Shell 网络安全
git使用之如何将一套代码同时推送至github|gitee|gitcode|gitlab等多个仓库-含添加ssh-优雅草央千澈完美解决-提供整体提交代码
git使用之如何将一套代码同时推送至github|gitee|gitcode|gitlab等多个仓库-含添加ssh-优雅草央千澈完美解决-提供整体提交代码
git使用之如何将一套代码同时推送至github|gitee|gitcode|gitlab等多个仓库-含添加ssh-优雅草央千澈完美解决-提供整体提交代码
|
9天前
|
机器学习/深度学习 人工智能 自然语言处理
PeterCat:一键创建开源项目 AI 问答机器人,自动抓取 GitHub 仓库信息、文档和 issue 等构建知识库
PeterCat 是一款开源的智能答疑机器人,能够自动抓取 GitHub 上的文档和 issue 构建知识库,提供对话式答疑服务,帮助开发者和社区维护者高效解决技术问题。
71 7
PeterCat:一键创建开源项目 AI 问答机器人,自动抓取 GitHub 仓库信息、文档和 issue 等构建知识库
|
16天前
|
人工智能 前端开发 Linux
github是怎么用的,如何下载仓库
github是怎么用的,如何下载仓库
|
2月前
|
存储 Linux 数据安全/隐私保护
一键部署 200+ 开源Github 2k+ 星星的软件
Websoft9面板是一款基于Web的PaaS/Linux面板,支持在个人服务器上一键部署200多种热门开源应用,适用于个人开发者、中小企业、创业团队、教育机构和技术爱好者。它集成了丰富的开源软件,提供便捷的部署方式、高效的资源利用、良好的可扩展性及低技术门槛,帮助用户快速搭建和管理各类应用。
|
3月前
|
对象存储
一个通过 GitHub Action 将 GitHub 仓库与阿里云 OSS 完全同步的脚本
一种将 GitHub 仓库完全同步到阿里云 OSS 的方法。
|
4月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
5月前
|
搜索推荐 前端开发
使用VitePress创建个人网站并部署到GitHub
该网站使用 VitePress 构建,记录了前端开发相关的笔记和教程,涵盖 Vue2 和 Vue3 等内容。网站支持暗黑模式和 Algolia 搜索服务,提供了详细的导航和侧边栏配置。通过自动化脚本进行部署,托管于 GitHub Pages。
使用VitePress创建个人网站并部署到GitHub
|
5月前
|
JavaScript 搜索推荐 资源调度
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文详细介绍了如何使用 Vue3、TypeScript 和 Vite 开发并发布一个名为 Vue Amazing UI 的组件库至 npm。文章首先引导读者安装配置 VitePress,创建文档网站,并编写组件库文档。接着,通过一系列配置实现网站主题定制、全局样式设置以及 Algolia 搜索功能集成。最后,文章提供了自动化脚本,帮助开发者一键打包部署静态网站至 GitHub,并发布组件库到 npm。通过这些步骤,读者可以轻松搭建并维护一个美观且功能齐全的组件库文档网站。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
下一篇
开通oss服务