アジフライには何もかけないカル太です。素材の味が好き。

ウェブサイトの記事を全部消しました！　お役立ち情報があったわけでもなければ、特別面白いお話があったわけでもないので。

一応記事のデータ自体は残しているので、再編集して再公開する可能性はあります。

さて、今回はウェブサイトを作り直してみましたというお話です。

jamstackってなに？

jamstackとはWeb開発アーキテクチャの名称です。Javascript, API, Markupから構成されており、それら3つの頭文字を取ってjamと呼んでいるそう。

jamstackの公式サイトを見ていただくことで詳しいなんやかんやについては解決すると思うので、ここでは省きます。

なるべくサーバレスで、安全で、コンテンツの追加・変更のための手順が少ないウェブページを作っておけば今後の運用がラクになるんじゃないかなあと思い、乗り換えを決意。そして出来上がったのがこのページになっています。

どんな構成にしたの？

こんな構成です

vercelって？

ウェブサイト本体はホスティングサービスの vercel に置いています。

nextjs や nuxtjs を始めとした nodejs 製のアプリケーションを置くことができるサービスです。

Githubのリポジトリと連携することで、コードが更新されるたびにアプリケーションがデプロイされるようになったりなど、とてもクールでスピーディなのがカッコいいです。

しかも無料。なんで……？

contentfulって？

成果物やブログ記事のような追加されるコンテンツの管理はヘッドレスCMSであるcontentfulに任せています。

Content Model と呼ばれるデータ構成についての定義を作って、そのデータ構成をもとにデータを追加していく。という感じです。

追加したデータはデフォルトでは非公開な状態ですが、公開ボタンを押すと vercel に置かれたウェブサイトが反応。記事が更新される。という寸法です。

例えば、記事は以下のような定義にしています。

• タイトル
  • 256文字までの文字列
  • Contentful では short text と呼ばれるフィールドを選択しています
• 記事本文
  • 50,000文字までの文字列
  • markdownで書く想定
  • Contentful では long text と呼ばれるフィールドを選択しています
• カテゴリ
  • postCategory という別のデータ構成が入力できるように
  • 複数入力できるようにしています
• サムネイル
  • 256文字までの文字列
  • OGPで表示されてほしいサムネイルのURLを入力します
  • 入力しなくてもいいフィールドとして設定しています

データ構成自体についてですが、割りと汎用的でワガママに設定ができて嬉しいです。特に他のデータ構成をリレーショナルに設定できるところが強い。

ちなみに無料なのにContent Modelは25種も作ることができるし、データは10,000件まで追加することができます。趣味でやっているウェブサイトなのでそうそう枯渇することはなさそうです。

MinIOって？

記事に添付したい画像や配布したいデータはオブジェクトストレージであるMinIOに置くようにしています。

個人で立ち上げる Google Drive みたいなものだと思ってください。置いたファイルのバージョニングや公開設定など好きにイジれます。

contentfulにも画像類は置けるのですが、容量の限界だったり、実験時にcontentfulのAPIをひたすら叩くことになって制限とかがかかっちゃったら嫌だなあと思い別立て。

アプリケーション本体がvercelに移管された影響で役目がなくなりそうになってたVPSにdockerで立てています。

特に難しいことはしておらず、デフォルトのユーザ名とパスワードを決めてログインしたら画像などを投げ入れるだけ。

この構成にしてどうなった？

とにかく管理がラクになりました！

考えるべきはウェブサイトの見た目部分のみで、それ以外は特に何も必要なし！

表示するデータを追加したい場合は外部サービスにアクセスして最初に決めたフォーマットに合わせて入力していくだけ！　脳を使う量が減るのって気持ちが良いですね。

あとは費用を安くすることもできそうな感じがしています。

現状かかっている費用はVPSとドメイン費のみ。オブジェクトストレージの中身を全部 contentful に移しちゃえばドメイン費だけにすることだってできちゃいます。

最後に、jamstackの特徴である爆速表示が再現できました。表示に必要な外部APIとの通信がなくなったので、めちゃ軽量。

その分、サイトの更新時にかかるビルド時間は少し伸びちゃっていますが、長くて数分という程度だし、ビルド中はサイトが見れなくなるというわけでもないので無問題です。

まとめ

jamstackな構成でウェブサイトを作り直してみました。知らない技術やサービスに触れるのは楽しいですね。

今後も継続して学んで、学んだものはしっかりアウトプットして自分のものにしていけたらと思います。

それでは、今日はこのへんで。