webpack + Travis CI 自动部署项目应用

anran758

banner.png

我们知道 Github Pages 是 Github 免费提供给用户展示页面的一项服务。当我们完成项目开发后,想将页面部署到 Github Pages 时,该要怎么操作呢?

可以在 GitHub 的储存库设置中设置用于展示页面的分支,该分支只保留构建后的静态资源,也就是源码与编译后的静态资源分离。按照传统的做法是:手动运行编译命令,编译后再复制到指定分支中。这样操作很繁琐,但使用 Travis CI 持续集成服务之后就可以不用操心这些事了。

概念

既然我们要使用 Travis CI,首先得搞清楚人家具体是干嘛的吧?

Travis CI 是一个 持续集成(Continuous integration, CI)。它与 git 相耦合,每当有 commit 提交时,它将自动触发构建与测试。若运行结果符合预期,才将新代码集成到 主流(mainline) 中,这样使应用更加健壮。

值得注意的是,Travis CI 提倡每次 commit 都是独立较小的改动,而不是突然提交一大堆代码。因为这有助于后续构建失败时可以回退到正常的版本。

运行构建时,Travis CI 将 GitHub 存储库克隆到全新的虚拟环境中,并执行一系列任务来构建和测试代码。如果这些任务中的一项或多项失败,则将构建视为已损坏。如果所有任务均未失败,则认为构建已通过,Travis CI 会将代码部署到 Web 服务器或应用程序主机中(在本文中是指 Github Pages 服务)。

准备

在使用之前,需要准备一个 Github 的账号对 Travis CI 进行授权。

  1. 接着通过 Github 的账号登录 Travis CI,点击 SIGN IN WITH GITHUB
  2. 点击后会被重定向到 Github 进行授权。
    travis-1.jpeg
  3. 授权后,若是第一次登录的话会被重定向至引导页:
    travis-2.jpeg
  4. 点击引导页第一步的按钮,使用 GitHub Apps 激活储存库。可以选择给全部储存库都激活,也可以激活指定储存库。本文以 <username>.github.io 为例:

    注意: 这个 username 是你自己的 Github 用户名。笔者的 usernameanran758 那储存库的名字就为 anran758.github.io

    travis-3.jpeg

  5. 激活后会被重定向到设置页,点击待部署的储存库右侧的 setting 按钮,跳转至 Travis CI 储存库设置页。我们需要在此页设置部署 Github Pages 时所需的环境变量:
    travis-4.jpeg

环境变量的值需要从 Github 拿拥有部署权限的 token:

  1. 打开 Github,点击头像,再点击 Settings 进入设置页:
    github-1.png
  2. 进入设置页面后在左侧边栏点击开发者设置:
    github-2.jpeg
  3. 跳转后在左侧边栏点击 Personal access tokens, 然后在头部点击 Generate new token:
    github-3.jpeg
  4. 填写 token 备注、权限,最后点击生成 token:
    github-4.png
  5. 生成 token 后点击复制按钮,复制到粘贴板:
    github-5.png
    注意要妥善保管好 token,重新刷新页面后这个 token 将不会再展示出来。如果忘记了 token 的话,也只能在 token 编辑页中重新生成。这会导致所有用到该 token 的应用都要更新值。 比方说有三个应用使用了该 token,重新生成后只在一个应用更新的值,那其他两个应用不更新就无法使用了。
    github-6.jpeg
  6. 复制 token 后切回 Travis CI 储存库的设置页,添加环境变量:
    github-7.jpeg

这样我们的准备工作就完成的差不多了。

配置

在项目目录中新建文件 .travis.yml,内容如下:

