使用 Github Actions 和 Vercel 自动化 Next.js​​应用程序部署

在现代 Web 开发中，自动化部署是一个必不可少的环节。手动部署往往会繁琐、易错，导致不必要的时间和精力浪费。而使用自动化部署工具，可以大大提高开发效率和质量，减少出错风险。

本文将介绍如何使用 Github Actions 和 Vercel，来实现 Next.js 应用程序的自动化部署。我们将从以下几个方面展开：

1. 什么是 Github Actions 和 Vercel
2. 如何配置 Github Actions
3. 如何配置 Vercel
4. 示例代码

什么是 Github Actions 和 Vercel

Github Actions 是 Github 自家推出的一项 CI/CD 服务，可以帮助开发者在代码提交、pull request、issue 等事件触发时自动执行一些操作，比如运行测试、构建程序、部署应用等。Github Actions 的优点在于与 Github 平台深度集成，开发者可以直接在 Github 上操作，无需额外的账号和管理工具。

Vercel（前身为 Zeit）则是一家提供云端应用程序部署服务的公司，其产品包括 Vercel Platform 和 Vercel CLI。Vercel Platform 可以将代码部署到 Vercel 的服务器上，提供高性能、高可用的应用程序服务。Vercel CLI 则提供了命令行工具，可以帮助开发者在本地快速搭建和部署应用。

如何配置 Github Actions

在使用 Github Actions 之前，需要在项目中添加一个 .github/workflows 目录，并在该目录下创建一个名为 main.yml 的文件，作为 Github Actions 的配置文件。该文件的格式为 YAML。

下面是一个示例的 main.yml 文件：

// www.javascriptcn.com code example
name: Deploy to Vercel

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Install dependencies
      run: npm install

    - name: Build the app
      run: npm run build

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

上述配置文件包含了以下几个部分：

1. name：Github Actions 的名称，可以自定义。
2. on：Github Actions 的触发条件，可以是某个分支的 push 或 pull request 等事件。
3. jobs：Github Actions 的任务，可以包含多个步骤。
4. steps：任务的步骤，可以使用 Github Actions 的预定义 action，也可以自定义命令。

在上面的示例中，我们定义了一个名为 build-and-deploy 的任务，该任务的步骤包括：

1. 使用 actions/checkout action，将代码从 Github 上 checkout 到本地。
2. 使用 npm install 命令，安装项目依赖。
3. 使用 npm run build 命令，构建应用程序。
4. 使用 amondnet/vercel-action action，将构建后的应用程序部署到 Vercel 上。其中，涉及到三个环境变量：VERCEL_TOKEN、VERCEL_ORG_ID、VERCEL_PROJECT_ID，需要在 Github 仓库的 Settings 中设置。

如何配置 Vercel

在使用 Github Actions 部署应用程序之前，需要先在 Vercel 上创建一个项目，获取项目的 ID。具体步骤可以参考 Vercel 的文档。

在项目创建完成后，需要将项目的 ID 和 Vercel 的 API token 添加到 Github 仓库的 Secrets 中，以便 Github Actions 能够访问 Vercel API。

示例代码

下面是一个示例的 Next.js 应用程序代码，可以用于测试自动化部署的效果。

// www.javascriptcn.com code example
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

在以上代码的基础上，可以使用以下命令启动 Next.js 应用程序：

npm init next-app my-app
cd my-app
npm run dev

最后，将上述代码和 Github Actions 的配置文件上传到 Github 仓库中，即可开始自动化部署 Next.js 应用程序。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8c5e5a941bf7134f53d6b