Eson Wong  /  文章

使用 Github Actions 部署前端项目到服务器

教程约 1 分钟

Github Actions 简介

GitHub Actions 是 Github 推出的一项服务。提供了虚拟服务器环境和 Actions 市场,用于 github 上的项目进行持续集成。这对于 Github 上公开的仓库是免费的,私有仓库有服务器运行时间和存储空间的限制,具体请看 about billing for github actions

教程

下面介绍怎么如使用 GitHub Actions 部署一个前端项目到 linux 服务器上。

建立 workflow 配置文件

在仓库的根目录中创建文件夹 .github/workflows。在此文件夹中创建一个 .yml 后缀的文件。

文件内容:

name: CI

指定触发事件

我们以推送到 master 分支为例:

on:
  push:
    branches:
      - master

更多触发方式参考 Triggering a workflow with eventsWorkflow syntax for GitHub Actions

配置 jobs 和 build

事件可以触发的多个 job,这里我们添加一个 build job, 指定运行环境。

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]

配置 steps

在 build 下配置 steps。

steps:

获取源码

使用 Actions 市场 里的 actions/checkout 获取仓库代码,

- name: Checkout
  uses: actions/checkout@v2

安装模块和构建

使用 npm 安装模块和运行 build script。

- name: Build
  run: |
    npm install && npm run build

部署

我们要使用 rsync 命令来同步构建好的文件目录到到发布目标服务器。

首先要准备可以在目标服务器上发布的私钥和 known-hosts,添加到仓库设置的 Secrets 中,命名为 SSH_PRIVATE_KEYKNOWN_HOSTS_TEST 这样可以避免被暴露而在配置中使用。用 shimataro/ssh-key-action 安装私钥到 Github Action 的虚拟服务器。

添加服务器发布私钥

- name: Install SSH key for deploy
  uses: shimataro/ssh-key-action@v1
  with:
    name: id_rsa-deploy
    private-key: ${{ secrets.SSH_PRIVATE_KEY }}
    known-hosts: ${{ secrets.KNOWN_HOSTS_TEST }}
    config: |
      Host deploy
        HostName xxx.xxx.xxx
        User user-of-deploy
        IdentityFile ~/.ssh/id_rsa-deploy

使用 rsync 命令同步发布文件夹。

- name: Deploy
  run: |
    rsync -rv $GITHUB_WORKSPACE/dist/ user@xxx.xxx.xxx:/www/demo

推送代码

接下来推送代码到 master 分支即可执行这个 workflow ,将项目部署到服务器。可以在仓库的 Actions 菜单查看运行日志。

示例

链接:Github Actions 发布前端项目演示

参考

← 如何终止 fetch 请求Ecmascript 提案:空值合并运算符 "??" →

评论 · 0