GitbookとGithubを連携して電子書籍を自動Publishする方法

# はじめに

GitbookとGithubを連携して電子書籍を自動Publishする方法のまとめ。

# Gitbookとは

<img width="215" alt="logo_gitbook.png" src="https://qiita-image-store.s3.amazonaws.com/0/63450/42eb58dc-10b0-82f5-e975-7ce8d7505aad.png">

[FRIENDCODE INC](https://www.gitbook.com/about) が運営するオンラインで電子書籍の作成、管理、出版ができるWebサービス。

# GitbookとGithubの連携

Gitbookでは、新規プロジェクトを作成するとGitbook独自のレポジトリが生成される。Gitbookの設定を変更する事で、GithubのレポジトリとWebhookを使って連携をすることが可能になる。

今回は、GithubのレポジトリとGitbookを連携し、Githubのレポジトリが更新されると、GitbookにWebhookで通知がいき、Gitbookで自動的にパブリッシュする設定をおこなう。

### Gitbookで新規でプロジェクトを生成する

![gitbook001.png](https://qiita-image-store.s3.amazonaws.com/0/63450/f3e3f913-7644-96eb-9e95-84c259c00bdc.png)

![gitbook002.png](https://qiita-image-store.s3.amazonaws.com/0/63450/d0b5ea2c-7262-4f96-93c3-2ac27b3cde43.png)

![gitbook003.png](https://qiita-image-store.s3.amazonaws.com/0/63450/dad925b8-5702-2696-bc0e-e56170a08c2e.png)

これでGitbookプロジェクトは生成される。初期設定でのレポジトリは、Gitbookのオリジナルのレポジトリになる。SettingsのPublicationの項目を見ると、確認できる。

![gitbook004.png](https://qiita-image-store.s3.amazonaws.com/0/63450/44d3f38a-661c-52a2-0bee-1c39b3c36453.png)

![gitbook005.png](https://qiita-image-store.s3.amazonaws.com/0/63450/e03dd8bc-653e-4978-3e49-376ac3593268.png)

ユーザ名 akira, プロジェクト名 exampleで作成した場合、Gitbookの標準のレポジトリのURIは以下の通りになる。

> https://git.gitbook.com/akira/example.git

## Gitbookと連携するGithubのレポジトリを新規作成する

Githubで、[+]-[New repository]を選択し、レポジトリを新規作成する。

![gitbook006.png](https://qiita-image-store.s3.amazonaws.com/0/63450/153eb63a-72f6-e7ca-ba0b-4f25aa6677da.png)

![gitbook007.png](https://qiita-image-store.s3.amazonaws.com/0/63450/f55edfa5-95f8-67d8-e34f-98389cd7c599.png)

レポジトリのURIをコピーする。

![gitbook008.png](https://qiita-image-store.s3.amazonaws.com/0/63450/698e75db-c718-0570-8ce1-918f364947a7.png)

ユーザ名 akira-sasaki, プロジェクト名 exampleで作成した場合は、GithubのレポジトリのURIは以下の通りになる。

> https://github.com/akira-sasaki/example.git

## Gitbookの参照レポジトリをGithubに変更し、Webhookを設定する

> 1.Gitbookのレポジトリ https://git.gitbook.com/akira/example.git
> 2.Githubのレポジトリ https://github.com/akira-sasaki/example.git

Gitbookは、初期設定では1.Gitbookのレポジトリを参照しにいくので、これを2.Githubのレポジトリに変更する。Gitbookのプロジェクトの画面の[Settings]を選択する。

![gitbook004.png](https://qiita-image-store.s3.amazonaws.com/0/63450/44d3f38a-661c-52a2-0bee-1c39b3c36453.png)

[Github]を選択する。

![gitbook009.png](https://qiita-image-store.s3.amazonaws.com/0/63450/16b52758-f7ef-ef88-8a45-59b95ca35bb7.png)

GithubでコピーしたGithubのレポジトリを貼り付け、[Save]を選択する。

> https://github.com/akira-sasaki/example.git

![gitbook011.png](https://qiita-image-store.s3.amazonaws.com/0/63450/dafa74da-9e81-2b4a-5f08-4f629a3771f3.png)

[+ Add webhook]を選択し、GithubにWebhookの登録をおこなう。

![gitbook012.png](https://qiita-image-store.s3.amazonaws.com/0/63450/db4f5738-f282-2d02-ad01-ce847a7657f4.png)

[Add Webhook]を押して、設定を保存する。

![gitbook013.png](https://qiita-image-store.s3.amazonaws.com/0/63450/607826f0-700f-fa96-a71b-90e0e5d972c0.png)

これで、Githubに対してWebhookの設定が完了した状態。今度は、WebhookがちゃんとGithubに登録されているかを確認する。[Check webhooks]を選択する。

![gitbook014.png](https://qiita-image-store.s3.amazonaws.com/0/63450/8f58d53b-bc4a-13a0-4654-1676193982f8.png)

GithubのWebhooksのページに飛ぶので、Gitbookの設定が追加されているかを確認する。

![gitbook015.png](https://qiita-image-store.s3.amazonaws.com/0/63450/0d7888c7-db8c-320b-4d07-f89a442d0fa7.png)

Gitbookに対してWebhookの処理が正常に行なわれているかどうかは、[鉛筆]アイコンから確認できる。

![gitbook016.png](https://qiita-image-store.s3.amazonaws.com/0/63450/1ce4aec5-6240-4a16-6555-10a3ad1b2e24.png)

Githubから、GitbookへのWebhookのリクエストへのレスポンスが、OKならば、正常にWebhookが動作している事になる。

![gitbook017.png](https://qiita-image-store.s3.amazonaws.com/0/63450/2cf9be7a-6e2c-b07d-d419-7023a233191c.png)

# Githubの更新とGitbookでのPublishの流れ

これで、Githubのレポジトリが更新されると、WebhookでGitbookにリクエストが飛び、Gitbookの方で、電子書籍を自動的にPublishする流れになる。

それでは、GitbookのプロジェクトのDashboardに移動し、[Start Writing]を選択し、編集を開始する。

![gitbook019.png](https://qiita-image-store.s3.amazonaws.com/0/63450/e4ef451d-87af-8e58-c6a1-5d54de6f913c.png)

README.mdを選択し、「TESTの投稿」と入力し、[保存]アイコンを選択する。Gitbookの編集画面で編集した結果は、保存のタイミングでGithubのレポジトリに反映される。

![gitbook020.png](https://qiita-image-store.s3.amazonaws.com/0/63450/908dce52-76ac-1d90-ed2f-b8273fadaf51.png)

Githubに移動し、Commit履歴を見ると、今の保存のタイミングCommitログが生成されているのを確認する。

![gitbook021.png](https://qiita-image-store.s3.amazonaws.com/0/63450/8f700732-fa92-41f7-9ba8-0ba23b28936f.png)

![gitbook023.png](https://qiita-image-store.s3.amazonaws.com/0/63450/65747154-807a-3f4f-e689-64c08f8b1f59.png)

それでは、またGitbookの編集画面に戻り、SUMMARY.mdを生成する。SUMMARY.mdがないと、エラーが発生し、Publishに失敗するので、必ず作成しておく。

![gitbook030.png](https://qiita-image-store.s3.amazonaws.com/0/63450/aa9fe518-1b78-f65c-77f3-8b771be5d00d.png)

![gitbook031.png](https://qiita-image-store.s3.amazonaws.com/0/63450/1eb27420-6879-fe03-dc51-7f334dbb84ca.png)

SUMMARY.mdでは、書籍の目次を作成するファイルになる。項目1, 項目2をMarkdawnのフォーマットで 仮入力しておく。

![gitbook032.png](https://qiita-image-store.s3.amazonaws.com/0/63450/ec0c22d9-06c6-20bc-0031-fa5a06149a51.png)

ここで[保存]アイコンを選択すると、Githubが更新され、WebhookでGitbookに通知がいき、GitbookのPublishのプロセスが起動(Node.js)し、電子書籍がPublishされる。

![github040.png](https://qiita-image-store.s3.amazonaws.com/0/63450/1a740485-34ea-6a57-f27f-5015a19251a5.png)

Publishが開始されると、その回数分だけ、Dashboardの画面のHistoryが増えていく。

![gitbook041.png](https://qiita-image-store.s3.amazonaws.com/0/63450/ed76ce2c-39ec-0d9c-9412-10854e55383e.png)

[History]を選択すると、Publish履歴が表示される。赤い[X]はPublishに失敗したログになる。

![gitbook042.png](https://qiita-image-store.s3.amazonaws.com/0/63450/45b0af44-a3bc-dc5c-e89f-b3a27c2073e0.png)

項目を選ぶと、Node.jsの実行ログを閲覧できる。これでエラーの原因を探る事になる。

![gitbook043.png](https://qiita-image-store.s3.amazonaws.com/0/63450/50f6ded0-839b-866c-c2e3-c9c60d6362b9.png)

# トラブルシューティング

Gitbookでは、Publishに失敗する場合が頻繁に発生する。

その場合の回復ポイントは、GitbookのHistoryに赤い[X]でエラーがでている場合は、Node.jsの実行ログを参照して原因を探る。一方、GitbookのHistoryそのものの更新がなくなった場合は、GithubのWebhookのログを参照し原因を探る。(ファイル数の数量オーバーで、WebhookからGitbookを呼び出すタイミングでエラーを吐くことがある)