自前のブログ作り① ー 技術選定

schedule Published
published_with_changes Updated
Category folderMake
format_list_bulleted Contents

過去にブログを作る気でドメインを取得してから5年近くが経過。。。
娘が生まれたのでブログでも始めたいと考えていたら、5年近く前からドメインだけを持っていたことを思い出しました。

今度こそ作ってやるぞと意気込んで、まずはGoogle先生に相談しながら技術選定をしました。Web業界で働いてはいるものの、エンジニアでもデザイナーでもないオジさんが、何となく作れそうだなという浅い知識での選定です。

本ページはプロモーションが含まれています

CMS(コンテンツマネジメントシステム)の選定

インフラの技術要素を決定するためにも、最初にCMSの選定をします。
MarkdownファイルからSSG(静的サイトジェネレーター)でページ生成なんて情報を見つけたが、ブログといえばCMSというオジさん脳が拒否反応を起こしたので華麗にスルーする。
溢れる娘への想いは1万記事ぐらいまでいきそうなので、記事管理のためにCMSは導入することに。

とはいえ、少しは時代についていきたいので、最近よく耳にする「HeadlessCMS(ヘッドレスCMS)」に目を付けました。(オジさんが知った時点で、すでに古い情報。)
ドメインを10年で購入しておきながら、これまでブログを作らず塩漬けにしているので、ここでHeadlessCMSにするかは躊躇したが、ここは若作りのため挑戦してみることにする。

HeadlessCMS(セルフホスティング型)から選定

HeadlessCMSもたくさん種類があり、クラウドサービス型が多い。
今回は自前の環境を用意するつもりなので、セルフホスティング型でオープンソースのHeadlessCMSに絞る。

  • Strapi(ストラピ)check_circle

    Node.jsで動作、REST API(公式プラグインで簡単にGraphQL対応可)。ミニマムな機能で、必要に応じてプラグインで機能追加していく感じらしい。

    https://strapi.io/open_in_new
  • Ghost(ゴースト)

    Node.jsで動作、REST API、有償でクラウドサービス型もあり、ブログに特化して開発されたらしい。

    https://ghost.org/open_in_new
  • Cockpit(コックピット)

    PHPで動作、REST API 、繰り返しフィールドなど機能が豊富らしい。

    https://getcockpit.com/open_in_new
  • Directus(ディレクタス)

    新バージョンはNode.jsで動作、REST APIとGraphQLどちらも可。SQLデータベースを管理、APIにラップするオープンデータプラットフォームと紹介しており、幅広いデータの管理に利用できるらしい。管理画面もかなり拡張できる。お仕事で使えそうな感じ。(phpMyAdminのようなDBクライアントの発展系のイメージ)

    https://directus.io/open_in_new
  • 番外:Jolojo

    まだリリースされてない。プロジェクトが存続しているか不明。 GOで動作、フロントでSvelteなど記載。「世界最速のCMS」と強烈な謳い文句があり、どんなものか気になるところ。

    https://www.jolojo.com/open_in_new

日本語のレビュー記事が多かったので、まずはStrapiをローカルのDocker環境で試す。試用感が良かったので、他は試すことなくStrapiに決定。
他にもっと良いものがあったかもしれないが、十分満足するものだったのでこれで良い。

次のステップはStrapi公式サイトで動作環境などを確認して、インフラの技術要素を調べる。
新バージョンがもうすぐらしいので、こちらもチェックはしておく。作ってる途中に新バージョンがリリースされないのを祈る。

ドメイン、ホスティングサービスの選定

ドメイン取得サービス

過去にお名前.comopen_in_new で取得済みなので、そのまま使う。
今回のブログの動機は過去の動機と違うので、ドメイン名も変えたいところだが、10年間で取得していた過去のやる気を尊重してそのまま使う。(まだ5年ちょっと残ってるから勿体ないだけ。。)

ホスティングサービス

