← ブログ一覧に戻る

自前サーバーとAstroで爆速個人サイト構築!激闘のDocker権限問題とワンクリック同期への道

  • 自作サーバー
  • Astro
  • Docker
  • DevOps
  • 個人サイト構築

自前サーバーとAstroで挑む!爆速個人サイト構築の夢

皆さんは自分の個人サイトにどんな理想を抱いていますか?私は以前から「表示が秒速で、完全に自分の手でコントロールできる、そして何よりデスクトップで記事を編集したらボタン一つでデプロイまで完結する」という夢のような環境を求めていました。既存のレンタルサーバーやCMSでは物足りず、その理想を実現すべく、自前サーバーとモダンな静的サイトジェネレーターAstroの組み合わせに挑戦することを決意しました。

Astroを選んだのは、その爆速性と開発体験の良さから。そして自前サーバーは、究極の自由度と、何より「自分の手で全てを構築する」というエンジニアとしてのロマンを叶えるためです。しかし、この道のりは想像以上に険しいものでした。特にDockerとホスト間の権限問題、そしてリアルタイム監視による自動同期の実現には、幾度となく壁にぶつかり、泥臭い試行錯誤を繰り返すことになります。

最初の壁:Dockerとホスト間の「権限地獄」

Astroサイトの構築自体はスムーズに進みました。問題は、それをDockerコンテナ上で動かし、さらにホスト側のファイルと連携させようとした時でした。最初のデプロイは成功したものの、コンテナ内でAstroがビルドして生成したファイルが、ホスト側からは編集できないという事態が発生したのです。ファイルオーナーがコンテナ内のrootユーザーになってしまい、ホスト側の自分のユーザーではchownやchmodなしには手が出せない状態。「これではワンクリック同期どころか、手動での修正すらままならない!」と頭を抱えました。

一時は権限を緩める荒技も考えましたが、それではセキュリティ上のリスクが高まります。何とかスマートな解決策はないかと、Dockerfileやdocker-compose.ymlの設定を何度も見直し、フォーラムやStack Overflowの情報を漁る日々が続きました。そしてついに、「PUID/PGID」という概念と出会います。docker-compose.ymlにホストのユーザーIDとグループIDを環境変数として渡し、コンテナ内のプロセスをそのユーザーで実行するように設定することで、この「権限地獄」からようやく抜け出すことができたのです。この瞬間、まさに暗闇に光が差したような感覚でした。

コードで解決した権限問題の一例

docker-compose.ymlに以下の設定を追加することで、ホスト側のユーザーとコンテナ内のユーザーをマッピングできるようになりました。

version: '3.8'services:  web:    image: my-astro-site:latest    user: "${PUID}:${PGID}" # ここがキモ    volumes:      - ./src:/app/src      - ./public:/app/public    ports:      - "80:80"

これにより、コンテナ内で生成されたファイルもホスト側と同じユーザー権限で扱えるようになり、大きな一歩を踏み出すことができました。

次なる難題:リアルタイム同期と自動デプロイの実現

権限問題が解決し、手動でのビルド・デプロイは可能になりましたが、私の目標は「デスクトップからワンクリック同期」です。ローカルで記事を修正したら、自動的にサーバーに同期され、Astroのビルド、そしてDockerコンテナの再起動までをシームレスに連携させたい。

当初は、サーバー側でファイルの変更を監視し、変更があったら自動でビルド・デプロイする仕組みを試みました。inotify-toolsやentrのようなツールを組み合わせるも、Dockerコンテナとホスト間のファイルシステム監視は一筋縄ではいきません。特にコンテナ内部からホストのファイルシステムを監視するのは、セキュリティとパフォーマンスの面で課題が多く、うまくいきませんでした。

そこで発想を転換し、「ホスト側(私のデスクトップ)からサーバーへの変更を検知し、同期とデプロイを指示する」というアプローチに切り替えました。

試行錯誤の末にたどり着いた「ワンクリック同期」

  1. ローカル監視スクリプトの作成: デスクトップで編集しているAstroプロジェクトのファイルを監視するシェルスクリプトを作成。fswatchなどのツールを利用し、ファイルの変更を検知します。
  2. rsyncによる高速同期: 変更が検知されたら、SSH経由でサーバーへrsyncを実行し、変更のあったファイルだけを高速に同期します。これにより、大規模なサイトでも効率的に更新できます。
  3. SSH経由でのリモートコマンド実行: 同期が完了したら、同じくSSH経由でサーバー上のデプロイスクリプトを実行します。このスクリプトは、Astroのビルドコマンドを実行し、その後docker compose up -d --build --force-recreateを叩いてコンテナを再構築・再起動するというものです。

これらの一連の処理を一つのシェルスクリプトにまとめ、デスクトップのショートカットアイコンに登録しました。これで、記事を書き終えて保存したら、あとはそのアイコンをワンクリックするだけで、サーバーへの反映まで全てが自動で完了する「夢のような環境」がついに現実のものとなったのです!

構築前後の比較:苦労の先にある圧倒的成長と達成感

この道のりは決して平坦ではありませんでしたが、得られたものは計り知れません。旧来の構成と比べて、どれだけの変化があったのか、比較表でご覧ください。

項目Before (旧構成: レンタルサーバー + WordPress)After (新構成: 自前サーバー + Astro + Docker)
サーバーレンタルサーバー (共有リソース)VPS (仮想専用サーバー)
フレームワークWordPress (PHPベースのCMS)Astro (JavaScriptベースのSSG)
構築方法GUIベースの簡単インストールDocker Composeによるコンテナ化、手動セットアップ
デプロイ方法管理画面からの更新、FTPによるファイルアップロードローカル編集後、ワンクリックで自動同期・ビルド・デプロイ
同期方法管理画面からの操作、FTPホストからのrsync + SSH経由でのリモートスクリプト実行
管理の手間WordPressのアップデート、プラグイン管理、セキュリティ対策OS・Dockerの管理、自作スクリプトのメンテナンス
表示速度プラグインやテーマに依存、やや重いことも静的サイトとして超高速表示
コスト月額費用 (レンタルサーバー)VPS月額費用 + ドメイン費用 (レンタルサーバーより自由度が高い分、知識が必要)
達成感手軽にサイト開設ゼロから全てを構築した圧倒的な達成感と技術的成長

まとめ:苦難を乗り越えた先に広がるエンジニアの喜び

自前サーバーとAstroで爆速個人サイトを構築する過程は、Dockerの権限問題、リアルタイム監視の困難など、数々の技術的課題に直面する連続でした。しかし、それらの壁を一つ一つ乗り越えるたびに、私のエンジニアとしての知識は深まり、問題解決能力は格段に向上したと実感しています。

特に、デスクトップからワンクリックでサーバーに同期・デプロイできる環境が完成した時の達成感は、何物にも代えがたいものでした。表示速度の向上、圧倒的な自由度、そして何よりも「自分の手で全てを創り上げた」という自信。これこそが、私がこの挑戦で得た最大の報酬です。

もしあなたが「もっと自分のサイトを速くしたい」「全てを自分の手でコントロールしたい」「新しい技術に挑戦してみたい」と考えているなら、ぜひ自前サーバーとモダンなSSGの組み合わせに挑戦してみてください。きっと私と同じように、苦難の先に大きな喜びと成長が待っているはずです。「やってよかった!」心からそう言える最高の体験でした。

← ブログ一覧に戻る