2020-10-02

Gatsby.jsでWEBサイト立ち上げるためにやったことメモ

Thumbnail

今回の WEB サイト立ち上げに関しての技術的背景・検討事項や実際に行ったアクションのログです。

令和時代の WEB サイトホスティング

歴史

WEB サイトのホスティングはかつて html ベタ書きに始まり、
ホームページビルダーや DreamWeaver でデザイナーが視覚的に触れるものが登場し、 WordPress や、MovableType などの「CMS(Contents Management System)」による WEB サイト管理が一般的になりました。

そして今は Squarespace やら Wix やら、ブラウザベースで動く誰でも作れる系サービスがまた流行っているようにも見えます。
そもそも SNS である程度ページは賄えるので、自分たちでホームページを持たない、という選択肢も増えてきましたよね。
個人経営の飲食店さんなんかは SNS + 食べログ/ぐるなび みたいなのがほとんどです。

結局 WordPress はカスタマイズするには php の知識が必要になったり、逆にイジるのが難しいところがあるので、そんな普及しないかな、と思っていたところ、実際は皆さんよく知るように驚くほど覇権を握りました。

URL にwp-contentって入ってる WEB サイトの多きこと… そこまであからさまにならないよう隠してある WEB サイトも、実は wordpress で管理している、みたいなことが往々にしてあります。

なんにしても、WordPress のある種の功績は 「CMS」 という言葉を一般的にしたことだと思っています。 コンテンツ制作側と技術者側を切り分けるということに「成功」したんです。ここでいう成功は、技術的にどうこう、というのもありますが、UI 的にもわかりやすかった、というところでの成功です。そのカスタマイズ性の高さもポイントなのではないでしょうか。

今からサイトを立ち上げるなら?

最近のトレンドは、CMS とフロントを切り分ける事にあると思います。

CMS はあくまでコンテンツを管理するだけで、画面には一切関与しません。 フロント側は、CMS から受け取ったコンテンツをもとに描画します。

フロントを持たない CMS を Headless CMS と呼んだりします。
一番有名なのは、Contentfulでしょう。
日本製のものでは、microCMS があります。せっかくの日本製サービスですし、個人的にはめちゃくちゃ応援しています。

この WEB サイトは私しか書かない想定なので、CMS は使っていませんが、使うとしたら microCMS かなと思っています

JAMSTACK

上の内容をより一般的にした、JAMSTACK というのがあります。
JAM は、JavaScript + APIs + Markup です。

公式ホームページ にはこう書いてあります。

Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

WEB サーバの稼働・管理をやめて、CDN で事前にレンダリングしたファイルを配信して高速かつセキュアにウェブサイトをホスティングしましょう ということです

これについては以下の Qiita 記事がめっちゃまとまってます。
Jamstack って何なの?何がいいの?

手短に!と言われたら、要するに、こうです。 CMS からコンテンツ内容を取り寄せて、それをもとに静的サイトを生成して、それをストレージサービスにホスティング → 配信。

WordPress なんかは、ユーザがアクセスするタイミングでデータを取り寄せて中身を描画するわけですが、それは行いません。描画したあとのものをコンテンツ更新時に作ってそれを配るんです。 そうすれば、悪意のあるユーザから攻撃を受ける余地もなくなるし、配信は高速になるし最高やん。と

この静的サイトを作るのが静的サイトジェネレータ(SSG)です。

SSG 比較

静的サイトジェネレータ

前置きが長くなりましたが、特にインタラクティブな要素の発生しない WEB サイトは SSG(Static Site Generator)+CMS でホスティングするのが現状では定石だと思います。

もちろん SSG もいろいろあります。
勢い等は、下記サイトが参考になります。
https://www.staticgen.com/

現状だと、下記が候補に挙がってくると思います。

  • Gatsby.js (React ベース)
  • Next.js (React ベース)
  • Nuxt.js (Vue ベース)

1 年前くらいは下記も勢いがあったようにおもいますが、ちょっと失速気味?かもです。。

  • Hugo (Go ベース)
  • Jekyll (Ruby ベース)

