趣味ブログの構成メモ

はじめに

このブログはAstroで作られており、用途に応じた3台のVPSで分けて運用しています。
趣味ブログなのでガチガチに固めてはおらず、「無理なく続けられること」と「壊れたときに復旧しやすいこと」をメインに考えています。

この記事では、実際の構成と運用フローをまとめています。
フロントエンドの実装方針から、GitLab CIでのデプロイまでをざっくり紹介します。

1. 全体構成

VPSの役割

VPS1（Contabo Cloud VPS 10）: Redmine + GitLab Runner
VPS2（Contabo Cloud VPS 10）: GitLab本体
VPS3（Contabo Cloud VPS 20）: Astro配信先（Nginx）
OSはすべて Ubuntu 24.04
リージョンはすべて日本

こう分けた理由

Git管理（GitLab）とジョブ実行（Runner）を分けて負荷を分散させる
- Redmine側においたのはこのVPSが少し高負荷になってもほぼ影響がないため
配信先を独立させて公開部分をできるだけシンプルに保つ
個人運用でも手が回る範囲で最低限の責務分離をしておく

2. フロントエンド構成（Astro）

ブログ本体は、Astro + Tailwind CSS + TypeScript で実装しています。

Astroを使っている理由

記事中心サイトと相性がよく表示が軽い
Markdown管理がしやすい
動的処理を減らせるので配信側の構成が簡単になる

コンテンツ運用

記事は src/content/posts/ 配下のMarkdownで管理
フロントマターで公開日・タグ・下書きを管理
ビルド時に記事一覧、タグ一覧、RSSを生成

UIの方針

Tailwindで見た目を揃えて、後から直しやすくする
TypeScriptでコンポーネント周りの破綻を減らす
個人的にダークモードが好きなので実装しておく

3. CI/CD（GitLab CI）

main ブランチにpushされたときだけ、以下の3段で回しています。

check
- pnpm lint
- pnpm format:check
build
- pnpm build
- 生成した dist/ を artifacts として保持
deploy
- openssh-client / rsync を利用
- 配信先へ rsync --delete で反映

当時の確認コマンドはこんな感じです。

pnpm lint
pnpm format:check
pnpm build

デプロイで意識していること

--delete で配信先との差分を揃えて、ファイルの残骸を残さない

4. 配信基盤（Nginx + Let’s Encrypt）

配信先VPSはNginxで静的ファイルを配信し、HTTPSはLet’s Encryptで証明書を運用しています。

この形のよいところ

動的アプリサーバが不要で構成がシンプル
趣味ブログ用途には十分な性能を出しやすい

5. セキュリティとネットワーク

デプロイ経路（Runner側 → Astro配信先）はプライベートネットワークを利用

方針

外に出す必要がないものは出さない
デプロイ通信はできるだけ閉域に寄せる

6. バックアップ・監視の現状

バックアップ

3台ともContaboのデイリーバックアップを利用

監視

まだ本格導入前（今後の課題）

次にやりたいこと

死活監視（Web、GitLab、Runner）
デプロイ失敗やディスク逼迫の通知
最低限のログ監視

7. コスト感

月額は次の合算です。

Cloud VPS 10 × 2台
Cloud VPS 20 × 1台
プライベートネットワーク利用料
日本リージョン利用料

趣味ブログにしては負担が大きいかもしれないｗ

8. 障害実績について

稼働開始したばかりなので、今のところ大きな障害はまだありません。
そのぶん、早めに監視・通知まわりを整えておきたい、という段階です。

構成図

3台VPS構成図