このブログをレンタルサーバ上のWordPressから
静的サイトジェネレータのjekyllに移行したので経緯と移行手順をまとめてみた

経緯

旧環境はレンタルサーバ上でWordPressを稼働させていた
元々更新頻度にムラっ気があって、しばらく放置してしまう時もあって
たまに記事更新をしようとするとサーバ側のPHPのバージョンが変わった影響で
WordPressのバージョン上げなきゃいけなくなってて、
バージョン上げたら今度は管理画面が真っ白になったり
記事投稿しようとすると内部エラーが出て投稿すらできず、
みたいなことが何度かあった
しかもレンサバなのでサーバ内の状態を確認しずらかったりして
管理も面倒に感じていた

WordPressの仕組みもしばらく触ってないと忘れてしまって
ちょっとした変更をしようとした時に気持ち的なハードルが高くなってしまい
どうしても作業が遅くなってしまっていた
加えて、レンサバが単純にコストかかりすぎ(1500円ぐらい毎月かかってた)

ということで

  • wordpress自体がトラブった時の対応コストが高い
  • レンサバなのでサーバ側の状況を把握しづらい
  • サイト規模に対してレンサバのランニングコストが高い
  • とはいえブログは資産なので自分で管理したい

といった部分を解決できれば個人的にはよさそうということになり、
静的サイトジェネレータ + Amazon S3 上でWebサイトホスティング
という方向でブログを移行することにした

以下、静的サイトジェネレータやS3のWebサイトホスティングの概要について
レンサバxWordPressな環境との比較も含めてまとめてみた

静的サイトジェネレータとは

そもそも静的サイトジェネレータとはなにかというと
サイトのデザインテンプレートをプログラム的に組み合わせて
記事などのコンテンツをそのテンプレート内に埋め込んで
最終的にhtmlを生成するツールということになる

これだけ聞くとWordPressと同じじゃん、となるが
wordpressがページのリクエスト毎に動的にhtmlを生成するのに対し、
静的サイトジェネレータはhtmlを静的なファイルとして事前に全て生成する
という部分が大きな違いになる

つまり、jekyllで生成したhtmlファイルをwebサーバへデプロイし、
単純にhtmlを配信するだけのシンプルな処理になる

これのいいところは、単純なhtml配信となるので

  • トラブルの発生確率が減る
  • 万一トラブルが起きた時も仕組みがシンプルな分、解決も早い

みたいなところがある

また、WordPressはコンテンツの情報をDBに保持していて、
WordPress固有の付帯情報とともに管理されているため構造を把握しにくいが、
最近の静的サイトジェネレータの多くはMarkdown形式のテキストに
記事コンテンツを分離して管理する仕組みになっているため、
そもそもmysql自体が不要だし編集自体も直感的に、
気楽に出来るというメリットも大きい

このブログ自体、現状は大した記事量ではないし
php+mysqlなWordPressで動的に管理するのはオーバースペックかつ
管理面でのデメリットしか感じなくなったので、
記事をmarkdownなファイルで綺麗に分離できて、
サーバ負荷も低いjekyllは自分の環境にはピッタリだった

ちなみに、静的サイトジェネレータはJekyll以外にも

  • Python製の Pelican
  • Node.js製のHexo

等、他にもかなり沢山あるが単純に自分がrubyに慣れていたのでJekyllを選択した
https://staticsitegenerators.net

Amazon S3で低コストWebサイト運用

今回のもう一つの変更点はサーバをレンサバから
S3上でのWebサイトホスティングの形式に変更したところ
S3は一般的にはクラウドストレージサービスとして認識されているが
Webサイトのホスティング機能も提供しているので
htmlファイルをアップロードしてWebサイトホスティングを有効にすれば
そのままWebサーバとして機能させることが出来る

コスト面も、従量課金制でストレージ使用量やIOに比例してくるため、
アクセスの少ないサイトなら1ヶ月数十円ということもあり得る

大雑把にコスト計算すると大体以下のようになる

まず、ブログの1ページの内訳を大体こんな感じと仮定する

htmlファイル x 1
cssファイル x 1
jsファイル x 1
imageファイル x 7

1ページ表示時の総request数 10リクエスト
1ページ総容量200kb

S3の料金は大きく分けて3つのセクションに分かれている

  • Storage
    • 一月の間にS3に保管されるデータ量
  • Requests
    • Get、Put/Copy/Post/List等のリクエスト回数
  • Data Transfer
    • リージョンを跨いだデータ送信量
    • 外部ネットワークへのデータ送信量
    • 外部ネットワークからのデータ受信量

仮に月間平均10万PVだったとして

Storage

100page * 200kb = 20MB

最初の1TB/月 : $0.03/GB
=> 約$0.01

Requests

1page 10requests

10 * 100000 = 1000000

GETリクエスト $0.0037 / 10000requests
1000000 / 10000 * $0.0037
=> $0.37

Data Transfer

S3からのデータ転送量(アウト)

200kb * 100000requests / 1024.0 / 1024.0
=> 約19GB

最初の1GB/月 $0
10TBまで/月 $0.14

18 * 0.14
=> $2.52

total

0.03 + 0.37 + 2.52
=> $2.92
2.92 * 120 = 350 円

ここに、Route53の料金を$0.5程度考慮

350 + 60 = 400円

ということで、10万PVのサイトを400円程度で運用できることになる

レンサバが1ヶ月1500円程度掛かっていたので大幅にコストカットできた

しかも、アクセス増加によるサーバ負荷なども実質的に心配する必要もなく、
レスポンスを改善するならCloudFrontをすぐさま導入することも可能だし、
動的な処理が必要になればlamdaやapi Gatewayなんかを
活用できたりと拡張性も高い

まとめ

こんな感じで、コストカットとブログ環境のシンプル化がいい感じにできたと思う
実際の移行手順とかは長くなったので次回に