用 Github Actions 自动部署前端应用到线上环境并发布 npm 包

2023-11-28 19:01:35

随着前端应用的日益复杂，其构建、部署和维护也变得越来越繁琐。为了解决这些问题，Github Actions 应运而生。Github Actions 是一款强大的自动化工具，可以帮助我们轻松实现前端应用的部署和 npm 包的发布。

什么是 Github Actions

Github Actions 是一种云服务，可以让我们在 Github 上创建并运行自动化的工作流。这些工作流可以执行各种任务，比如构建和测试代码、部署应用、发送通知等等。

如何使用 Github Actions 部署前端应用

使用 Github Actions 部署前端应用非常简单，我们只需要按照以下步骤操作即可：

在你的项目中创建一个 .github/workflows 文件夹。
在该文件夹中创建一个 YAML 文件，并将其命名为 main.yml。
在 main.yml 文件中，编写以下内容：

name: Deploy Frontend App

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 app
        run: npm run build

      - name: Deploy app
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

将你的代码推送到 Github 上。
Github Actions 会自动触发部署工作流。
等待部署工作流完成。
你的前端应用即可在线上访问。

如何使用 Github Actions 发布 npm 包

使用 Github Actions 发布 npm 包也非常简单，我们只需要按照以下步骤操作即可：

在你的项目中创建一个 .github/workflows 文件夹。
在该文件夹中创建一个 YAML 文件，并将其命名为 main.yml。
在 main.yml 文件中，编写以下内容：

name: Publish npm Package

on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build package
        run: npm run build

      - name: Publish package
        run: npm publish --access public