これまでのnisshiee.org

このサイト[nisshiee.org]は、2016年に構築し、以降ずっと静的ウェブサイトとして運営してきた。2016年の時点では2ページ置いてあるだけのサイトだったが、2018年にブログをこのサイトに載せた。
この間ずっと、サイト構築は以下のような仕組みで行ってきた。

• 自前でwebpackを設定してHTML,CSS,JS,画像を生成
• CircleCIからAWS S3にデプロイ
• AWS CloudFrontから配信

この仕組みで5年以上運営（といってもほとんど放置だが）してみて、振り返ってみる。

• 👍 Good
  • 5年間ビルドシステムが壊れたことが無いほど安定
  • 爆速
    • HTML/CSS/画像だけ（=JS無し）で表示が完成する
    • Turbolinksだけ導入し、ページ遷移もスムーズ
    • ブログも含め、静的コンテンツしかないのでCDNキャッシュだけで配信できる
  • ブログ記事執筆・配信の運用も楽
• 👎 Bad
  • 一度、AWS Certificate Managerの証明書が失効して閲覧できなくなった
  • Dependabotに怒られ続けてた
    • 安定しすぎてビルドシステムに手を入れる必要がないので・・・
    • ビルド時にしか動かない物がほとんど+ユーザ入力が無いため、脆弱性の影響が無い
  • ブログにコメントを書けない
    • アプリケーションサーバが存在しないから、こういう機能を作ろうとするとダルい

という感じで、総じて言えば、めちゃくちゃ上手くいってた。もちろん改善点もあるが、それらはいずれも、ブログの執筆モチベーションが上がらずに放置されていることに比べればとても些細なものだった。

next.js + Vercelに移行

というわけで特に問題の無かったビルドシステム&インフラを今回ごっそり移行した。例によって理由は無い。ブログを移したときと一緒で、やってみたかったからやった。

ただ、理由にはなっていないけど経緯はあって、

• 業務でnext.jsを使うことになりそうだったので触ってみた
• 「よくできてんねこれ」
• 「Prefetchなんかは試してみたかったんだよな」
• 業務でVercelを使うことになりそうだった
• 「楽ちん！」

みたいな感じで、移行することにしたというわけ。

移行してみて

やってみた感想。

• next.jsのチュートリアルをやっておいたので、next.jsで困ることは無かった
  • そもそもチュートリアルで作ってるのがブログだしね・・・
• 手間がかかったのはほとんどMarkdownの処理
  • 既存のブログ記事がmarkdownで書かれていて、かつ微妙に生成するDOMを弄ったりしていた
  • 見た目を壊してないか1つずつ見て確認するしかなかった
    • Tile Tabs WEで新旧をSync Scrollして確認すると楽だった
• 体感だけどパフォーマンスも問題なさそう
  • Prefetchどう・・・？ネットワークが強いと全然分からんｗ
• Vercelがやっぱり楽ちん（管理するものが減った感がすごい）

今後

• しばらく様子見運用
• 気が向いたらブログ記事にコメント書けるようにしたい
  • 今は全ページをSSGしているが、Vercelでnext.js serverが動いているので、簡単に機能追加できるはず
• 執筆しろ