使用 GitHub Actions 将 React App 部署到 GitHub Pages

May 05,2020
0
GitHub Actions、React

最近接到一个需求,做一个类似下面这种页面的 demo,原本让用小程序实现,但是后来发现貌似没法用小程序实现,就改用 Web 来实现了。后来给别人展示的时候,发现我总不能发给人家一堆 node_modules 呀,于是就想部署到 GitHub Pages。其实不用 GitHub Actions 也可以,只不过每次 push 之后多敲一次命令:npm run deploy,但是偷懒也应该要认真偷。

手动部署

由于这个项目是用 create-react-app 生成的,所以参考一下它的部署文档,可以看到其实挺简单的:

  1. package.json 中添加 homepage 字段,其中 <my-app> 可以是项目名称

    "homepage": "https://myusername.github.io/<my-app>"
    
  2. 安装 gh-pages 依赖,并在 package.json 添加 deploy 脚本,其中 predeploy 会在 deploy 脚本运行之前自动执行

    npm i -D gh-pages
    
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    
  3. 运行 deploy 脚本

    npm run deploy
    

有可能遇到 gh-pages 分支无法创建的问题,运行下面的命令,清一下缓存就 OK 了:

rm -rf node_modules/gh-pages/.cache

GitHub Actions 部署

GitHub Actions 做的是同样的事情,只不过把 npm run deploy 这一步交给了 CI 来做。

  1. 创建一个 workflow 文件

    touch .github/.main.yaml
    
  2. 修改内容

    name: CI
    
    on:
      push:
        branches: [ master ]
      pull_request:
        branches: [ master ]
    
    jobs:
      build:
        runs-on: ubuntu-latest
          steps:
          - uses: actions/checkout@v2
    
          - name: Use Node.js ${{ matrix.node-version }}
            uses: actions/setup-node@v1
            with:
              node-version: ${{ matrix.node-version }}
    
         -  name: Deploy
            run: |
              git config user.name <username>
              git config user.email <email>
              git remote set-url origin https://${{ secrets.<personal_access_token> }}@github.com/<user>/<repo>.git
              npm install
              npm run deploy
    
  3. 最后将 <> 内的内容替换自己的配置即可,其中 <personal_access_token> 需要在生成以后添加到项目里的 secrets

到这里就完成了,只要触发 push 操作,GitHub Actions 就会自动运行部署。


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。