Travis CIからGitHub PagesにGatsbyサイトをデプロイする

最近、私が携わっているオープンソースプロジェクト用にシンプルな静的Webサイトを作る機会があり、テーマスターターの1つとともにGatsbyを試してみました。Webページを公開するため、Gatsbyで生成した静的WebサイトをGitHub Pagesにホスティングすることにしました。ソースコードも同じ場所でホスティングしているため、すべてをうまくまとめられます。

GitHub PagesでWebサイトをホスティングして公開する方法は2つあります。

1. 専用のgh-pagesブランチを使う。

2. masterなどの別のブランチを使い、Webサイトのコードをすべてdocs/ディレクトリに配置する。

私のプロジェクトでは後者を選び、Webサイトのソースコードをすべてmasterブランチのdocs/ディレクトリに配置してから、gh-pagesにデプロイしました。

GitHub Pagesへのデプロイ

Gatsbyは静的Webサイトのコードをpublic/,ディレクトリに生成します。公開するには、このコードをGitHub Pagesにプッシュする必要があります。Travis CIからリモートリポジトリにコードをプッシュし、Gitの処理を行うには、npmモジュールのgh-pagesを使います。

ローカルの開発環境からテストやデプロイを行うためにgh-pagesモジュールをインストールすることもできますが、必須ではありません。

ステップ1：GitHubトークンを取得する

今回の例ではTravis CIを使いますが、CIシステムからGitHub Pagesに変更をプッシュするには、GitHubで認証する必要があります。自分のアカウントのユーザー名とパスワードを使うのではなく、GitHubの開発者トークンを使う方法がおすすめです。

GitHubで、アカウント設定 -> Developer settings -> Personal access tokensに移動し、リポジトリへのアクセス権限を付与する新しいトークンを作成します。

Travisの設定で、リポジトリに新しいシークレット環境変数を追加します。名前をGH_TOKEN、値をGitHubから取得したトークンに設定してください。トークンは秘密にしておく必要があるため、ビルドログへの表示設定を有効にしないでください。有効にすると、他のユーザーがリポジトリにプッシュできてしまいます。

ステップ2：デプロイ用の実行スクリプトを設定する

Gatsbyプロジェクトのpackage.jsonを更新し、deploy実行スクリプトを追加します。このスクリプトではgh-pagesを呼び出し、次の2つの重要なコマンド引数を指定します。

1. -d public - ビルドしたファイルが格納され、GitHub Pagesにソースとしてプッシュされるディレクトリを指定します

2. -r URL - GitHubリポジトリのURLです。変更をgh-pagesブランチにプッシュできるよう、GitHubトークンを含めます。形式はhttps://$GH_TOKEN@github.com/<github username>/<github repository name>.gitです

例を紹介します。

"scripts": {
  "deploy": "gatsby build --prefix-paths && gh-pages -d public -r https://$GH_TOKEN@github.com/lirantal/dockly.git"
}

ステップ3：.travis.ymlを更新する

以下の.travis.yml設定を参考にしてください。

language: node_js
before_script:
  - npm install -g gatsby
node_js:
  - "10"
deploy:
  provider: script
  script: cd docs/ && yarn install && yarn run deploy
  skip_cleanup: true
  on:
    branch: master

TravisからGitHub PagesにGatsbyサイトをデプロイするための重要な設定を見ていきましょう。

1. before_scriptではGatsby CLIをインストールします。これにより、プロジェクトの実行スクリプトでgatsbyコマンドを使ってGatsbyサイトをビルドできるようになります。

2. deployは、ビルドがmasterブランチで実行された場合にのみ起動し、その際にscriptを実行します。ここでのscriptは、docs/ディレクトリにあるGatsbyサイトをデプロイするための一連の指示です。このディレクトリでWebサイトの依存関係をすべてインストールし、前のステップで設定したデプロイスクリプトを実行します。

まとめ

このチュートリアルに沿って進めれば、Webサイトを公開して、世界中の人々に見てもらえるようになります。ぜひ私たちにも共有してください！

CircleCIなどを使う場合も、CircleCIのデプロイファイルや環境変数の設定といった詳細を除けば、ワークフローと基本的な手順はほぼ同じです。オープンソースの精神にのっとり、この一連の手順を説明するドキュメントのプルリクエストをGatsby公式リポジトリに送信しました。これにより、今後Gatsbyを使う人が手順を簡単に確認できるようになります。