NetlifyでGatsbyブログを発信する手順

Netlifyを利用してGatsbyで生成したブログを発信する手順です。 これまではFirebaseを利用していましたが、Netlifyに移動したのでその時の手順を記載しています。

HTTPSにも対応してくれますし、ビルド・デプロイも変わりにやってくれるので快適です。

以下の記事にてNetlifyで発信する経緯を書いてます。
ブログをNetlifyに移動しました

すでにGatsbyでサイトをビルドするとこまではやってある前提です。
そのへんの情報も知りたい方はこちらへ
Gatsby+Firebaseを利用したブログの作り方

概要

localで用意したGatsbyのソースと設定ファイルをGitHubにコミットします。
NetlifyでGitHubとの連携をおこない、コミットしたソースコードを取得します。
Netlifyでビルド・デプロイを行いサイトを発信します。
独自ドメインなどの設定を行います。

+ GitHub
    + GitHubにリポジトリ作成
+ Netlify
    + Netlifyでアカウント作成
    + 新しいサイトを作成
    + リポジトリを選択
    + buildコマンドと出力ディレクトリを設定
    + 初回のビルド
    + アクセスして確認
+ GitHubへプッシュ
+ 独自ドメインの接続
    + ドメインの入力
    + DNSのレコード設定
    + SSL証明書の発行を待つ
+ 完了

詳細

GitHub

GitHubにリポジトリを作成

ローカルのGatsbyで利用するソースコードをコミットしてプッシュします。
以下のようなファイルとディレクトリがコミットされると思います。

src/
    +…
static/
    +…
gatsby-config.js
gatsby-node.js
package.json
README.md

ビルド時に生成されるpublic/以下の実際の静的コンテンツは不要です。 src/以下とその他設定ファイルが必要になります。

プライベートリポジトリにしても問題ないです。
変更方法はこちらを参考にしてみてください。
GitHubのプライベートリポジトリが無料枠でも使えるようになった

Netlify

Netlifyのサイト

Netlifyでアカウント作成

GitHubのアカウントを使って連携します。メールアドレス等使ってアカウントを作成することもできますが、いずれかのソース管理サービスを連携することになりますので、最初から連携してしまえばいいと思います。

GitHub側で許可するかどうか質問されるので許可しましょう。

新しいサイトを作成

もろもろの入力をすませると、管理画面に移動します。 New site from Git を選択し、GitHubを選択します。

リポジトリを選択

GitHubと連携できていればリポジトリ選択ができますので、先程GitHubに作成したリポジトリを選択します。 該当のリポジトリが選択できない場合は、リポジトリごとにNetlifyとの連携を確認するようになっています。 GitHub側でリポジトリ単位で連携を許可する必要があります。

下の方に「Configure the Netlify app on GitHub.」というリンクがあるのでそこからアクセスして設定の変更をしましょう。

build コマンドと出力ディレクトリを設定

デプロイに利用するブランチやビルドの設定を行います。

• ブランチは実際に利用するものを選んでください。私は特に変更の必要はないのでmasterにしています。
• Build commandにはgatsby build
• Publish directoryにはpublic

を設定します。Gatsbyの方でデフォルトの設定で利用していればこれで問題ないです。出力先を別のディレクトリにしているとか、ビルド時に何らかのオプションを設定しているとかであれば、ここに入力しておけば反映されます。

ちなみに両方空にしておくと、リポジトリのソースがまるごとデプロイされるようです。もしも、ビルドをローカルで行って、生成されたファイルのみを直接デプロイしたい場合はこれらを空にします。

初回のビルド

下部の「Deploy site」を選択すると、デプロイが行われます。

自動的にビルドコマンド（gatsby build）が実行され、public以下に出力されるファイルがデプロイして公開されます。 ログが表示されるので何かあればそこに出力されます。うまく行かなかった場合などはこのログを見て対応しましょう。

package.jsonにプラグインの記載が足りない場合や時間がかかりすぎた場合などあるかと思います。 どうやらビルドに15分以上かかると失敗するそうです。サイトが大きい場合は注意してください。

アクセスして確認する

ビルドが正常完了して入れば、ビルド履歴のところが「PUBLISHED」になっています。 デプロイしたサイトのURLが与えられています。画面上のリンクからアクセスしてブログが発信されていることが確認できます。

サイト名が最初は長い文字列になっています。設定から名前を変更できるのでやっておくと良いです。URLも変わります。

GitHubへプッシュ

ここまででとりあえずサイトは公開されました。

以降の更新はGitHubにプッシュすると自動でビルド・デプロイが行われます。設定を変更すれば自動で行うかどうかを変更できます。

GitHubの該当するリポジトリにpushすると、自動的にNetlifyが感知してビルドを行います。 正常にビルドが完了すればpublic/以下のファイルがデプロイされて公開されます。 したがって、ローカルでgatsby buildコマンドを実行する必要はなくなりました。ローカルのpublic/以下のファイルも必要ありません。

独自ドメインの接続

サイトの管理画面に「Domain Setting」のリンクがあります。 クリックすると設定画面に遷移します。（Settingタブからもアクセスできます。）

ドメインの入力

「Custom domains」 の項目内の「Add custom domain」を選択するとドメインを入力するフォームが表示されます。そこに自分の持っているドメインを入力します。

「Custom domains」の項目に入力したドメインが追加されます。ただし、この時点では権限を持っているか怪しいので、「Check DNS configuration」と表示されます。まだドメインにアクセスしてもブログは表示されません

DNSのレコード設定

「Check DNS configuration」をクリックすると、設定方法が表示されます。 設定すべきAレコードのIPが表示されますので、その内容をメモしてDNSに設定します。

私の場合は独自ドメインをお名前ドットコムで取得しているので、お名前ドットコムの管理画面で設定しました。設定変更後しばらく待つと反映されます。

「Check DNS configuration」の文字が消えてドメインが緑色の文字になったら完了です。権限が認められました。

SSL証明書の発行を待つ

自動的にSSL証明書が作られます。しばらく時間がかかりますが、1晩たったら反映されていました。 「Your site has HTTPS enabled」と表示されるようになります。これでHTTPSでのアクセスもできるようになっています。

完了

以上でNetlifyでGatsbyブログを発信する手順は完了です。他にもフォームを作ったりできる？だったり、気になる情報が満載なので、引き続き色々触ってみようと思います。

使ってみてかなり便利だったので、とりあえずはNetlifyでGatsbyブログをホスティングしようと思います。これでもなにかうまく行かないようだったら、AWSでしょうかね。