GitHub Actions+Vercel部署前端项目，软件部署越来越简单

前端

2023-12-17 19:08:43

当你完成一个前端项目时，需要将其部署到云端，以便其他人能够访问它。传统的方法是手动将项目文件上传到云端服务器，然后配置服务器以运行项目。这种方法很麻烦，而且容易出错。

现在，有了一些现代化的工具可以帮助你更轻松地部署前端项目。其中之一就是GitHub Actions。GitHub Actions是一个自动化的工具，可以让你在代码库中创建和运行工作流。工作流可以执行各种任务，包括部署前端项目。

另一个工具是Vercel。Vercel是一个云端部署平台，可以让你一键部署前端项目。Vercel与GitHub Actions集成良好，你可以使用GitHub Actions触发Vercel上的部署。

在本教程中，我将向你展示如何使用GitHub Actions和Vercel部署前端项目。你将学习如何创建一个GitHub Actions工作流，如何将工作流与Vercel集成，以及如何部署前端项目。

前提条件

你需要有一个GitHub账户。
你需要有一个Vercel账户。
你需要有一个前端项目。

第一步：创建一个GitHub Actions工作流

首先，你需要创建一个GitHub Actions工作流。工作流是一个YAML文件，它定义了工作流中的任务和步骤。

以下是一个简单的GitHub Actions工作流示例：

name: Deploy to Vercel

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to Vercel
        uses: vercel/github-action@v4
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}