【ろーかるほすと】

localhost とは?

💡 「自分自身」を指すネットワークの特別な名前
📌 このページのポイント
localhost ― 自分自身を指すアドレス 自分のPC(localhost / 127.0.0.1) ブラウザ リクエスト送信 ローカルサーバー :3000 / :8080 GET HTML ↻ ネットワークを経由せず自分自身に通信 (ループバック通信) localhost(127.0.0.1) 開発中のテスト・デバッグ用 外部サーバー(例: 203.0.113.1) 本番環境・インターネット経由
localhostのイメージ
ひよこ ひよこ

localhostって何に使うの?

ペンギン先生 ペンギン先生

Web開発で一番よく使うよ。「npm run dev」でローカル開発サーバーを起動すると「http://localhost:3000」でアクセスできる。サーバーデプロイする前に自分のPCで動作確認する。localhost:8080がAPIサーバー、localhost:5432がPostgreSQLのようにポート番号で使い分けるんだ

ひよこ ひよこ

127.0.0.1と何が違うの?

ペンギン先生 ペンギン先生

基本的に同じだけど微妙な違いがあるよ。localhostはhostsファイル名前解決され、127.0.0.1はIPv4ループバックアドレス。一部のソフトウェアではlocalhostをIPv6(::1)に解決することがあり、IPv4しか対応していないサービスに接続できないトラブルが起きることがあるよ

ひよこ ひよこ

他のPCからアクセスしたいときは?

ペンギン先生 ペンギン先生

localhostは外部からアクセスできないよ。同じネットワーク内の他のPCからアクセスするには、開発サーバーを 0.0.0.0(全インターフェースでリッスン)で起動して、自分のローカルIPアドレス(192.168.x.x)を使う。ngrokCloudflare Tunnelを使えばインターネット経由のアクセスも可能だよ

ひよこ ひよこ

CORSエラーはlocalhostだから起きる?

ペンギン先生 ペンギン先生

localhostだからではなく、オリジンが異なるから起きるよ。localhost:3000(フロント)→localhost:8080(API)は異なるオリジン(ポートが違う)なのでCORSエラーになる。開発用にAPIサーバーCORS設定でlocalhost:3000を許可するか、プロキシ設定(next.config.jsのrewrites等)で同一オリジンに見せかけるのが一般的だね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「localhost」って出てきたら「自分のPCを指す特別な名前(127.0.0.1)」と思えればだいたいOK!
📖 おまけ:英語の意味
「localhost」 = ローカルホスト
💬 Local(自分自身の)Host(ホスト=コンピュータ)。ループバックアドレスとも呼ぶよ
← 用語集にもどる