Netlify, Netlify CMSを使って、 サイトをリリースする(お勉強編)
見出し画像

Netlify, Netlify CMSを使って、 サイトをリリースする(お勉強編)

資料作成のきっかけ

Web制作の案件の中で、いつもご相談させて頂いた方から、Wordpressではなく、静的ホスティングサービスを使って、構築したらいいとアドバイスを頂きました。
その時の案件では、納期が非常にタイトだったため、あとはhtml, cssを書くだけ、という段階(環境構築からアウトライン)まで、かなりサポートして頂き、リリースしました。
モダンなやり方に触れたけど、何が何だか分からず、終わってしまったので、ここで簡単にまとめようと思いました。

誰に向けて書いてるのか

普段Wordpressを使ってるけど、近々、静的サイトホスティングサービス(ヘッドレスCMS)使って、構築しようと思っている方

誰が書いてるのか

著者は、特段、技術に詳しいとかもなく、日常的にはwebのフロントを書いてる程度で、バックエンドとかは全然分かってないです。
そのため、技術者の方からすると、必要な情報が記載されてない、情報が語弊があるように載ってしまっている、と思われるかもしれません。
その場合は、ぜひコメント頂きたいです。

資料の目的

【今回】
静的サイトホスティングサービスを利用するために、出てくる用語や概念の理解

【次回】
具体的なコードを提示しつつ、簡単なサイトをリリースまでのロードマップ

【注意点】
著者の事情になるのですが、直近リリースしたサイト(※)をNetlify, Netlify CMS, Next.js, Reactを使って構築したため、最終的な着地として、それらを利用し、リリースするまでを取り上げます。(復習のため)
他のサービスや言語を使う場合や、どのサービスを使うべきかの検討されてる場合は、比較サイト等をご覧頂けたらと思います。(いつかサービス間比較はします)

※リリースしたサイト:札幌どうぶつ専門学校様

全体像

スクリーンショット 2021-06-27 14.52.53

(枠下の列挙はサービス名です)

もはや、ここすらも理解してなかったのです笑
誤解①:トレンドの静的サイトのホスティングサービスとヘッドレスCMSはセット(NetlifyにCMSのサービスがあったので全部そうだと思ってました笑)
誤解②:静的サイトジェネレーターとJavascriptのフレームワークの組み合わせは常に一緒(区別がついてなかった)

参考元:Static Website Services

問い

静的サイトホスティングとは?
静的サイトジェネレーターって何?
JavaScripフレームワークは何がある?
ヘッドレスCMSとは?
諸々、メリット、デメリットは?

概要

概要の目次
・静的ホスティングとは?
・静的サイトジェネレーターとは?
・ヘッドレスCMSとは?
・Netlifyの特徴
・Netlify CMSの特徴

静的ホスティングとは?
静的サイトホスティングとは、HTML,CSS,JavaScript,画像ファイルをストレージにあげて、そのストレージのみでページを表示する事です。個人ブログはこの静的サイトホスティングのみで十分公開できます。
逆に、動的サイトというのは、バックエンドにサーバとDBがありまして、サーバでデータを計算したり、 DBにデータを保存したりします。例えばユーザ登録機能があるFacebookのようなサイトですね。

静的サイトホスティングは、昔からある話で、wordpressのような動的なサイトを経て、またトレンドになっている感じです。

引用元:静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想
【静的サイトホスティングサービスの特徴】
・表示速度が速い、ファイルを返すだけなので応答が早い
・アクセスの負荷に強い
・サーバー費用を抑えることができる
・セキュリティ対策が簡単
・バックアップが簡単
・フロントエンドの技術で作れる

参考元:8 Best Static Website Hosting for Business and Personal Use
【静的サイトジェネレーター(SSG)とは①】
WebサイトのHTMLファイルを生成するツールのこと。
Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものでした。
それに対し静的サイトジェネレーターは、コンパイル時にGraphQLやAPIからすべてのデータを取得し全てのHTMLを最初に生成します。
さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっています。

