strapiでブログを作る①(完成イメージ)

strapiでブログを作る際にどのような流れで作って、最終的にどのようになるかを説明します。

Programming
Kuriya Ushiki
Kuriya Ushiki
投稿日 5/11/2024
更新日 5/13/2024

なぜstrapiを選んだのか

以前記事にした今までのブログ遍歴も一読してほしいですが、色々な方法でブログを作っていたのですが、今回はヘッドレスCMSなブログを作ろうと考えました。
ヘッドレスCMSにもCaaS型とSelf-Hosted型があります。
CaaS型: 運用会社がサーバーやデータベースを提供しているタイプのヘッドレスCMS
Self-Hosted型: 自前で用意したサーバーやデータベースにヘッドレスCMSを設置し、使用する形態
   私は極力どこかの会社に依存したくなかったのでSelf-Hosted型に絞って探しました。   フロント部分はNUXT3で作ろうと思っていたので専用のnuxt3専用のcms modulesが用意されていると良いと思っていたところ、strapiには用意されていたのでstrapiに決めました。 他に気になったCMS以下になります。

  • directus
    strapiがスキーマ情報はfileを生成して管理するのに対してdirectusは全てをDBで行うそう。機能的には場所情報やカレンダーのUIがあったりしてstrapiよりもリッチな印象。directus用のnuxt3 modulesも用意されていた。
    しかし日本ではあまり浸透していないのか、日本語の記事が殆どなかった。
  • ghost
    エディターがリッチだった。
  • Decap CMS
    Gitベースということで多分以前に作ったVuePressと似たような感じだとは思うが、管理画面が用意されているということでVuePressでほしいと思っていた機能が備わっていて結構気になっている。strapiでは結局ランディングコストが結構かかってきてしまいそうなので、それを考えるとこちらへの移行も検討したい。

strapiの運用

strapiでは、SSG (Static Site Generation) として使うこともできるようだが、そうすると記事を更新するたびにビルドする必要がありそうで、今回はヘッドレスCMSとしてstrapiをつかうこととする。

今回strapiを使って作る管理画面、API部分をバックエンドとし、そのAPIを使ってユーザーが見るブログの部分をフロントエンドとして話します。

構成

バックエンドの構成

サーバー
heroku - dynos (Basic plan)
費用 (上限 $7/月) (Heroku の価格)

データベース
heroku - postgres
費用 約$0.007/時間(上限 $5/月) (Heroku の価格)

最大$12なので今の$1が155.78 円なので1869.42円となると結構高い。たかが個人ブログにこの金額は結構高い。年間だと22433円もしてしまう。以前herokuは無料だったから、有料になったとはいえ良心的な価格設定に抑えてくれていると思っていたのに...
しかも日本のリージョンを使いたい場合はHeroku Enterpriseにならなくてはならず、そうでない場合はアメリカ(US)かヨーロッパ(EU)しか選ばべなかったです。

それでもなぜHerokuを選んだかというとstrapiのドキュメントの[strapi - Hosting Provider Guides] (https://docs.strapi.io/dev-docs/deployment/hosting-guides)に

  • AWS
  • Azure
  • DigitalOcean
  • Heroku
  • Strapi Cloud のホスティングの方法が記載されていたので、こちらのプロバイダーが推奨されているのでこちらから選ぼうと思った次第でした。
    この中ではHerokuが一番安そうで、使ったこともあったのでHerokuを選択しました。

フロントエンドの構成

ドメイン Cloudflare Registrar
protagram.comというドメインを取得し
管理画面用の
admin.protagram.com
オブジェクトストレージ用の
storage.protagram.com
というサブドメインも作っています。
費用は年間で**$9.77**でした。

サーバー
cloudflare pages
ここにnuxt3で作ったフロント側のコードをデプロイします。

オブジェクトストレージ
cloudflareのr2
r2はS3互換のオブジェクトストレージなのでawsのS3でも良かったのですが、S3よりも安く、一定の容量までは永年無料な点でこちらを選びました。
また極力少ないプロバイダーで完結したいのでr2があって助かりました。

参考サイト