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以降)をローカルシステムにインストールする(ターミナルでコマンド节点-vを実行してNodeJSのバージョンを出力してみると,インストールされているかを確認できます)
  • 混帐をローカルシステムにインストールする(ターミナルでコマンド混帐を実行すると,インストールされているかを確認できます。このコマンドは使用可能なgitコマンドの一覧を出力します)
  • 一个Herokuアカウントを用意する
  • 一个GitHubアカウントを用意する
  • 一个CircleCIアカウントを用意する

上记のものが揃ったら,始めていきましょう。

Gatsby.jsプロジェクトを作成する

最初に,Gatsby.jsプロジェクトを作成する必要があります。システムの適切な場所で,以下のコマンドを実行して,新しいプロジェクトを作成します。

npm gatsby new gatsby-heroku部署

このコマンドのgatsby-heroku-deployの部分は,プロジェクトをスキャフォールディングするフォルダーの名前です。任意の名前でかまいません。

このコマンドを実行すると,すぐに新しいGatsby.jsプロジェクトのスキャフォールディングが开始されます。パッケージマネージャーからまたはnpmのいずれかを選択するように求められる場合がありますが,このチュートリアルではnpmを選択します。

スキャフォールディングプロセスが完了したら,プロジェクトのルートに移动し(CD盖茨比,Heroku的部署),以下のコマンドを実行して,アプリケーションを実行するサーバーを開発モードで起動します。

npm运行发展

これでhttp://localhost:8000/でアプリケーションを実行できるようになり,以下のページが表示されます。

簡単ですね。

機能的なGatsby.jsサイトが立ち上がりました。

盖茨比用のHerokuアプリをセットアップする

盖茨比アプリケーション用のHerokuアプリをセットアップするには,Herokuにログインして,新しいアプリケーションを作成します。

次に,アプリケーションの名前(上で作成したアプリケーションの名前”gatsby-heroku-deploy”)と,HerokuアカウントのAPIキーを控えておきます。APIキーは,Herokuの[帐号设定(アカウント设定)]で确认できます。

この2つの値(アプリ名とAPIキー)は,Herokuへのデプロイメント用にCircleCIプロジェクトの環境変数を作成する際に必要になります。

そして,必要なbuildpackをインストールすれば,Herokuアカウントの作業は終わりです。buildpackは,アプリケーションをデプロイするときに実行するスクリプトです。このチュートリアルでは,2つのbuildpackを使用します。

  • Heroku的/的NodeJS:すべてのNode.js的アプリケーションに必要
  • heroku上/ heroku上-buildpack静电:Heroku的Buildpack静态パッケージ(Gatsby.jsのビルドは静的ファイルで构成されるため,Heroku的プラットフォーム上で静的ファイルをサポートするのに便利なこのパッケージを使用します)

Herokuアプリケーションの[设置(設定)]ページに移動し,(Buildpacks]セクションまでスクロールします(既にHeroku的/的NodeJSbuildpackを追加している場合は,ここに表示されます)。(添加buildpack(buildpackを追加)]をクリックすると,次のようなダイアログがポップアップ表示されます。

どちらのbuildpack(Heroku的/的NodeJSheroku / heroku-buildpack-static)もテキストフィールドに识别子を入力し,[保存更改(変更を保存)]をクリックします。

メモ:Heroku的/的NodeJSが既に追加されている場合は,heroku / heroku-buildpack-staticのみを追加します。

この作業が終わると,2つのbuildpackが[Buildpacks]の一覧に表示されるはずです。

これで,Herokuに必要なセットアップは完了です。

CircleCIでGatsby.jsプロジェクトをセットアップする

今度はCircleCIでGatsby.jsプロジェクトをセットアップします。コードをプッシュする先のGitHub的リポジトリのアカウントは,CircleCIアカウントに关连付けられている必要があります。

次に,[加入项目(プロジェクトの追加)]ページにアクセスしてプロジェクトを追加します。

(建立项目(プロジェクトをセットアップ)]をクリックすると,下の画面が開きます。

セットアップページで[开始构建(ビルドを開始)]をクリックします。ビルドを開始する前に,提供されているCircleCI設定ファイルをダウンロードして別のブランチに追加するか,手動で設定するかを選択するよう求められます。