引用元:Qiita 静的サイトジェネレーター Gatsby | 静的サイトジェネレーターとは?
【静的サイトジェネレーター(SSG)とは②】
最新の静的サイトジェネレーターには、大きく分けて 2 つのタイプがあります。

従来の静的サイトジェネレーターは、サイトのフロントエンドの構築方法を規定していません。単に HTML、CSS、JavaScript アセットを生成することであり、それらの構築方法を指示することではありません。

もう 1 つのタイプの静的サイト ジェネレーターは、React、Vue、Angular などの JavaScript フレームワークを使用して構築されます。このような場合でも、SSG は静的アセットを生成しますが、
それらは規定のフロントエンドフレームワークを使用し、ビルド時にコンテンツを生成するか、典型的なシングルページアプリケーション (SPA) のように実行時にクライアント側でロードします。

引用元:Choosing the Best Static Site Generator for 2021
【ヘッドレスCMS①】
従来のCMSはコンテンツを入稿する「システム」とコンテンツを表示する「ビュー」が合わさったものでした。ヘッドレスの「ヘッド」とは、「ビュー」を指します。「ヘッドレス」なので、ビューの無いCMSということになります。内容を管理するバックエンドの機能だけを持ち、見た目を決めるテーマやCSSなどは持たないCMSがヘッドレスCMSです。

引用元: 2021年版 話題のヘッドレスCMS10選

画像2

【ヘッドレスCMS②】
CMSによってデザインやレイアウトが固定されないことで、フロントエンドの自由度が格段に高くなります。
たとえば、企業サイトで「新着情報」のみをブログのように管理し、「企業概要」や「サービス」といったページは頻繁には更新しないケースがあるとします。Wordpressでは、更新のないものも全て「固定ページ」としてWordpress上で管理する必要がありました。

ヘッドレスCMSなら、必要なところだけでCMSを使い、他のページはCMSの制約なく制作することが可能です。これによって、プラットフォームや技術も自由自在です。
ヘッドレスCMSでは、PC向け、スマホ向け、アプリ向けのビューをそれぞれの技術で開発可能です。また、フロントエンドとバックエンドが分離していることで、それぞれの開発や、アクセス負荷への対応も個別に行えるため、効率の向上も期待できます。

引用元: 2021年版 話題のヘッドレスCMS10選
【Netlifyの特徴】
・無料で利用できる
・独自ドメインを利用可能
・CDN で高速配信
・https に対応
・静的サイトジェネレーターのビルドコマンドに対応
・GitHub のプレイベートリポジトリのサイトを公開できる
・Netlify Form で簡単にお問い合わせフォームが作成可能
・Git のブランチごとにテスト
・Webhooks に対応

引用元:NetlifyとGithubを連携させ、サイトのアップロード作業を自動化する方法
【Netlify CMSの特徴】
・Webサイト構築がスピーディーにできる
・複数人でサイト管理ができる
・無料で使える
・UIデザインがシンプルで使い勝手がよい
・Netlifyと連動すればとても効率的に使える
・Markdown記法に対応している

引用元:ferret Netlify CMSってどんなサービス?静的サイト構築の強い味方

用語集

よく出てくる単語だけど、個人的に知らなかったものをまとめてます。
・CDN
・CIツール連携
・SSR(サーバーサイドレンダリング)
・SPA(シングルページアプリケーション)
・Jamstack

CDN
CDNとは「Content Delivery Network(コンテンツデリバリーネットワーク)」の略で、ウェブコンテンツを効率的かつスピーディーに配信できるように工夫されたネットワークのことです。
ウェブコンテンツを配信するのはオリジンサーバーだけではありません。オリジンサーバーからウェブコンテンツのコピーを取得した複数の「キャッシュサーバー」が、オリジンサーバーの代理でウェブコンテンツを配信します。オリジンサーバーの負荷を分散することで、効率なウェブコンテンツ配信を実現するわけです。

