GitHub Actions，助力前端自动化打包、部署

前端

2024-01-17 07:10:15

1. 前言

作为一名前端菜鸡，服务器小白，刚开始在Linux服务器上部署网站时，前端代码我一般都是打包后手动FTP传上去，后端代码直接在vscode中使用SSH连接服务器，直接同步代码更改。

虽然这样的方式也可以实现网站的部署，但是随着项目越来越大，代码越来越多，手动打包、部署的方式就显得非常繁琐和低效了。

为了解决这个问题，我开始寻找一种能够实现代码提交的自动化工作流，要依靠持续集成（CI）（或者加上持续交付(CD)）服务。

现在主流的公用CI/CD服务有：

Jenkins
Travis CI
CircleCI

这些服务都可以帮助我们实现代码提交的自动化工作流，但是它们都有一定的学习成本和使用门槛。

对于前端开发人员来说，GitHub Actions是一个非常不错的选择。

GitHub Actions是一个由GitHub官方提供的CI/CD服务，它可以帮助我们轻松实现代码提交的自动化工作流。

GitHub Actions的使用非常简单，只需要在项目中创建一个.github/workflows目录，然后在该目录下创建一个.yml文件，就可以定义一个工作流了。

2. 使用GitHub Actions实现前端自动化打包、部署

2.1 创建GitHub Actions工作流

首先，在项目中创建一个.github/workflows目录，然后在该目录下创建一个.yml文件，就可以定义一个工作流了。

name: CI/CD

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Install dependencies
        run: npm install

      - name: Build the app
        run: npm run build

      - name: Deploy the app
        uses: actions/upload-artifact@v3
        with:
          name: build-artifacts
          path: build

  deploy:
    needs: build
    runs-on: ubuntu-latest

    steps:
      - uses: actions/download-artifact@v3
        with:
          name: build-artifacts
          path: build

      - name: Deploy the app
        run: |
          scp -r build user@example.com:/var/www/html