Aiki x Developer

gatsby

Gatsby Cloud Hostingリリースで、開発、ビルド、ホスティング全てがGatsbyで出来るようになった

March 17th, 2021

gatsby-cloud-hosting

どうもー、ドイツでフリーランスのフルスタックエンジニアと、オーダーメイド感覚プログラミング学習サービス「Lilac(ライレック)」の開発、講師、運営をしています、Arisaです。

少し時間が経ってしまいましたが、2週間前にあったGatsbyConf 2021で登壇した際に、登壇トークのハイライトとして、Gatsby v3.0からの新機能、Gatsby Cloud HostingのDX(Developer Experience)についてお話をしてきました。

今やGatsbyでプロジェクトを開発してまえば、開発、ビルド、ホスティングまでできてしまう、フレームワークの領域を越えちゃっているGatsby。

Gatsbyのプロジェクト開発をこれから新しくするのであれば、どのホスティングサービスにしようか選定しなくても、Gatsby Cloudアカウントさえあればホスティングもあっという間にできてしまいます。

すごく手軽で、一般的な用途であれば無料でホスティングまでできてしまうGatsby Cloudにデフォルトで搭載されたGatsby Cloud Hosting、非常に簡単な設定でセットアップできてしまうので、日本語でもまとめておきたいと思います。

どんな人に向けた記事?

Gatsbyプロジェクトを、これから新しく開発しようとしている方全員ですね。

前の環境

このブログも、時間ができたらv3に移行しようと思ってます。

(現在の最新はv3.1、2週間ですぐにContentfulと相性の良い画像処理のバージョンをリリースしてて、仕事が早い)

なので、現状はまだv2なので、そこはあしからず。

  • フロントエンド&クエリ: Gatsby.js

  • CMS: Contentful

  • ホスティング: Netlify

Netlifyもすごく好きですが、ちょうどGatsbyから声がかかった時のタイミングで、次のドメイン更新の時期だったんですよね。

だから、オファーもあったしでこの機会に変えました。

その他の環境はこちら👇

aiki-dev-env

手順の流れ

Gatsby Cloudの設定と、Gatsby Cloud Hosting用の設定で行うものが、全部で3つあります。

1. Gatsby Cloudの設定

Step 1.

まず、 `gatsby-plugin-gatsby-cloud` がインストールされていなければ、インストール。

事前にしておく必要があります。

Step 2.

`gatsby-config.js` ファイルを、公式ドキュメントに沿って書く。

https://www.gatsbyjs.com/plugins/gatsby-plugin-gatsby-cloud/

Step 3.

使っているCMSがあれば、Gatsby Cloudで自動CMSインテグレーションしてくれる種類のものかをチェック。

  • Contentful 👈 この記事ではContentfulで話を進めます

  • Cosmic

  • Dato CMS

  • Sanity.io

これ以外のCMSは自動インテグレーションはないけど、以下のものは、なくても設定を行えば可能。

  • Contentstack

  • Drupal

  • Strapi

Gatsby.js: CMS integrations

Step 4.

Gatsby Cloudにサインイン。

Step 5.

"Create new site" もしくは "Add a site" を選択。

add-a-site-gatsby

Step 6.

"Import from a Git repository" を選択。

import-from-a-git-repository-gatsby

Step 7.

GitHubか、GItLabか、どちらかを選ぶ。今回はGitHubで話を進めます。

select-git-provider-gatsby

Step 8.

"Select destination"を選択。

select-destination-gatsby

Step 9.

上記で選んだGitプロバイダーで、Gatsby Cloudを導入。

install-gatsby-cloud1install-gatsby-cloud2

Step 10.

ホスティングしたいプロジェクトがあるGitHub Organizationとリポジトリを選択。

github-organization-gatsby

Step 11.

紐付けしたいブランチ、ディレクトリ、サイトの名前をセットアップ。

setup-gatsby

Step 12.

CMSを選択(表示されるのは、自動インテグレーションされるCMSのみ)

cms-integration-gatsby

Step 13.

認証する。

Step 14.

Contentfulにサインインし、認証する。

authorize-contentful-gatsby

Step 15.

"Set up your site"を選択。

