概要
今回は、Reactベースの静的サイトジェネレータのGatsbyと、サイトを公開するためのNetlifyを利用して、爆速でWebアプリケーションをデプロイする方法について書きます。
※ブログはテンプレートのままでデプロイしています。
プロジェクトの作成
Gatsbyはテンプレートを選んでプロジェクトを作成することができます。
今回はNetlifyのテンプレートがあるため、そちらを利用していきます。
それ以外のテンプレートはこちらから探すことができます。
# GatsbyのCLIのインストール
npm install -g gatsby-cli
# プロジェクトの作成
# gatsby new [プロジェクト名] [GatsbyのテンプレートのGitHubのurl]
gatsby new ferretdayo.blog.io https://github.com/netlify-templates/gatsby-starter-netlify-cms
Netlifyへのデプロイ
以下のURLにアクセスしてNetlifyにデプロイするための準備をしましょう。
https://app.netlify.com/start/deploy?repository=https://github.com/AustinGreen/gatsby-starter-netlify-cms&stack=cms
アクセスするとこちらの画面が表示されます。
ここのページでやってくれることは、以下の２つです。
- GitHubとNetlifyの連携
- GitHub上にNetlifyにデプロイしてくれるレポジトリも作成
ここにレポジトリ名を記入すると、GitHubにレポジトリが作成されます。
その後ダッシュボードが表示され、Getting startedの通り進めていきましょう。
1. Your site is deployed
作成したレポジトリに対してpushしましょう。
cd [作成したGatsbyのプロジェクト名]
git init
git remote add origin [対象のレポジトリのURL]
git push origin master
2. Custom domain is set
ドメインを持っていない場合は、やらなくてもいいです。
わたしは、お名前.comでドメインを取得している場合で書いているため、お名前.comではない方はご注意ください。
1.まずはじめに、こちらから所有しているドメインを打ち込みましょう！
https://app.netlify.com/account/dns/setup
2.次のDNSレコードの設定は放置します。
3.お名前.com側のネームサーバを設定します。
Netlifyから以下の４つをネームサーバ変更してくださいと言われるため、お名前.comのネームサーバを変更します。
このように、お名前.comのネームサーバの変更から設定します。
4.Netlify側でDNSレコードを作成します。
Settings > Domain ManagementからDNSの設定ページを開きます。
Check DNS configurationをクリックするとモーダルが出るので、Create DNS Recordsを押してDNSレコードを生成しましょう。
生成後は以下のようにDNSレコードが増えていると思います。
これで設定は終わりです。
3. Secure your site with HTTPS
ボタン押せばLet's EncriptでHTTPSの設定をしてくれます。めちゃ簡単ですね。
デプロイしたアプリを確認
設定したドメインにアクセスすると、無事デプロイされていると思います。
