Caddyを利用した Next.js 無停止デプロイ（ローカルサーバー）

ホームページに何かをちょこちょこ載せたくなるたびにビルドしていたら、そのタイミング에 가끔 접속하는人がいるようだった。

そうしているうちに、サーチコンソールでスコアがどんどん下がる現象が起きた。

このままではまずいと思い、無停止デプロイをする方法を考えてみることにした。

1. プロジェクトフォルダ2つ＋ターミナル2つ

答えは意外とシンプルで、ターミナルを2つ開くことだった。

片方で build を回している間、もう片方のターミナルではサーバーが動いている、という形。

問題は、1つのプロジェクト内でターミナルを2つ開いて動かすと衝突が起きること。

片方が正常に動いていても、もう一方のターミナルで build した瞬間に .next フォルダが新しく作られてしまうので、内部エラーが発生し、最終的にホームページが止まってしまう。

なので、既存のプロジェクトとまったく同じフォルダがもう1つ必要になる。

自分は画像もすべてローカルに保存していたので、blogCopy というコピーしたプロジェクトは、元のフォルダを見るように修正しておいた。

あとは Caddy をいじればよい。

2. Caddy 公式ドキュメント

ChatGPT と Claude もよく分かっていないのか、2つとも変なことばかり言うので、結局公式ドキュメントを見ることにした。

公式ドキュメントに載っていた例は以下のとおり。

example.com {
	reverse_proxy node1:80 node2:80 node3:80 {
		health_uri /healthz
		lb_try_duration 5s
	}
}

ただ、これは3つのノードにリクエストを均等に割り振るもので、今回は別のやり方が必要だった。

AI はずっと下のような方法にこだわっていたが、そのまま入れるとリバースプロキシが止まってしまった。

example.com {
    reverse_proxy localhost:3000 localhost:3001 {
        health_uri /health
        health_interval 5s
        health_timeout 2s
        health_status 200
    }
}

まず、これの問題はどのポートがメインなのかを定義していないこと。

それから、Caddy が5秒ごとにポートをチェックするため、起動してから5秒経つまでは正しいポートに接続できない。

なので、手動で制御することにした。

example.com {
	reverse_proxy localhost:3000 localhost:3001 {
		lb_policy first
	
   		fail_duration 20s
   		max_fails 2
	}
}

単純に、ユーザーの接続失敗を検知してポートを切り替える方式に変えた。

こうしたところ、うまく動作した。

3. 感想

これで思う存分（？）ビルドできるようになった。

たまにビルド中にエラーが出たりすると、サーバーを止めすぎているんじゃないかとヒヤヒヤしていた。

これからはそういう心配はなくなりそうだ。

毎日学んでいるのに、まだまだ学ぶことが次々と出てくるのが不思議だ。