スペックなどはレンタルサーバーでも十分そうだが、セルフホスティング型のHeadlessCMSが動作する環境はレンタルサーバーでは無さそう。
自由に環境構築できるVPSやクラウドサーバーを契約する必要がありそうなので、ホスティングサービスを少しだけ検討してみる。

  • AWS(アマゾン ウェブ サービス)

    EC2、S3、ELB、Multi-AZなど… 当たり前に耳にするようになったAWS用語。これを機に触ってみようと思ったが、誰も来ない個人ブログにとっては料金が高いので諦めた。
    アベイラビリティゾーンを口にすると、「おめぇ、あべえらぶるだなぁー」と、なぜか頭に孫悟空が思い浮かぶ。

    https://aws.amazon.com/jp/open_in_new
  • DigitalOcean(デジタルオーシャン)

    料金も低価格で、コミュニティの記事にもよくお世話になっている。さらにStrapiのワンクリック-インストールも用意されてる情報を見つけテンションが上がったが、今は問題があって使えないとのこと。ワンクリック-インストールの存在を知らなければ気にならなかったが、一度期待した後にダメだとわかると、英語のサービスで新しくアカウントから作るのも億劫に。。今回はタイミングが悪かったので、また次の機会にする。

    WARNING Please note that as of June 18th, 2021 we were made aware that there is a critical security issue when using DigitalOcean Managed databases with the DigitalOcean App platform. We do not currently recommend using this combination and if you require a managed database, you should use a DigitalOcean Droplet instead. More information can be found on the DigitalOcean forum threadopen_in_new and feature requestopen_in_new pages.

    2021.08.11 Strapi Developer Docs - DigitalOcean App Platformopen_in_new より引用

    WARNING The one-click install droplet is currently missing from DigitalOcean's marketplace. We are actively working with them on this issue and recommend you to use another installation method in the meantime.

    2021.08.11 Strapi Developer Docs - DigitalOcean One-clickopen_in_new より引用

    https://www.digitalocean.com/open_in_new
  • さくらのVPS check_circle

    見覚えのある日本語のページにまずは安心。VPSは比較的料金が安いため、すでにアカウントを持っていたさくらインターネットでVPSを借りることにする。スケールアップはできるようなので、小さいプランから始めるのがよさそう。

    https://vps.sakura.ad.jp/open_in_new

レンタルサーバーと違って、VPSは運用も自己責任になる。いまどき普通はクラウドなのだろう。
誰も来ないブログでも、悪い人だけはたくさん来るらしい。恐ろしいが少し覚悟しておく。

インフラ技術要素の選定

OS

さくらのVPSの標準インストールOSの中にある「Ubuntu 20.04 LTS」にする。
そういえば、CentOS Project 終了にはびっくりした。

ミドルウェア

  • Webサーバー

    Ubuntuのデフォルトリポジトリの「NGINX(エンジンエックス)」があるからこれでいいでしょう。

  • DBサーバー

    Strapiには、MySQL 5.6以上、MariaDB 10.1以上、PostgreSQL 10以上、SQLite 3以上、MongoDB 3.6以上に対応とあるので「MySQL 8.0」にする。理由はMySQLが一番聞いたことがあるから。

アプリケーション実行環境

  • Node.js 14.x

    Strapiには、Node LTS (v12 or V14)とあるので14.xをインストールする。
    パッケージ管理は公式のnpmとサードパーティのyarnがあり、今は公式のnpmも悪くないらしい。バージョン管理もnpmのnが評判いいみたい。

  • Vue.js→Nuxt.js

    Vue.jsは、UIを構築するために開発されたJavaScriptフレームワーク。バージョン3.xが出ており、2.xからけっこう変わったらしいのですが、そもそも触ったことがないので関係ない。 HeadlessCMSには、フロントエンドのプレゼンテーション層がないので、別で用意する必要がある。Vue.jsでフロントを作る場合はSPA(シングルページアプリケーション)で作るものと思ったが、StrapiのスターターだとSPAは非推奨open_in_newだった。

    Vue.jsのSPAの替わりは、オールインワンのNuxtでSSR(サーバーサイドレンダリング)か、GridsomeでSSG(静的サイト生成)がオススメしてた。
    Gridsomeは情報が少なく難しそうなので、情報が多いNuxtにしておく。

  • Apollo Client

    ApolloはGraphQLのライブラリで、バックエンド側の「Apollo Server」とフロントエンド側の「Apollo Client」があるらしい。
    Apollo Clientを使ってコンテンツデータを取得する。

おわりに

今回は自前で作ることが目的なので利用しないが、無料のブログサービスは多数ある。
Mediumopen_in_newNOTEopen_in_newQiitaopen_in_newなど、自分に合ったもので始めるのが効率がよいのだろう。しかし趣味に効率を求めるバカはいない。作るのを楽しむことも今回の目的だから非効率でも問題ない。

娘の顔で私に似ているのは口だけなので、今回はちゃんと作って有言実行の立派なお口であることを証明したい。仕事や日常生活が忙しくなった時にフェードアウトしてしまう。なので1日5分でもいいから作業して、中断感を無くす作戦でいくことにする。

次はさくらのVPSで環境を準備する。