Ruby はちょっと失速気味なのと、Go は玄人好みなのとで、でしょうかね。 逆に Next.js は勢いを増しているように思います。ある程度スキルのある人であれば、とてもカスタマイズしやすそうです。

今回の選定

私はというと、Nuxt.js は普段から色々な場面で使ってみたりしていてノウハウがあったのですが、折角新しいサイトを自分用という何があってもそんなに問題にならないところで立ち上げるので、このサイトは Gatsby.js にて構築しています。

デザイン周りは、React なので、 material-ui も使いながらやっていっているという感じですね。テンプレートとかは一番ベーシックな、ほぼ中身のないやつを選んで、適当にカスタマイズしてみました。

しかし、Next.js も拡張性の高さを考えるとかなり捨てがたいです。もちろん、Nuxt.js も使いやすいですし。
より具体的な比較記事も、いつか出したいと思っています。

ホスティング場所問題

ホスティング場所候補

一方でちょっと悩んだのがホスティングです。昔であれば忍者ツールズとかジオシティーズですが…笑(分かる人にしか分からない)

ストレージサービス + CDN で考える必要があります。CDN(Contents Delivery Network)は最適化されたネットワーク上の世界中に散らされたコンテンツ配信用サーバです。

イマドキだと、3 大クラウドを踏まえて以下のあたりが候補に挙がってくるでしょうか。

  • AWS S3 + CloudFront
  • firebase Hosting
  • Azure Storage + Azure CDN
  • Netlify

これらであれば、ほぼノーコスト運用が可能かと思います。

今回使用しているホスティング環境

CDN としては Fastly を個人的にはかなり信用していますが、個人サイト想定ということで…

その他国内サービスもあるような気がしますが、ノーコストになるものを調べられていません。。

Netlify なんかは、GitHub と連携を取るだけで勝手に CI/CD まで含めて面倒見てくれる紳士っぷりです。 ただ、今回は速度を測って、firebase Hosting が一番速そうだったので firebase Hosting を採用することにしました。 HTTP2 に対応しているのも良い感じですね。

いつどこでご縁があるかわからないですし笑、あんまりネガティブなこと言うもんじゃないですが、CloudFront は単純に色々なサービスが乗っかりすぎてるせいか?ちょっと遅い気がします。Azure は Verizon の Premium CDN とか結構速い印象があります(これは逆に乗っからなさすぎてるのかも)。 でも速さに相当なこだわりがない限りは基本的にはオリジン(CDN が参照する元ファイルの場所)と親和性が高いサービスをチョイスするのが定石かなと思います。

CDN 周りは色々試した経験があって、それだけで一記事にしても面白いかなと思っています。

その他

デプロイ環境

デプロイは、Github Actions にて行っています。 ステージング環境と、本番環境(今見えているもの)を一応準備しています。個人サイトではいらないかもですが…

ドメイン買う

今回取得したドメイン(bantak.dev)は Google Domains で購入しました。(1,400 円+税)

結果的に firebase Hosting との親和性が高く、ドメイン検証の手間が省けて良い感じでした。

まとめ

イマドキの WEB サイトは Headless CMS + SSG で作るのがトレンドという話でした。

こういうのも、タイミングタイミングでトレンドを追っていかないと、一生 WordPress を使うことになるので気をつけないといけないですね。
※WordPress がダメだとは言ってません ← これ書いとかないと怒られそうなので一応笑

関係ないですが阿部寛さんのホームページはやっぱりすごいです。読み込み早すぎる。 全部べた書きのほうがやっぱりいいんじゃないか。欲しい情報すぐ手に入るし…と思いながらとりあえず新しく立ち上げました。。

管理者

Takuya Ban
Takuya Ban

何でも系エンジニアです。

qiita

新着記事

BigQueryに限らずSQL関連の謎エラーはだいたいこういう凡ミスです。
Reactの2種類のコンポーネントについて、今から学ぶ人向けです。
もうすぐ5G対応iPhoneが出るけどそもそも5G使える場所がないのでは…
大阪都構想が告示されましたが…
モックとか作る上でのもはや必須ツールともいえるLorem Picsumの使い方メモです。

qiita

© 2020, Takuya Ban