MOSH株式会社のコーポレートサイトを改修する際に技術要素の見直しをしました。
元の構成
インフラ(AWS)の構成要素
ECSにあるnginxを中継してコーポレートサイトのCloudFrontにリクエストを流すような形を取っていました。
- CloudFront
- ECS
- Route 53
- S3
ウェブページの技術スタック
サイト自体はかなりシンプルになっており、テンプレートエンジンであるPugとSassを組み合わせただけとなっています。
- Pug
- PostCSS
- Sass
- webpack(と複数のloader/plugin)
課題と解決
何か問題が起きたからというわけではないのですが、メンテ頻度は高くなくサイト自体もシンプルなのにそれを構成する要素が多すぎるということで改善することにしました。
その1: webpackと関連モジュール
今回webpackのバージョンアップを試みたのですが、関連モジュールの依存関係が原因でバージョンを上げる事自体が難しくなっていました。
これに手間をかけるよりはもっとシンプルな設定で済むようにと今回はviteへ移行することにしました。
webpackで必要だったBabelや各種loader、dev-serverのツールなどは不要となりPugのプラグインだけあればビルド可能な状態になりました。
viteについて補足
viteのドキュメントには以下のようにあります。
「Vite は、一般的な Web 開発パターンをすぐに使えるようにサポートすることを目的としています。」
設定不要で動くケースがいくつかあります。今回であればPostCSSやSassといったものが対象です。
Pugのみプラグインが必要でしたがそれ以外はすべてvite単体でカバーされていました。
webpackのように必要なものを必要なだけという考え方ももちろん素晴らしいです。
ただ、今回のように複雑なことを求めていない場合はviteの方が依存先も少なくて、メンテコストが上がりづらい状態を作りやすいなと感じました。
その2: ECS経由でのサイト表示
元の構成ではECS上のnginxを経由していますが、別に何かを処理する必要などは全くないのでドメインの向き先はコーポレートサイトのCloudFrontに変更しました。
また、このnginxは他アプリケーションへの振り分けなども入っていたため切り離せたことで管理自体もシンプルになりました。
やらなかったこと
PugをReactにしたりスタイリングをSassではなくTailwindCSSを使ったりなど、よりモダンな選択肢は存在しますが今回は不要と判断しました(※)。
シンプルなサイトでメンテ頻度も多くないため、良い意味で安定していてシンプルなツールの組み合わせで技術選定をすべきだと考えました。
※ ゼロベースで書くならReactやTailwindCSSは多分使っていました。
※ 現行の実装を捨ててまでリプレイスするメリットが今回のケースではないと判断したという話です。
まとめ
インフラ(AWS)の構成要素
- CloudFront
ECS- Route 53
- S3
ウェブページの技術スタック
- Pug
- PostCSS
- Sass
webpack(と複数のloader/plugin)- 🆕 Vite
開発体験でみると大差ありませんが、運用面では大きな変化がありました。
普段触らないからこそ放っておいてもきちんと動いてくれる安心感というのは大事だなと改めて実感するいい機会になりました。
Discussion