microCMSで管理者サーバーとバックエンドサーバーを無料構築！
この記事の文字数は、5,970 文字です。
「たかがブログサイト作るのに管理者サーバーやバックエンドサーバーも構築しなければならないなんて…」 安心してください。それ、作らなくて良いですよ。 外部のサービスを利用すれば、サイト上で設定するだけでサーバーが使えます。 「でもお高いんでしょ？」 いいえ、無料で使えます。
目次
この記事はLCL Advent Calendar 2020 - 5日目の記事です。
こんにちは。ナオツです。
前回はとてもやっかいな話になってしまいました。 フロントエンドサーバーが公開用と管理者用に分割されてしまったからです。
「え、、2個もサイト作るの？？」 「おまけにバックエンドサーバーにDBサーバーのセットアップもやる？」
「実にめんどい・・・orz」
だれもがそう思ったことでしょう。
現在、ブログサイトを構築する上で必要なサーバーをまとめると、下記の4種があります。
- 公開用フロントエンドサーバー
- 管理者用フロントエンドサーバー
- バックエンドサーバー
- データベースサーバー
今日ご紹介するのは、
- 管理者用フロントエンドサーバー
- バックエンドサーバー
- データベースサーバー
は 自分で作らなくて良い という話です。
「な？な？どゆこと？」
どういうことかといいますと、これら 3つのサーバーがすでに用意されているサービス があるんですね。
それが今回ご紹介する、 microCMSという日本のサービスです。
例えば、こんな使いやすい管理者用の画面が最初から使えます。
ですので、Next.jsとVercelで新しく管理者用にフロントエンドサーバーを作る必要はありません。
さらにバックエンドサーバーも管理画面の設定から簡単に構築することができます。
しかも・・・
無料で利用できるプランあります。
至れり尽くせりですね！
このサービスを使って省エネしながら、お財布にも優しくブログサイトを作っていきましょう。
microCMSとは
microCMSはAPIベースのヘッドレスCMSです。 公式サイトはこちら
日本の企業がサービスを公開してます。 当然ドキュメントは日本語ですし、問い合わせも日本語で出来ます。 こういうところって結構ありがたいですよね。
その前にCMSとは
CMSとは、 Contents Management Serviceの略です。
直訳するとコンテンツ管理サービスですね。
とくにブログに限った話でもないのですが、 ブログのようなシンプルなコンテンツデータの管理をやってくれるサービスです。
MySQLやPostgreSQLのようなデータベースソフトウェアで管理するデータの構造は、複雑なものもあります。
しかし、ブログのような記事データは単純なデータ構造のものが多いので、それらのソフトウェアではややリッチな使い道になってしまいます。
そこで単純なデータ管理は、自前でデータベースサーバーを持つのではなくCMSを利用して、 より簡単に管理しましょう ということですね。
CMSは簡単にいうと、単純なデータ構造のデータに特化した管理サービスということですね。
それではmicroCMSの、
- 管理者サーバーとしての役割
- バックエンドサーバーとしての役割
- データベースサーバーとしての役割
を見ていきましょう。
管理者サーバーとしての役割
microCMSは許可されたアカウントのユーザーのみ、管理画面にアクセスできます。 僕のアカウントで入ったこのブログサイト（Easy Life Tips）の管理画面でご説明します。
C: Create (記事を新規作成)
「＋追加」ボタンから、記事の新規作成ができます。
R: Read (記事を読み取る)
登録した記事の一覧が取得できます。
U: Update (前の記事を更新)
登録した記事の一覧から記事を選べば、編集ができます。
D: Delete (登録した記事を削除)
上部のメニューから記事の削除ができます。
その他
そのほかにも、
- 下書き状態で記事を作成
- 予約投稿（時間を指定して記事を投稿する）
- 複製（コピー）
- 公開した記事を下書きに戻す
などなど。 ブログ記事を管理する上で便利な機能が標準で利用できます。
バックエンドサーバーとしての役割
このバックエンドサーバーとは、公開用フロントエンドサーバーからアクセスされるという位置づけです。
R: Read (記事を読み取る)
記事を1件取得する際は、下記のようなurlを実行して（API経由で）、JSONデータとして記事情報を取得できます。
APIとは
ここで API という単語がいきなり出てきましたので、簡単に説明します。
APIとは Application Programming Interface (アプリケーション・プログラミング・インタフェース) の略です。
なんのこっちゃ？という話ですね。ｗ
IT業界はアルファベット3文字で略すことが多いので、慣れていきましょう。
これは、 そのままでは使えないから、あなたのプログラミングの中で実装に組み込んでね
という話です。
実際には下記の記事で紹介したNext.jsの中でAPIを実装していきます。
具体的には、
- microCMSのAPIを実行して記事情報をjsonで取得
- jsonデータからHTMLを構築していく
という手順でフロントエンドサーバーに実装していきます。
画面の設定でRead以外は許可しない
前回の記事で、公開サーバーから記事の更新ができないようにする必要がありました。 できるのは「R: Read（記事を読み取る）」だけでしたよね？
この設定もmicroCMSの管理画面から簡単に行うことができます。
HTTPメソッドとCRUDとの関係は下記の通りです。
- GET: Read（記事を読み取る）
- POST: Create（記事を新規作成）
- PUT: Update（記事を新しく置き換えて更新）
- PATCH: Update（記事の一部分だけ更新）
- DELETE: Delete（登録した記事を削除）
データベースサーバーとしての役割
microCMSでデータ操作の基本である、CRUDについてみてみましょう。
microCMSにはデータベースが存在していますが、管理者がそれを目にすることはありません。 データベースそのものはmicroCMSから隠ぺいされています。
これは当然ですね。
microCMSを利用しているのは僕だけではありません。 たくさんのユーザーが利用しています。
これでデータベースを公開してしまうと、他のユーザーのデータも見れてしまいます。 データの漏洩問題になってしまいますね。
ただ、僕らが使いたいのは「自分のデータだけ登録・参照・更新・削除」できれば良いです。 それさえできれば、ブログサイトは構築できるはずですよね？
おさらいです。
- C: Create（記事を新規作成）
- R: Read（記事を読み取る）
- U: Update（前の記事を更新）
- D: Delete（登録した記事を削除）
これらの操作は、今までの説明（管理者サーバーとしての役割、バックエンドサーバーとしての役割）の中で完全に利用できることがわかると思います。
料金プランはいろいろ
microCMSには現時点では下記のプランが用意されていますので、簡単に説明します。 料金プランについて詳しくはこちら
Hobby
無料のプランです。 ブログサイトを一人で運営していく用途であれば、このプランで十分です。 ただ、容量の制限などがありますので、記事の数が多くなったり、複数の人間で管理するようになったら下記の有料プランを視野に入れましょう。
Standard
スタートアップ企業が使っていくようなイメージですかね。 APIの数はHobbyと一緒ですが、転送量が倍になり、メンバー数が3人まで使えます。 WRITEのリクエスト（Create,Update,Delete）が3000回まで増えています。 更新頻度高めのプランですね。
Business
転送量、メンバー数、API数がかなりたくさん利用できます。 大きめの企業や動画などの大きなデータを扱うような場合に有効なプランです。
Enterprise
それでも足りない！ という方はこちらのプランで、好きにカスタマイズしていきましょう。 カスタマイズ内容を加味して料金が決まっていくプランです。
まとめ
いかがだったでしょうか？
- 公開用フロントエンドサーバー
- 管理者用フロントエンドサーバー
- バックエンドサーバー
- データベースサーバー
このうち、以前の記事では、Next.js×Vercelの組み合わせで「1. 公開用フロントエンドサーバー」が無料で構築することができることをご紹介しました。
今回は残りの、
- 管理者用フロントエンドサーバー
- バックエンドサーバー
- データベースサーバー
がmicroCMSというサービスを使って無料で構築できる、というお話でした。
はい、これでブログサイトを無料で構築できることがわかりましたね。
実際にはドメインの購入だけお金がかかります。
ドメインとは？ 〇〇.comみたいなURLの名称です。 このサイトだと「easy-life-tips.com」という部分ですね。
1年間の契約で1,500円弱 でした。
1年間1500円で運用できる自分だけのブログサイトなんて夢がありませんか？
自由に広告も貼れますし、好きなレイアウトに実装すれば自分だけのサイトが出来上がります。
今後は、このサイトの作り方に関してかなり細かく説明していきます。
- Figmaを使ったWebデザイン
- フロントエンドのモックサイト作成
- microCMSとの繋ぎこみ
- Vercelのデプロイ設定
- ドメインの設定
- SEOについての内部対策
これらをこと細かく説明していく予定ですので、駆け出しエンジニアの方は教科書がわりにして勉強してみてくださいね。
