Web 開発の世界では、このところ「JAMStack」が大きな話題となっています。JAMStack とは「JavaScript」「API」「Markup」の頭文字を取った、Web アプリケーションを構築するための近代的なアーキテクチャのことで、データベースを必要とせず、Web サーバーに依存しないことが大きな特徴です。JAMStack アーキテクチャは、HTML、CSS、JavaScript で構成されたフロントエンドと、JSON や XML を返す単なるコンテンツ API であるバックエンドを生成することで、フロントエンドとバックエンドが切り離されています。
そんな JAMStack プラットフォームの中でも特に人気を博しているのが、Gatsby.js です。Gatsby.js は、React.js がベースになっている無料のオープンソース フレームワークで、高速な Web アプリケーションを構築できます。
このチュートリアルでは、CircleCI で継続的インテグレーション パイプラインを構築して、広く使われている Heroku プラットフォームに Gatsby.js サイトをデプロイする手順を説明します。
前提条件
この記事の手順に沿ってチュートリアルを進めるには、いくつかの準備が必要です。
- Node.js (10.16 以降) をローカル システムにインストールする (ターミナルでコマンド
node -vを実行して NodeJS のバージョンを出力してみると、インストールされているかを確認できます) - Git をローカル システムにインストールする (ターミナルでコマンド
gitを実行すると、インストールされているかを確認できます。このコマンドは使用可能な git コマンドの一覧を出力します) - A Heroku アカウントを用意する
- A GitHub アカウントを用意する
- A CircleCI アカウントを用意する
上記のものが揃ったら、始めていきましょう。
Gatsby.js プロジェクトを作成する
最初に、Gatsby.js プロジェクトを作成する必要があります。システムの適切な場所で、以下のコマンドを実行して、新しいプロジェクトを作成します。
npm gatsby new gatsby-heroku-deploy
このコマンドの gatsby-heroku-deploy の部分は、プロジェクトをスキャフォールディングするフォルダーの名前です。任意の名前でかまいません。
このコマンドを実行すると、すぐに新しい Gatsby.js プロジェクトのスキャフォールディングが開始されます。パッケージ マネージャーから yarn または npm のいずれかを選択するように求められる場合がありますが、このチュートリアルでは npm を選択します。
スキャフォールディング プロセスが完了したら、プロジェクトのルートに移動し (cd gatsby-heroku-deploy)、以下のコマンドを実行して、アプリケーションを実行するサーバーを開発モードで起動します。
npm run develop
これで http://localhost:8000/ でアプリケーションを実行できるようになり、以下のページが表示されます。
簡単ですね。
機能的な Gatsby.js サイトが立ち上がりました。
Gatsby 用の Heroku アプリをセットアップする
Gatsby アプリケーション用の Heroku アプリをセットアップするには、Heroku にログインして、新しいアプリケーションを作成します。
次に、アプリケーションの名前 (上で作成したアプリケーションの名前「gatsby-heroku-deploy」) と、Heroku アカウントの API キーを控えておきます。API キーは、Heroku の [Account settings (アカウント設定)] で確認できます。
この 2 つの値 (アプリ名と API キー) は、Heroku へのデプロイメント用に CircleCI プロジェクトの環境変数を作成する際に必要になります。
そして、必要な buildpack をインストールすれば、Heroku アカウントの作業は終わりです。buildpack は、アプリケーションをデプロイするときに実行するスクリプトです。このチュートリアルでは、2 つの buildpack を使用します。
- heroku/nodejs: すべての Node.js アプリケーションに必要
- heroku/heroku-buildpack-static: Heroku Buildpack Static パッケージ (Gatsby.js のビルドは静的ファイルで構成されるため、Heroku プラットフォーム上で静的ファイルをサポートするのに便利なこのパッケージを使用します)
Heroku アプリケーションの [Settings (設定)] ページに移動し、[Buildpacks] セクションまでスクロールします (既に heroku/nodejs buildpack を追加している場合は、ここに表示されます)。[Add buildpack (buildpack を追加)] をクリックすると、次のようなダイアログがポップアップ表示されます。
どちらの buildpack (heroku/nodejs と heroku/heroku-buildpack-static) もテキスト フィールドに識別子を入力し、[Save Changes (変更を保存)] をクリックします。
メモ: heroku/nodejs が既に追加されている場合は、heroku/heroku-buildpack-static のみを追加します。
この作業が終わると、2 つの buildpack が [Buildpacks] の一覧に表示されるはずです。
これで、Heroku に必要なセットアップは完了です。
CircleCI で Gatsby.js プロジェクトをセットアップする
今度は CircleCI で Gatsby.js プロジェクトをセットアップします。コードをプッシュする先の GitHub リポジトリのアカウントは、CircleCI アカウントに関連付けられている必要があります。
次に、[Add Projects (プロジェクトの追加)] ページにアクセスしてプロジェクトを追加します。
[Set Up Project (プロジェクトをセットアップ)] をクリックすると、下の画面が開きます。
セットアップ ページで [Start Building (ビルドを開始)] をクリックします。ビルドを開始する前に、提供されている CircleCI 設定ファイルをダウンロードして別のブランチに追加するか、手動で設定するかを選択するよう求められます。
[Add Manually (手動で追加)] を選択します。すると、設定ファイルがセットアップされていることを確認する別のダイアログが表示されます。
[Start Building (ビルドを開始)] をクリックして、セットアップを完了します。設定ファイルはまだ用意していないため、ビルドは失敗します。これについては後ほど行います。
最後に、先ほど追加したプロジェクトの環境変数 を設定します。これにより、デプロイメント用 Heroku アプリケーションへの認証済みアクセスが可能になります。
[Pipelines (パイプライン)] ページの [Project Settings (プロジェクト設定)] をクリックして移動します (このチュートリアルのプロジェクトが選択されていることを確認してください)。
プロジェクト設定のページに移動したら、サイド メニューで [Environment Variables (環境変数)] を選択します。
環境変数のページで、[Add Environment Variable (環境変数を追加)] をクリックして追加します。
以下の環境変数を追加します。
HEROKU_APP_NAME: Heroku アプリケーションの名前 (ここではgatsby-heroku-deploy)HEROKU_API_KEY: Heroku アカウントの API キー (Heroku アカウントの [Account Settings (アカウント設定)] の [Account (アカウント)] タブで確認可能)
これで、Heroku にデプロイするための CircleCI コンソールでのセットアップはすべて完了です。
Orbs を使用して Gatbsy.js サイトをデプロイする
Orbs は、何度も利用する構成内容を 1 行のコードにまとめた、YAML 構成の再利用可能パッケージです。定型の構成を抽象化することによって、強力なパイプライン機能を簡単に利用できるようになります。
このチュートリアルでは、CircleCI の Heroku 用 Orb を使用して、Gatsby.js サイトを Heroku にデプロイするパイプラインを構成します。
ただし最初に、アプリケーションをデプロイおよび実行する方法を Heroku Buildpack Static パッケージに指示するためのファイルを作成しておく必要があります。
プロジェクトのルートで、static.json という新しいファイル作成し、以下のコードを貼り付けします。
{
"root": "public/",
"headers": {
"/**": {
"Cache-Control": "public, max-age=0, must-revalidate"
},
"/**.css": {
"Cache-Control": "public, max-age=31536000, immutable"
},
"/**.js": {
"Cache-Control": "public, max-age=31536000, immutable"
},
"/static/**": {
"Cache-Control": "public, max-age=31536000, immutable"
},
"/icons/*.png": {
"Cache-Control": "public, max-age=31536000, immutable"
}
},
"https_only": true,
"error_page": "404.html"
}
ここで最も重要な構成パラメーターは、root プロパティです。Gatsby.js で build スクリプトを実行すると (このスクリプトは、デプロイする前にビルドを実行するために Heroku でも使用されます)、本番バージョンのアプリケーションを含む public フォルダーが、プロジェクトのルートに生成されます。この本番バージョンは、ホストからユーザーに提供されるものです。
したがって、root プロパティでこのフォルダーを指定することで、ホストで適切なコードが処理されます。その他のパラメーターは、Gatsby.js サイト向けのベスト プラクティスに沿って設定しています。たとえば、こちらにキャッシュ ガイドラインが掲載されています。
それでは、デプロイメントのスクリプトを書いてみましょう。
Gatsby.js プロジェクトのルートに、.circleci という名前のフォルダーを作成し、その中に config.yml というファイルを作成します。その config.yml ファイルに、以下のコードを貼り付けます。
version: 2.1
orbs:
heroku: circleci/heroku@0.0.10
workflows:
heroku_deploy:
jobs:
- heroku/deploy-via-git
これで完了です。
上記の構成では、Heroku Orb circleci/heroku@0.0.10 を記述することで、Heroku の一連の強力なジョブやコマンドに自動的にアクセスできるようにしています。その 1 つが heroku/deploy-via-git で、これにより、GitHub リポジトリから Heroku アカウントにアプリケーションがデプロイされます。
このジョブが、Heroku CLI のインストール、プロジェクトの依存関係のインストール、ビルド スクリプトの実行、アプリケーションのデプロイメントを処理します。また、Heroku アプリケーションへのデプロイメントをスムーズに進められるよう、環境変数を反映します。
さて、いよいよ本番です (ドラムロールの音が聴こえてきます)。Gatsby.js プロジェクトに加えたすべての変更をコミットし、リポジトリにプッシュしてデプロイメントをトリガーしましょう。
できました！
ビルドをクリックすると、デプロイメントのバックグラウンド処理を確認できます。
Gatsby.js サイトを正しくデプロイできたことを確認するには、デフォルトの Heroku アドレス https://<アプリ名>.herokuapp.com にアクセスします。このチュートリアルの説明と同じ名前を使用している場合は、https://gatsby-heroku-deploy.herokuapp.com/ となります。以下のような画面が表示されるはずです (別の Gatsby.js スターター テンプレートを使用している場合は、画面が異なります。スターターの詳細についてはこちらをご覧ください)。
まとめ
今回は、CircleCI Orbs を使用して、Gatsby.js サイトを Heroku にデプロイしました。コードをプッシュするだけで、すべての変更が自動的にデプロイされます。また、CircleCI Orbs を使用するといかにデプロイメントが容易になるかがおわかりいただけたと思います。何行もの長いコードを書かなくても、Heroku にデプロイするのに必要な構成はすべて Orbs の簡単なコマンドにまとめられています。
CircleCI Orb レジストリをチェックして、プログラミング言語やデプロイ先に最適なものを探してみてください。
すばらしいコーディングができますように！
