GatsbyJSのNetlifyへのデプロイ方法を学ぶ

本文書は公開済みの”基礎から始めるGatsbyJS入門”の続きです。前回ではMarkdownファイルに記述した内容を動的に表示し、そのコンテンツの中に画像を埋め込むというものでした。

今回はGatsbyをNetlifyにデプロイして公開する方法を確認していきます。Netlifyってどうやって利用するの？？と言う人のために事前に以下の文書を作成しておきましたので参考にしてください。

GitHubでのリポジトリの作成

GitHubにログインして、Gatsby用のリポジトリを新規で作成します。

GitHubを利用した経験がない人は下記の文書を参考にしてアカウントの作成を行ってください。

GitHubへのPush

GitHub上に作成したリポジトリにこれまでに構築したGatsbyのファイル群をPushするためにGitの処理を行なっていきます。

git initコマンドでローカルリポジトリの初期化を行います。コマンドはGatsbyのインストールディレクトリで行います。コマンドを実行すると実行ディレクトリに.gitディレクトリが作成されます。.(ドット)がついているので確認する際はlsにオプション-aをつけてください。


 % git init
Initialized empty Git repository in /Users/mac/Desktop/gatsby-site/.git/

ローカルリポジトリにすべてのファイルを加えるためgit addコマンドを実行します。


 % git add .

git statusコマンドで現在の状態を確認します。今回のプロジェクトで作成したファイルを確認することができます。


 % git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
	new file:   .gitignore
	new file:   .prettierignore
	new file:   .prettierrc
	new file:   LICENSE
	new file:   README.md
	new file:   gatsby-config.js
	new file:   gatsby-node.js
	new file:   package-lock.json
	new file:   package.json
	new file:   src/components/footer.js
	new file:   src/components/header.js
	new file:   src/components/layout.js
	new file:   src/images/first-article.jpg
	new file:   src/images/test.jpg
	new file:   src/images/test2.jpg
	new file:   src/pages/404.js
	new file:   src/pages/about.js
	new file:   src/pages/index.js
	new file:   src/pages/test.jpg
	new file:   src/posts/first-article.md
	new file:   src/posts/second-article.md
	new file:   src/posts/test.jpg
	new file:   src/templates/post.js
	new file:   src/templates/test.jpg
	new file:   src/test.jpg
	new file:   static/favicon.ico
	new file:   static/photo.png

git commitコマンドを実行してgit addで追加したファイルをcommitします。


 % git commit -m "first commit"
[master (root-commit) 71f3d57] first commit
 27 files changed, 20346 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc
    ・
    ・

リモートのリポジトリの設定を行います。reffect2020/hello_gatsby.gitは各環境に合わせて変更を行ってください。GitHubでリポジトリを作成した際に表示されているURLを利用します。


 % git remote add origin https://github.com/reffect2020/hello_gatsby.git

最後にgit pushコマンドでGitHubのリポジトリにプッシュします。

GitHubのhello_gatsbyリポジトリを確認するとプッシュしたファイルが下記のように表示されプッシュが行われたことが確認できます。

NetlifyとGitHubの連携

NetlifyからGitHubのhello_gatsbyリポジトリのデータにアクセスするためにGitHubとの連携が必要となります。

Netlifyへログインを行ってください。ログイン後画面の右側にある”New site from Git”ボタンをクリックします。

Git ProviderをGitHub, GitLab, Bitbucketの3つから選択します。本文書では GitHubを利用するので”GitHub”ボタンをクリックしてください。

GitHubとの接続が始めたの場合は、承認の処理が必要となります。すでに今回は承認済のためGitHubのリポジトリの選択画面がすぐに表示されます。hello_gatsbyを選択してください。GitHubにログインしていない場合はログイン画面が表示されます。

リポジトリが表示されない場合は下記のようにAdd another organizationをクリックしてリポジトリが表示されるように設定を変更してください。

最後にBuild optionsの設定画面が表示されますが、自動で値が入るため変更は必要ではありません。下部にある”Deploy site”をクリックしてください。デブロイが開始されます。

site deploy progressと画面に表示されるので、デプロイが完了するまで少し待つ必要があります。

デプロイは必ずにも成功するわけではなく失敗した場合はfailedと表示されます。失敗した場合の履歴は下記のように表示されます。行をクリックするとデプロイ時の実行ログが表示されるのでそこから原因を特定することができます。Publishedがデプロイに成功した場合で残りのFailedは失敗したことを表しています。

デプロイに成功した場合はデプロイ中に”Site deploy in progress”と表示されていた箇所にURLが表示されます。これがデフォルトのGatsbyサイトのURLになります。

ローカルファイルを更新した後にローカル環境でgit add, git commit, git push実行後GitHubに更新ファイルがアップされると、Netlify川で自動でデプロイが開始されます。

表示されているURLをクリックするとデプロイが完了したGatsbyのアプリケーションを確認することができます。リンクをクリックするとページを移動することができます。

上記のページはCSSが適用されていませんがこれをCSSで装飾していくことで本格的なブログサイトへと変貌させることが可能です。

Netlifyを利用すればGatsbyで構築したアプリケーションをこんなに簡単に公開できるので入門者の人にとっては驚きではないでしょうか。