Hexoを使った個人ブログの構築 #05 Travis CIを利用して自動デプロイを行う

Travis CI とは？#

Travis CIは、ソフトウェア開発分野におけるオンラインの分散型継続的インテグレーションサービスで、GitHub にホストされているコードをビルドおよびテストするために使用されます。このソフトウェアのコードもオープンソースであり、GitHub からダウンロード可能です。ただし、開発者は現在、クローズドソースプロジェクトでの単独使用を推奨していません。

Ruby、JavaScript、Java、Scala、PHP、Haskell、Erlang など、さまざまなプログラミング言語をサポートしています。多くの著名なオープンソースプロジェクトが、Ruby on Rails、Ruby、Node.js など、各コミット時にビルドテストを行うために使用しています。

現在、Travis CI には異なるサービスを提供する 2 つのサイトがあります：

バージョン	ホームページ	特徴
無料版	https://travis-ci.org/	オープンソースプロジェクトに無料サービスを提供
有料版	https://travis-ci.com/	GitHub のプライベートリポジトリをデプロイ可能

2 つのサイトはそれぞれのプロジェクトしか見ることができず、共通利用はできません。必要に応じて選択してください。

準備作業#

まず、公式ウェブサイト travis-ci.orgにアクセスし、右上のログインボタンをクリックして、GitHub アカウントで Travis CI にログインします。

Travis は GitHub 上のすべてのリポジトリと、あなたが所属する組織をリストアップします。この時、Travis にビルドしてもらいたいリポジトリを選択し、リポジトリの横にあるスイッチをオンにします。一度リポジトリがアクティブ化されると、Travis はそのリポジトリのすべての変更を監視します。

.travis.yml#

Travis はプロジェクトのルートディレクトリに、必ず.travis.ymlファイルが必要です。これは設定ファイルで、Travis の動作を指定します。このファイルは GitHub リポジトリ内に保存する必要があり、新しいコミットがあると Travis はこのファイルを探して、内部のコマンドを実行します。

.travis.yml：

language: node_js             # 言語環境を指定
node_js: '8.9.3'              # NodeJSのバージョンを指定
cache: npm                    # npmキャッシュの方法を指定し、$HOME/.npmまたはnode_modulesフォルダをキャッシュします

dist: trusty                  # システムバージョンを指定、trustyはUbuntu 14.04のリリース名
sudo: required                # sudo権限が必要かどうか

branches:                     # ビルドするブランチを指定
  only:                       # onlyは以下のブランチのみをビルドすることを示します
  - source

before_install:               # installフェーズの前に実行
  - npm install -g hexo-cli   # Hexoコマンドラインツールをグローバルにインストール

install:                      # プロジェクト環境のインストールフェーズで実行するコマンド、一行ずつ
  - npm install               # package.json内の依存関係をインストール

script:                       # ビルドフェーズで実行するコマンド、一行ずつ
  - hexo clean
  - hexo generate             # Hexoの通常コマンド、クリーンと生成を実行

after_success:                # scriptフェーズが成功したときに実行、ビルド失敗時には実行されません
  - git config --local user.name "travis-ci"
  - git config --local user.email "[email protected]"
  - sed -i'' "[email protected]:~https://${GITHUB_REPO_TOKEN}@github.com/~" _config.yml
  - hexo deploy > /dev/null   # Hexoのdeployコマンドを使用してブログをデプロイ

さらなる使用のヒントについては、「継続的インテグレーションサービス Travis CI チュートリアル」を参照してください。

さて、ここでまた一つの問題が出てきました：私たちの目標は GitHub Pages に自動デプロイすることですが、hexo deployコマンドを使用しており、Hexo は Git push を使用するように設定されています（hexo-deployer-gitプラグインによってサポートされています）。では、Travis CI はどのように私の GitHub リポジトリを操作する権限を持つのでしょうか？

GitHub アクセストークン#

以下の内容は「Travis を使用して Hexo を GitHub に自動ビルドする」からの抜粋です。

GitHub は、設定ページを通じて「個人アクセストークン（Personal access tokens）」を追加することを許可しています。アクセストークンを使用すると、httpsを介して GitHub API を操作する権限が得られます。これが私たちに必要なものです。

今、トークンを追加しましょう。まず、自分の GitHub の設定ページに入り、Personal access tokens → Generate new tokenボタンをクリックして新しいトークンを作成します。

Generate new token

