NetlifyへのGatsbyのデプロイ
ブログやアプリケーションサイトを構築しているとサイトが未完成であってもこれまでの設定が正常に行われているか外部のサービスを利用して公開してみたいという気持ちが湧いてきます。
本文書ではGatsbyサイトをNetlifyへデプロイする手順を説明しています。GitHub、Netlifyへのアカウントの作成が完了していることを前提に記述していますのでまだ準備していない場合は準備を行い読み進めてください。
GitHubでのリポジトリの作成
GitHubにサインインを行い構築中または構築済のGatsbyサイト用のリポジトリの作成を行います。GitHubにサインイン後、画面右上のメニューにある"+"プラスボタンをクリックするとドロップダウンメニューが表示されるので、New repositoryを選択します。
リポジトリ(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のデプロイの準備は完了です。
NetlifyとGitHubの連携とサイト公開
GitHubとの連携
GitHubにプッシュしたデータをNetlify上で公開するためにはNetlifyとGitHubの連携が必要となります。
NetlifyとGitHubの連携はNetlify側から行います。Netlifyへログインし、ログイン後に右上に表示されている"New site from Git"ボタンをクリックします。
Netlify上で新しいサイトを作成するための設定画面が表示されます。3つのGit Provider(GitHub, GitLab, Bitbucket)から選択することができますが、”GitHub”をクリックします。
GitHubと連携するために認証が必要となります。認証に必要な情報が必要な場合を行ってください。ここではGitHubへのサインインが完了しているのでリポジトリの選択画面が表示されます。
Only select repositoriesからGatsbyのリポジトリを選択してください。選択が完了したら下部にある"Install"ボタンをクリックしてください。
Netlify上でのリポジトリの選択
選択したリポジトリが表示されるのでそのリポジトリをクリックしてください。
ビルドオプションとデプロイ
最後にBuild optionsの設定画面が表示されますが自動で値が入力されます。Show advancedをクリックすると環境変数を追加することも可能です。今回はこのページで何も変更することなく下部にある”Deploy site”をクリックしてください。デブロイが開始されます。
デプロイが開始され下記の画面が表示されます。goofy-goldstine-0f1b9dという名前が付与され、Site deploy in progressと表示され、デプロイのための処理が行われていることがわかります。
デプロイが完了するとサイトのURLが表示されます。URLをクリックするとデプロイしたサイトが表示されます。
クリックしサイトが表示されるか確認を行ってください。
以上でNetlifyへのGatsbyサイトのデプロイが完了です。