(手动添加(手動で追加)]を選択します。すると,設定ファイルがセットアップされていることを確認する別のダイアログが表示されます。

(开始构建(ビルドを開始)]をクリックして,セットアップを完了します。設定ファイルはまだ用意していないため,ビルドは失敗します。これについては後ほど行います。

最後に,先ほど追加したプロジェクトの環境変数を设定します。これにより,デプロイメント用的Herokuアプリケーションへの认证済みアクセスが可能になります。

(管道(パイプライン)]ページの[项目设置(プロジェクト设定)]をクリックして移动します(このチュートリアルのプロジェクトが选択されていることを确认してください)。

プロジェクト設定のページに移動したら,サイドメニューで[环境变量(环境変数)]を选択します。

環境変数のページで,(添加环境变量(环境変数を追加)]をクリックして追加します。

以下の環境変数を追加します。

  • HEROKU_APP_NAME: Herokuアプリケーションの名前(ここではgatsby-heroku-deploy)
  • HEROKU_API_KEY: HerokuアカウントのAPIキー(Herokuアカウントの[帐号设定(アカウント设定)]の[帐户(アカウント)]タブで确认可能)

これで,HerokuにデプロイするためのCircleCIコンソールでのセットアップはすべて完了です。

orbを使用してGatbsy.jsサイトをデプロイする

球体は,何度も利用する構成内容を1行のコードにまとめた,YAML構成の再利用可能パッケージです。定型の構成を抽象化することによって,強力なパイプライン機能を簡単に利用できるようになります。

このチュートリアルでは,CircleCIのHeroku用球体を使用して,Gatsby.jsサイトをHerokuにデプロイするパイプラインを構成します。

ただし最初に,アプリケーションをデプロイおよび実行する方法を的Heroku Buildpack静态パッケージに指示するためのファイルを作成しておく必要があります。

プロジェクトのルートで,static.jsonという新しいファイル作成し,以下のコードを貼り付けします。

{“根”:“公共/”,“标题”:{“/ * *”:{“cache - control”:“公共信息= 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/*。{"Cache-Control": "public, max-age=31536000, immutable"}}, "https_only": true, "error_page": "404。html "}

ここで最も重要な構成パラメーターは,プロパティです.Gatsby.jsで构建スクリプトを実行すると(このスクリプトは,デプロイする前にビルドを実行するために的Herokuでも使用されます),本番バージョンのアプリケーションを含む上市フォルダーが,プロジェクトのルートに生成されます。この本番バージョンは,ホストからユーザーに提供されるものです。

したがって,プロパティでこのフォルダーを指定することで,ホストで适切なコードが处理されます。その他のパラメーターは,Gatsby.jsサイト向けのベストプラクティスに沿って设定しています。たとえば,こちらにキャッシュガイドラインが掲載されています。

それでは,デプロイメントのスクリプトを書いてみましょう。

Gatsby.jsプロジェクトのルートに,.circleciという名前のフォルダーを作成し,その中にconfig.ymlというファイルを作成します。そのconfig.ymlファイルに,以下のコードを贴り付けます。

版本:2.1宝珠:Heroku的:circleci/heroku@0.0.10工作流程:heroku_deploy:工作: -  Heroku的/部署-通的git

これで完了です。

上記の構成では,Heroku Orbcircleci / 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 orbを使用して,Gatsby.jsサイトをHerokuにデプロイしました。コードをプッシュするだけ,ですべての変更が自動的にデプロイされます。また,CircleCI orbを使用するといかにデプロイメントが容易になるかがおわかりいただけたと思います。何行もの長いコードを書かなくても,Herokuにデプロイするのに必要な構成はすべてorbの簡単なコマンドにまとめられています。

CircleCI Orbレジストリをチェックして,プログラミング言语やデプロイ先に最适なものを探してみてください。

すばらしいコーディングができますように!

Fikayo Adepoju氏は,网络ソリューションやモバイルソリューションの开発に10年以上携わり,开発者としてマルチに活跃する傍ら,执笔活动にも取り组んでいます。现在は科技专家咨询でソフトウェアリードを务め,年底PacktやUdemyのコース开発が担当です。教えることに强い情热を倾けており,将来は执笔を本业にすることを目指しています。