権限設定では、リポジトリを操作する必要があるため、リポジトリ関連の権限を開くだけで十分です。権限は最小限の原則を満たすように設定し、できるだけ少なくします。権限を設定したら、生成ボタンをクリックすると、トークンが生成され、トークンのリストに移動します。

Personal access tokens

今、生成したアクセストークンの値をコピーする必要があります。注意：このページを一度リフレッシュすると、トークンは再表示されなくなります。覚えていなければ、再生成するしかありません。

Copy personal access tokens

さて、アクセストークンも手に入れ、リポジトリを操作できるようになりました。このトークンはどこに置くべきでしょうか？

もちろん、コードの中には置けません。。。

実際、Travis CI のプロジェクト設定画面には環境変数を設定するオプションがあり、そこにトークンを置くべきです。

Travis CI のブログプロジェクト設定ページに戻り、GITHUB_REPO_TOKENという名前の環境変数を追加してトークンを保存し、Display value in build logをOFFに設定して、変数の表示をオフにします。さもなければ、トークンを公開することになります。

添加 Token 环境变量

これで、実行スクリプトの中で$GITHUB_REPO_TOKENを使用してトークンの環境変数にアクセスできるようになります。

次に、どのように使用するかです。Hexo をデプロイする前に、元のデプロイリポジトリのアドレスをAccess Tokenを含むアドレスに置き換える必要があります。そのため、.travis.ymlのhexo deployコマンドの前に次のコマンドを追加します：

sed -i'' "[email protected]:~https://${GITHUB_REPO_TOKEN}@github.com/~" _config.yml

こうすることで、実行時にこのコマンドが自動的に権限を持つトークンのアドレスに置き換えられ、元の設定ファイルが漏洩したり影響を受けたりすることはありません。

ビルド失敗：サブモジュールのプル失敗#

このブログのサードパーティテーマはgit submoduleで管理されています。「Hexo で個人ブログを構築する #04 テーマのインストールとカスタムスタイル」を参照してください。

Build History

詳細なビルドログは#1で確認でき、以下に重要な情報を抜粋します：

$ git submodule update --init --recursive
Submodule 'themes/skapp' ([email protected]:Mrminfive/hexo-theme-skapp.git) registered for path 'themes/skapp'
Cloning into '/home/travis/build/y0ngb1n/y0ngb1n.github.io/themes/skapp'...
Warning: Permanently added the RSA host key for IP address '192.30.253.113' to the list of known hosts.
Permission denied (publickey).
fatal: Could not read from remote repository.

Travis CI はデフォルトで Git サブモジュールをサポートしています。リポジトリをプルする際にサブモジュールのリポジトリもデフォルトでプルされますが、この機能を手動でオフにすることができます。

git submoduleを使用する際に、[email protected]のリポジトリアドレスを SSH プロトコルで追加したため、プルに失敗しました。以下に 2 つの解決策を提供します：

SSH Known Hosts に追加する - 公式の解決策
.gitmodules内のリポジトリアドレスを手動で変更し、gitプロトコルのリポジトリリンクをhttpsプロトコルに変更する

私は方案 2 を使用し、httpsプロトコルに変更しました：

[submodule "themes/skapp"]
    path = themes/skapp
    url = https://github.com/Mrminfive/hexo-theme-skapp.git

この変更を GitHub にプッシュすると、Travis CI はビルドを行い、この時点で#2が成功したことが確認できます。

README でビルド状態を確認する#

READMEに Travis CI のビルド状態を追加することで、プロジェクトの Travis CI 上のビルド状態を簡単に確認できます。—— ステータス画像の埋め込み、Shields.io

README

参考資料#

Travis CI チュートリアル - @Travis CI Docs
継続的インテグレーションサービス Travis CI チュートリアル - @阮一峰
Travis CI による GitHub 個人ブログの継続的インテグレーション - @路家豪
Travis を使用して Hexo を GitHub に自動ビルドする - @zthxxx
即使用可能、Hexo ブログの github+server 自動デプロイ - @伍酱
Travis CI を使用して Hexo ブログを自動デプロイする - @Karl
Travis CI を使用して Hexo ブログを自動デプロイする - @wshunli
Hexo と Travis-CI：最もわかりやすい自動ブログ公開の図解チュートリアル - @MichaelX
Hexo+Github+Travis-ci でプログラマー自身のブログを構築する - @baiyangliu