阅读 1486

使用GitHub Actions自动部署React项目到Github Pages上

这篇文章以一个简单的React项目为例,示例如何使用Github Actions和Github Pages来自动构建和部署一个前端项目

使用Create-React-App创建一个react项目

npx create-react-app react-deploy-demo
复制代码

建立你的 Actions

github 上进入个人仓库,找到 Actions 的标签页,进去创建一个自己的workflow, 创建完会在.github/workflows/main.yaml生成这样一个基础文件,下面通过注释简单说明一下每个命令

# main.yml
# 一个workflow,名字为CI
name: CI

# 触发 workflow 的事件,当有新push或者pr时执行
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]
# 一个workflow由执行的一项或多项job
jobs:
  # 一个job任务,任务名为build
  build:
	# runs-on 指定job任务运行所需要的虚拟机环境
    runs-on: ubuntu-latest
	# steps是每个Job的运行步骤,可以包含一个或多个步骤
    steps:
	# action命令,切换分支获取源码
	# 来自官方脚本:https://github.com/marketplace/actions/checkout
    - uses: actions/checkout@v2
	# action命令,打印一行日志
    - name: Run a one-line script
      run: echo Hello, world!
	# action命令,打印多行日志
    - name: Run a multi-line script
      run: |
        echo Add other actions to build,
        echo test, and deploy your project.

复制代码

然后我们将react项目push到github仓库master分支时,就会触发Github Action了,可以在网站上看到构建日志

配置GitHub Actions部署到Github Pages

这里使用了一个别人已经写好的 Action : JamesIves/github-pages-deploy-action, Github Action 市场的地址为:github.com/marketplace…

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2 

      - name: Install and Build 🔧 
        run: |
          npm install
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: build
复制代码
  • 根据github文档生成Personal access tokens并配置到当前仓库的Settings>Secrets下面

  • 将react项目根目录下面的package.json添加homepage字段 , 表示项目的根目录

    "homepage": "https://[username].github.io/github-deploy-demo"
    复制代码

    [username]为你的GitHub 用户名

  • 然后再次推送到 master分支,Github Action会自动运行,等待任务构建完成,react项目会将打包后的静态文件部署至gh-pages分支了

  • 设置Github Pages为gh-pages分支

    github 个人仓库Setting>Options下面的Github Pages设置为gh-pages分支,

打开Github Pages链接就可以看到效果了,我的预览地址是 huahua0406.github.io/react-deplo… 这个,可以看到已经生效了

最后

不管是React项目还是Vue项目都可以这么用,有兴趣的小伙伴不妨试一试, 附上我的项目地址

参考链接

Github Actions官方文档

阮一峰:Github Actions 入门教程

文章分类
前端
文章标签