Astro で開発する際の開発サーバーの URL が localhost:4321 の様になってしまうのが、なんか不便だな、と思い、別名をつけられるか調べてみたら、Caddy というウェブサーバーを使えば簡単に実現できそうだったので試してみました。

用意するもの

• /etc/hosts
• Caddy と Caddyfile

今回の前提

• localhost:4321 を latelyonline.localhost でアクセスできるようにする

.localhost を採用した理由

最初は .local を使用しようとしていましたが、あまり良くないことがわかりました。

• ローカル開発環境用に独自のドメインを用意するなら .local を末尾にしちゃだめ - hacomono TECH BLOG
• hostsに".local"で終わるドメインを書いて使うと面倒なことになる - すぎゃーんメモ
• mlabo.localからmlabo.lanに変更して爆速化！：ローカル開発の最適なドメイン設定

選択肢としては、

• .example
• .localhost
• .test
• .internal

などがあるようでしたが、自分のマシン上のみで動作させる開発サーバーなので .localhost が最適と感じ、採用しました。

手順

hosts を書き換える

1
# 指定するホスト名 (latelyonline.localhost) で 127.0.0.1 にアクセスできるようにする
2
127.0.0.1 latelyonline.localhost

Caddy を準備する

Caddy とは

Caddy は Go 言語で書かれた Web サーバーです。

軽く調査した限り、やりたいことがかなりシンプルに実現出来そうだったので採用しました。

Caddy をインストール

1
brew install caddy

Caddy の設定ファイル Caddyfile を用意する

1
# latelyonline.localhost の ポート 80 にきたアクセスを localhost:4321 にリバースプロキシする
2
latelyonline.localhost:80 {
3
  reverse_proxy localhost:4321
4
}

astro の場合は astro.config.mjs の修正も必要

1
server {
2
  allowedHosts: [
3
    'latelyonline.localhost',
4
  ],
5
  // allowedHosts: true として、すべての Host を許可する事もできる
6
}

• Configuration Reference | Docs

Caddy を立ち上げる

1
sudo caddy start --config ./Caddyfile

Astro を立ち上げる

1
astro dev

これで latelyonline.localhost で localhost:4321 と同じものが見えるようになるはずです。

Caddy の止め方

1
sudo caddy stop --config ./Caddyfile

ちなみに Caddy を立ち上げた際に start を使ってバックグラウンドで立ち上げたので、止めるときは stop をする必要があります。

まとめ

ふと思いついた事でしたが、Caddy の使い勝手が良く、非常に簡単に実現できました。

この方法を使い続けるかは不明ですが、簡単にできると知れてよかったです。

参考にしたサイト

• Caddy - The Ultimate Server with Automatic HTTPS