引用元:カゴヤのサーバー研究室 【図解】CDNとは?仕組みと技術の基礎知識
CIツール連携①
CI(継続的インテグレーション)では、開発者が自分のコード変更を頻繁にセントラルリポジトリにマージし、その度に自動化されたビルドとテストを実行します。
小さなサイクルでインテグレーションを繰り返し行い、インテグレーションのエラーを素早く修正することによりチームは統合されたソフトウェアをより迅速に開発できるようになります。

引用元: CI(継続的インテグレーション)とは?
【CIツール連携②】
CIツール導入以前は、開発者は長期間にわたって独立して作業し、自分の作業が完了したあと初めて、変更点をマスターブランチにマージしていました。このような開発プロセスでは、累積したコード変更をマージする作業は困難で時間のかかるものでした。また、バグが発生した場合も複数の変更が混在するため、影響範囲も広く特定と修正にかかるコストが大きくなってしまいます。
リードタイムを短縮するために、CIツールがあります。CIツールを導入し、ビルドパイプラインは最初は小さな単位でビルドと検証を行いながら、フェーズが進みにつれて大きな単位での検証が行われるように設計します。
そうすることで、エラーフィードバックが早くなり、影響範囲の小さなうちに修正されるようなプロセスとなります。

引用元: CI(継続的インテグレーション)とは?
【SSR(サーバーサイドレンダリング)】
本来JavaScriptで行う画面の書き換え処理などをサーバー側で実行させて、ユーザーの待機時間を短くすること

PHPなどを使ってwebアプリケーションを作成した場合もSSRではあるが、あえて「SSR」と呼ぶときは、上記のようにJavaScriptと対比させて表現することが多い。

引用元:SSG と SSR で理解する Next.js のページレンダリング
【SPA(シングルページアプリケーション)とは】
SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。
ブラウザ側でできる処理はJavaScriptで終わらせることで、サーバとの通信量を最低限に抑えることが可能です。
SPAを用いた有名な事例:Facebook、Google Map

引用元:シングルページアプリケーション(SPA)の導入メリット&デメリット
【SPA(シングルページアプリケーション)のメリット・デメリット】
メリット

・動作性の向上
・より高度なWeb表現
・ネイティブアプリの代用
・単一のWebページでコンテンツ切り替えを行うことで、ページ遷移の必要がなく、ブラウザの挙動に縛られないWeb表現を可能にするのです。

デメリット

・実装コストが大幅に増える。
・初期ローディングにかかる時間が増える。
・開発者が少ない。

引用元:シングルページアプリケーション(SPA)の導入メリット&デメリット
【Jamstack】
JamstackのJamはJavaScript/APIs/Markupの頭文字です
JavaScriptでAPIをたたいてMarkupを配信することを意味しています
Jamstackの特徴としてパフォーマンスの高さとセキュリティの高さがうたわれています

引用元:Qiita | Jamstackって何なの?何がいいの?

Appendix

公式ドキュメントまとめ
Netlifyのドキュメント
Next on Netlify(Next.jsで、Netlifyを構築する)
Next.jsをゼロから学ぶ
Reactのチュートリアル
【参考サイト】
これだけで「静的サイトジェネレーター」のすべてがわかります
angular vs react vs vue vs svelte vs alpinejs | npm trends(下記の画像1)
5 Skills All Front-End Developers Need to Learn in 2021(下記の画像2)
【画像1】
React使った理由にもなるんだけど、圧倒的に世界で使われていて、エラー対処とか調べたら、めちゃ出てくる

画像3

【画像2】
ここで取り上げたスキルは、2021年に学べきスキルとして、Mediumで取り上げれてました。

画像4


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
わっさ!
合同会社LMS 代表 / 神戸大学卒業 / 札幌出身 https://last-man-standing.jp/