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

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」にします。

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

  • 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で環境を準備します。