利用travis-ci + heroku 快速入门CI/CD

最新推荐文章于 2025-05-16 13:00:52 发布

原创最新推荐文章于 2025-05-16 13:00:52 发布 · 896 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#travis-ci #heroku #CI/CD

本文介绍如何使用Travis CI实现React项目的持续集成与部署，包括配置Travis CI、自动化测试及部署到GitHub Pages的过程。

关于CI/CD这里不做过多展开。

本文以前端react项目为例。

准备工作：

1. 写好的react项目以及测试

2. 上传至github repo

一、travis-ci

用github账号登录travis-ci，可以在travis-ci中看到你github中所有public repo。（private repo在travis-ci.com中属于付费服务），勾选你的前端项目。

在该项目根目录中新建 .travis.yml 配置文件，内容如下

language: node_js
node_js:
  - "stable"
cache:
  directories:
  - node_modules
script:
  - npm test
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $github_token
  local_dir: build
  on:
    branch: master

script中的脚本是你希望travis-ci帮你跑的测试脚本，可以根据需要自行更改。

（deploy部分用于将该项目部署至github page，可以删去。）

至此，travis-ci配置就结束了。可以尝试修改项目，并且提交一次commit。在travis-ci中可以看到ci结果。

如果测试不通过，在job log中也可以看到完整的错误信息。

至此，ci部分结束。

如果要部署至github page上，首先前端package.json中需要修改

添加github page url

{
  ...
  "homepage": https://your-github-account.github.io/your-react-project/,
  "dependencies": {
  ...
  }
  ...
}

添加scripts

"scripts": {
    …
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "devDependencies": {
    "gh-pages": "^1.1.0"
  }

另外为了防止他人向你的repo提交恶意pull request 所以需要添加github_token认证

进入github，右上角头像 > settings > developer settings > personal access tokens > generate new token，勾选repo即可。

然后进入travis-ci repo，settings > environmental variables 中刚刚将生成的github_token添加。

Name: github_token ，Value: 刚刚生成的一长串token

注意不要勾选display ! github_token是不希望别人看到的，一旦勾选上，别人能在你的build log中看到你的github_token。

之后每次commit，travis-ci会将项目测试，测试通过后，打包放在github repo的gh-pages分支。

最后进入github repo， settings > options > github pages 将 source 设置为 gh-pages branch即可。

二、heroku

似乎网站被墙了，我代理挂着全局才能访问。

首先去官网注册heroku账号并下载 heroku-cli

命令行中进入项目目录

$ heroku login
Enter your Heroku credentials.
Email: user@example.com
Password:

创建heroku repo

$ heroku create

上传至heroku repo

$ git push heroku master

然后项目便部署完毕，可以通过下面这个命令打开部署的网站

$ heroku open

参考资料：

travis-ci官方文档

heroku官方文档