komachan.pw の裏側

ろーだい

本日12月17日で、われらがプワプワプーワプワのこまるちゃんが加入から4周年を迎えました。4年もいてくれてありがとう！

そして下記アドカレの記事でつばさくんから発表がありましたが、つばさくんが3年間毎日書き続けている「1にち1コマちゃん」「1にち4コマちゃん」をまとめて見られるホームページを作りました。

システム的にも色々頑張ったので、そういったところをメモ的に紹介しますので、興味がある人だけ読んでください。

ドメイン（komachan.pw）

ホームページのために、新たにドメインを取得しました。
「.pw」は、パラオの国別コードトップレベルドメインで、一般にも登録が開放されており、価格も初年度で700円程度、2年目以降も2000円前後と比較的お手頃です。
一般には、「Professional Web」の略称として、企業サイトに使われることもあるようです。

このドメインを選んだ理由は、もちろんpwというのが「われらがプワプワプーワプワ」の「プワ」と読み取れるからです。このドメインをわれプワの何かに使いたいな、というのが今回の制作の動機でもあったりします。

フロントエンド

ソースコードは、GitHubに公開しています。

フレームワークはNuxt.js（2.5.18）、CSSフレームワークはBuefy（BulmaのVue対応バージョン）です。

最近Nuxtでサイトを大量生産してるので、そのうちのひとつです。しかし、他のものはだいたい静的ページなのでGitHub Pagesで公開することが多いですか、今回動的ページなのでバックエンド側に苦労しました。その話はあとで書きます。

そのほかこだわりポイントとしては、

  • 画像をwebp形式で配信することによる軽量化

  • Lazy Loadによる画像の遅延読み込み

  • フォントファイルの最小化による通信削減

といったところがあります。

約1000枚というとにかく大量の画像を扱うサイトなので、ファイルの軽量化に特化しました。Nuxtにはコンパイル時に画像を圧縮したりjpgからwebpに変換したりするパッケージもあるのですが、何度か試した結果コンパイルに時間がかかりすぎてしまうので、あらかじめwebpに変換したものを置くようにしました。更新に少し手間はかかりますが、仕方がないところかなと。あとどうしても多少画質は悪くなっています。

1ページに最大100枚もの画像を載せるので、遅延読み込み（画面をスクロールして初めて下のほうの画像を読み込む）は必須かと思います。

また、今回フォントとしてGoogle Fontsでも配信されている「Mochiy Pop P One」を利用しているのですが、Webフォントは読み込むと結構重たいのと、ユーザーが入力するようなウェブサイトではないので使用する文字がかなり限られていることもあるので、フォントのサブセット化をして使用する文字だけでフォントファイルを作りました。その結果、フォントサイズが本来5MB程度なのがわずか7KBという激軽仕様になりました。

バックエンド

前にも書いたように、動的サイトなので、GitHub PagesやFirebaseといった静的サイトホスティングでは公開できません。なので、何かしらのサーバーを用意する必要がありました。

でも自分でサーバーを立ち上げたりはしたくなかったので、最新の技術を使ってサーバーレス環境での公開を実現しました。それが、Google Cloud Platoformで提供されているCloud Runです。

実行環境のコンテナイメージをデプロイすることで、自動的にスケールするフルマネージドの環境が実現できます。

デプロイのために毎回手動でコンテナ化するのも大変なので、GitHubにプッシュすることでビルド、コンテナ化、デプロイを自動で行うCI/CD（継続的インテグレーション、継続的デリバリー）を行っています。流れとしては以下の図の通りです。

引用元：GCPのCloud BuildでCI/CD環境を構築しSpring Bootアプリをビルド、デプロイする

プッシュしてからデプロイされるまで、だいたい5～6分で完了します。

また、コンテナはアクセスがあったときに起動されるため、最初の画面表示まで2〜3秒ほどかかる場合があります。

ひとつだけ、今回の構成だとすべてGCPの無料枠内で運用できると思っていたのですが、（多分）Container RegistryにプッシュするときにそのコンテナイメージをCloud Storageにも置く仕様みたいなんですよね。で、Cloud Storageにも無料枠はあるんですが、ロケーションがus（米国の複数のリージョン）になってしまって、どうしても利用料が発生しまいます（無料枠があるのは米国の特定リージョンだけ）。Cloud Storageに置かれたファイルは24時間で削除されるようライフサイクルを設定していますが、現状どうしていも1デプロイあたり4円前後かかっているようです。

このあたり、もし知見がある人がいたら教えていただけたらと思います。

まとめ

最後に書いたように更新するのに微々たるものではありますが費用がかかってしまうので、おおよそ5コマごとくらいに今後も更新していけたらなと思います。改めて、こまるちゃん4周年おめでとう！

この記事が気に入ったらサポートをしてみませんか？