Step 16.

必要な環境変数やキーがあれば記述。(Google Analyticsのキーなど)

Step 17.

"Create your site"を選択。

Step 18.

デプロイされるまでちょっとだけ待つ。

Step 19.

終わり🙌

deployed-gatsby-cloud

プレビュー用のURLで確認ができます。

ここまでがGatsby Cloudで必要なセットアップ。

2. Gatsby Cloud Hostingのセットアップ

Step 1.

"Hosting"の項目が左サイドバーメニューにあるので、選択。

"Deploy to Gatsby Hosting"の項目を"Turn on"をクリックして有効化する。

enable-hosting-gatsby

Step 2.

自動でHTTPSのデフォルトドメインが生成される。

https-gatsby

3. カスタムドメインのセットアップ

Step 1.

私の場合、既に稼働しているDNSがあって、それを引越しして紐づけたかったので、その場合の話をします。

その場合は外部DNSマネジャーを使います(CNAME)

この辺りがお勧めされてました👇

  • Name.com 今回採用したので、以降、Name.comで話を進めます

  • Go Daddy

  • Name Cheap

  • Google Domains (ドイツはまだ使えなかった...残念)

Step 2.

Netlifyでドメインも購入してて、そこからの引越しであれば、Name.comが良いです。

Netlify自体の公式ドキュメントで、DNS引越しの際にお勧めされてるので。

  • Name.comのアカウント作成

  • ICANN(organization managers DNS)は、DNS引越し作業前に、こちらの連絡先情報の承認が必要

  • "Settings" → "Default Account Contacts"

  • 連絡先の情報が正しいかチェック

  • "Update"を選択

  • 承認

  • Netlifyサポートにコンタクトを取って、DNS引越しの旨と合わせて、Name.comのアカウントコードを伝える(現状はこの方法しかない)

  • 終わり!

Step 3.

Gatsby Cloudダッシュボードに戻って、"Add domain"を選択。

add-domain-gatsby

Step 4.

`https://` 部分を省略したドメインを記入(apex domain)

apex-domain-gatsby

Step 5.

Name.comの設定では、Name.comのデフォルトnameserversを使用する。

(これをしていないと、どのみちName.comからアラートが飛ぶ)

Name.com: Using Name.com's nameserver

  • "MY DOMAINS"

  • 自分のドメイン名をクリック

  • "Manage Nameservers"を選択

  • "Default Nameservers"を選択

  • "Save Changes"で保存

nameservers-gatsby

Step 6.

AレコードをName.comに追加。

Name.com: Adding an A Record

Step 7.

サブドメインを追加するのであればCNAMEを追加。

Step 8.

"CHeck status"をクリック。

check-status-gatsby

💡: Netlifyでnameserverを削除して、DNSとドメインもNetlifyの方では削除をする

Step 9.

生成されるのを待つ。

dns-generate-gatsby

Step 10.

終わり✨

done-gatsby

まとめ

GatsbyConfの登壇内容では、与えられた時間の15分を大幅にオーバーしてしまっていたので、この内容はその代わりにこうして記事で書いて補いました。

実際の登壇内容は、Gatsby公式YouTubeに英語字幕版は公開されていて、日本語字幕版はGatsbyの許可を得て、私のYouTubeチャンネルにて公開しています。

もし良ければ見てみてください。

Finding My Developer Happy Path with Gatsby x Contentful with Arisa Fukuzaki

GatsbyConf 2021 [日本語字幕] Finding My Developer Happy Path with Gatsby x Contentful with Arisa Fukuzaki

あと、多分まだ開催してるとは思うんですが、今Gatsby CLoud Hostingを利用してくれた人たちに、Gatsbyの公式ストアアイテムのクーポン$15をくれるらしいです🙌

$15あればTシャツとかはタダでもらえちゃいました(ステッカーも無料でついてきます😎)

新しくGatsbyプロジェクトでホスティングを考えている方は、この企画に乗っかってみるといいかもですね👍

(念のためですが、私はGatsbyからスポンサーされているわけでもなんでもないです 笑 単純にGatsby愛が強くて推してるだけなので、裏事情はないです 笑)

では

ちゅーす