使用 gh-pages 发布前端项目

本文最后更新于:2021年1月20日 凌晨

场景

gh-pages

之前就有在使用 gh-pages 这个库,但由于名字并未想到它如此强大,甚至支持发布代码到任意 git 仓库。换言之,它可以将任意本地文件发布到远端 git 仓库,而不需要自己处理各种乱七八糟的问题。

问题

首先说一下我们之前前后端分离项目的发布流程

  1. 修改打包的 webpack 脚本以支持引用 cdn 上的资源(本质上是修改路径)
  2. 打包静态资源文件
  3. 找到前端静态资源发布项目,切换到指定分支
  4. 复制静态资源到特定目录
  5. git commit && git push
  6. 如果要发布 cdn 则再次对 cdn 仓库同样如此操作
  7. 通知后端发布生产环境,进行验证

这其中涉及到几个重要痛点

  1. 修改 webpack 配置,它极高的复杂度甚至产生了 webpack 配置工程师 这一职业岗位。
  2. 处理文件复制提交 git 信息,有可能操作错误,每次发布生产都是一次心理上的考验
  3. 发布失败难以快速解决,重新发布又需要手动再走一遍流程,所以有了我之前说过的发布一次要半个钟的事实

解决

不难看出,这本质上还是因为发布没有自动化带来的问题。但是,在 DevOps 还不存在的情况下,gh-pages 能够自动化下面的两步,同时,像 create-react-app/vue-cli 这种基于 webpack 进行高层次封装的工具提供了 PUBLIC_PATH 的概念,能够通过环境变量指定 index.html 入口引用的其他静态资源的基本路径,即便不去碰 webpack 也可以处理第一个问题了。

react, vue

大致过程如下

  1. 在项目中添加依赖 yarn add -D env-cmd gh-pages

  2. 在打包生产环境的资源时指定环境变量 PUBLIC_URL=[cdn 发布后的远端基本路径]

  3. 添加发布 script 命令

    {
      "deploy": "yarn build:prod && yarn deploy:cdn && yarn deploy:publish",
      "deploy:publish": "gh-pages -d [本地目录] -e [远端 git 目录] -r [远端 git 地址] -b [远端 git 分支]",
      "deploy:cdn": "gh-pages -d [本地目录] -e [远端 git 目录] -r [远端 git 地址] -b [远端 git 分支]"
    }

    现在,发布生产环境只需要两个步骤

  4. 运行 deploy 命令

  5. 通知后端发布 cdn/静态资源目录

虽然仍未能解决前后端不分离的项目,但,至少解决了所有新项目的发布问题了,不是么?

这里有一个项目已经如此实现,可以进行参考:website-static

总结

还是需要擅用工具,如果能够掌握更好的工具,效率的提高和自己的痛苦程度都能有极大的改善!


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!