language: node_js
node_js:
  - lts/*

install:
  - yarn install # npm ci
script:
  - yarn test # npm run test
  - yarn build # npm run build

deploy:
  provider: pages
  local_dir: dist
  target_branch: master
  on:
    branch: develop
  token: $GITHUB_TOKEN
  skip_cleanup: true
  keep_history: true
  committer_from_gh: true

由于 webpack 项目依赖 Node.js,因此语言(language) 设置为 node_js,同时还指定使用最新的 LTS Node.js 版本(lts/*)。

install 是安装部署所需的依赖项,script 则是用于运行测试或构建脚本。他们都是 Travis 的工作生命周期(Job Lifecycle)必触发的钩子(阶段)。

install 钩子若有脚本/命令运行失败的话,整个构建会停止。而 script 钩子表现则不同,当有脚本/命令运行失败后虽然构建会失败,但还会继续执行后面的脚本。如 yarn test 运行失败后会继续跑 yarn build 命令。

以下是 Travis CI 主要的阶段流程图:

部署

通过 deploy 可以指定部署方式,下面将逐个介绍部署所用的选项:

provider 是部署类型。现在我们想将页面部署到 Github Pages,那就需要将 provider 设为 pages

local_dir 指定要推送到 Github Pages 的目录,默认为当前目录。webpack 默认的输出目录是 /dist,因此需要将值设为 dist。除此之外,Travis CI 默认情况下会删除构建期间创建的所有文件,因此需要设置 skip_cleanup: true 保留构建出来的 dist 目录.

on.branch 有 commit 提交的话,Travis CI 将从 on.branch 分支运行编译脚本,编译后会把 local_dir 目录强制推送到 target_branch 中。(target_branch 默认值为 gh-pages)

现在我们要部署的储存库是 <username>.github.io。这种类型的储存库有些特殊——它只能在 master 分支展示构建后的代码,而不能修改为其他分支。在 GitHub 储存库的 Settings 中的 Source 选项可以看到详细信息:

deploy-1.jpeg

然而其他储存库则没有这种限制:

deploy-2.jpeg

因此要部署到 <username>.github.io 储存库的话,target_branch 只能设为 master,触发编译的 on.branch 分支则可以自己定义。

其他储存库可以按照标准流程来开发:

  • develop 作为开发分支
  • master 作为主分支
  • gh-pages 作为页面展示分支

等功能开发并测试完毕后,将 develop 的代码合并到 master 分支并推送至远程。Traivis CI 检测到 matsercommit 提交后会自动运行脚本构建,构建完毕后将输出目录推送至 gh-pages 分支。

当然 Github Pages 也不是随便来一个人就可以部署的,你想要部署到储存库中首先得有该储存库的操作权限吧?token 就是证明你身份的东西。在上文中我们预先设置好了一个名为 GITHUB_TOKEN 的环境变量,此处我们可以通过 $GITHUB_TOKEN 直接取出该环境变量的值即可。

其他还有一些细节问题可以调整:比如推送构建后的代码到 target_branch 时使用的是强制推送(git push --force),如果你觉得这种强制覆盖历史记录的方式有点暴力的话,可以设置 keep_history: true 来保留提交记录。

自动部署后 commit 提交者默认是 Travis CI 的信息。也可以设置 committer_from_gh 允许 Travs CI 使用令牌所有者的个人信息来提交 commit

配置完毕后现在只需将 .travis.yml 提交到远程,Travis CI 就开始工作了:

deploy-3.jpeg

甚至还可以在 Github commit 信息中看到编译的情况:

deploy-4.jpeg

如果构建出问题的话,Travis CI 还会发邮件提示你:

deploy-5.png

部署成功后就可以直接通过浏览器访问啦~ 储存库部署的是 <username>.github.io 的话,访问链接为 https://<username>.github.io/。其他储存库可以访问 https://<username>.github.io/<repoName>

比如笔者的主页与博客是两个项目分离的,部署后的链接地址为 https://anran758.github.iohttps://anran758.github.io/blog

参考资料:


原文出自: webpack + Travis CI 自动部署项目应用

阅读 1.6k

初级前端工程师的进阶之路
从原生到框架,分享关于前端的开发经验

咸鱼前端工程师, 专注web领域的知识.

1.5k 声望
41 粉丝
0 条评论

咸鱼前端工程师, 专注web领域的知识.

1.5k 声望
41 粉丝
文章目录
宣传栏