NetlifyへのGatsbyのデプロイ

公開日:2020-10-06 更新日:2020-10-06

ブログやアプリケーションサイトを構築しているとサイトが未完成であってもこれまでの設定が正常に行われているか外部のサービスを利用して公開してみたいという気持ちが湧いてきます。

本文書ではGatsbyサイトをNetlifyへデプロイする手順を説明しています。GitHub、Netlifyへのアカウントの作成が完了していることを前提に記述していますのでまだ準備していない場合は準備を行い読み進めてください。

GitHubでのリポジトリの作成

GitHubにサインインを行い構築中または構築済のGatsbyサイト用のリポジトリの作成を行います。GitHubにサインイン後、画面右上のメニューにある"+"プラスボタンをクリックするとドロップダウンメニューが表示されるので、New repositoryを選択します。

GitHubでの新規リポジトリの作成
GitHubでの新規リポジトリの作成

リポジトリ(Repository)の名前を入力する必要があるので任意の名前をつけ必要に応じてプロジェクトの情報(description)を入力をしてください。。また"Public", "Private"でプロジェクトを公開するか非公開にするかの設定を行うことができます。ここでは非公開の設定("Private")にしています。設定が完了したら"Create repository"をクリックしてください。

リポジトリの作成
リポジトリの作成

リポジトリの作成が完了すると以下の画面が表示されます。Gatsbyサイトを作成したGitHubのリポジトリにプッシュする方法(Push)も記載されているのでその手順を参考に行っていきます。上部に表示されている"http://github.com/..."は後ほどリポジトリを設定する際に利用します。

リポジトリの作成後の画面
リポジトリの作成後の画面

GitHubリポジトリへのPush

ローカルのGatsbyのプロジェクトディレクトリでgit initコマンドを実行してローカルに新規のリポジトリを作成します。git initで既存のものがある場合は初期化し、実行後にはgitディレクトリが作成されます。

 % git init
Reinitialized existing Git repository in /Users/mac/Desktop/gatsby-blog/.git/

ファイルをリポジトリに追加するためにgit add .コマンドを実行します。

 % git add .

git commitコマンドにオプション"-m"でメッセージを入れてコミット(commit)を行います。

% git commit -m "first commit"
[master ff1ed6d] first commit
 40 files changed, 5293 insertions(+), 101 deletions(-)
 create mode 100644 gatsby-node.js
    ・
    ・

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

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

設定したリモートリポジトリにプッシュ(Push)します。git pushを行うとローカルのファイルがGitHubにアップロードされます。

 % git push -u origin master

git push実行後はGitHub上ではプッシュしたファイルの確認を行うことができます。Pushが完了するとGitHub上でのNetlifyのデプロイの準備は完了です。

GitHubでのプッシュしたファイルの確認
GitHubでのプッシュしたファイルの確認

NetlifyとGitHubの連携とサイト公開

GitHubとの連携

GitHubにプッシュしたデータをNetlify上で公開するためにはNetlifyとGitHubの連携が必要となります。

NetlifyとGitHubの連携はNetlify側から行います。Netlifyへログインし、ログイン後に右上に表示されている"New site from Git"ボタンをクリックします。

GitHubへの接続
GitHubへの接続

Netlify上で新しいサイトを作成するための設定画面が表示されます。3つのGit Provider(GitHub, GitLab, Bitbucket)から選択することができますが、”GitHub”をクリックします。

Netlifyへのログイン
Netlifyへのログイン

GitHubと連携するために認証が必要となります。認証に必要な情報が必要な場合を行ってください。ここではGitHubへのサインインが完了しているのでリポジトリの選択画面が表示されます。

Only select repositoriesからGatsbyのリポジトリを選択してください。選択が完了したら下部にある"Install"ボタンをクリックしてください。

GitHubのリポジトリの選択
GitHubのリポジトリの選択

Netlify上でのリポジトリの選択

選択したリポジトリが表示されるのでそのリポジトリをクリックしてください。

GitHubのリポジトリの選択
GitHubのリポジトリの選択

ビルドオプションとデプロイ

最後にBuild optionsの設定画面が表示されますが自動で値が入力されます。Show advancedをクリックすると環境変数を追加することも可能です。今回はこのページで何も変更することなく下部にある”Deploy site”をクリックしてください。デブロイが開始されます。

ビルドオプションとデプロイ
ビルドオプションとデプロイ

デプロイが開始され下記の画面が表示されます。goofy-goldstine-0f1b9dという名前が付与され、Site deploy in progressと表示され、デプロイのための処理が行われていることがわかります。

デプロイ開始
デプロイ開始

デプロイが完了するとサイトのURLが表示されます。URLをクリックするとデプロイしたサイトが表示されます。

デプロイ完了
デプロイ完了

クリックしサイトが表示されるか確認を行ってください。

サイトへのアクセス
サイトへのアクセス

以上でNetlifyへのGatsbyサイトのデプロイが完了です。