Technology

localhost、IPアドレス、ドメイン? あなたのWebサイトに「本物の住所」を与える方法

サイトはlocalhostで動くのに、ほかの人は開けない。localhost、IPアドレス、ドメインの違いと、ホスティング上で本物のアドレスにサイトを載せる方法を解説します。

· 8 分で読めます

localhost、IPアドレス、ドメイン? あなたのWebサイトに「本物の住所」を与える方法

AIを使ってWebサイトを作ったところ、自分のパソコンの上では完璧に動いています。アドレスバーには localhost:3000、あるいは 203.0.113.10 のような数字の並びが表示されています。そのリンクを友人に送っても、開けません。

これはバグではありません。Webサイトを動かすことと公開することの間にある隔たりで、足りないピースはほぼ必ずドメイン名です。このガイドでは、今お使いかもしれないアドレスの違い、そのほとんどがサイトの本当のアドレスになれない理由、そしてどの種類のホスティングでも本物のドメインへ移行する方法を説明します。

4種類のアドレス

Webサイトには4通りの届き方があります。見た目は似ていますが、仕組みは大きく異なります。

アドレスの種類例開ける人
localhosthttp://localhost:3000動かしているパソコンだけ
ローカルネットワークのIPhttp://192.168.1.20同じWi-Fiやルーターにつながった機器
サーバーのIPhttp://203.0.113.10オンラインの誰でも。ただし以下を参照
ドメイン名https://mysite.comいつでも、どこでも、誰でも
Webサイトに届く4つの方法:localhost、ローカルネットワークのIP、サーバーのIP、ドメイン名と、それぞれを開ける人
同じWebサイトでも、アドレスは4通りあり得ます。訪問者向けに作られているのはドメイン名だけです。

このガイドの数字は例です。203.0.113.x は例示用に予約された範囲なので、実在のサーバーを指すことはありません。

localhostがあなたにしか使えない理由

localhost(127.0.0.1 とも書きます)は「このマシン自身」という意味です。あなたが入力すると、あなたのパソコンが自分自身に話しかけます。友人が同じアドレスを入力すると、友人のパソコンが自分自身に話しかけ、何も見つからずエラーを表示します。この言葉は、機器ごとに指すものが違うのです。

192.168.、10.、172.16.〜172.31. で始まるアドレスも、規模が違うだけで同じことです。家庭やオフィスの中で使われるプライベートアドレスで、同じWi-Fiにいる人は開けますが、インターネット上の誰も開けません。

サイトをローカルで動かすのは、作るための正しいやり方です。問題は、それが唯一の居場所になってしまったときに始まります。しかも、サイトが見られるのは、パソコンの電源が入っていてアプリが動いている間だけです。

サーバーのIPが本当のアドレスではない理由

サイトが共有ホスティング、VPS、クラウドのマシンなど本物のサーバーで動くようになれば、サーバーのIPアドレスで開くことができます。そこで止まってしまう人もいますが、それにはいくつもの問題があります。

  • サーバーがどのサイトを表示すべきか分からないことがあります。 1つのIPで多くのWebサイトを提供していることが多く、サーバーはリクエストに含まれるドメイン名を見て、どれを表示するかを決めます。IPだけを開くと、既定のページやエラー、他人のサイトが表示されることがあります。
  • きちんとしたHTTPSが使えません。 HTTPSは通常ドメイン名に対して設定するもので、IPだけでは標準の無料証明書を取得できないのが一般的です。HTTPSがないと、ブラウザは「保護されていない通信」と表示し、訪問者が入力するパスワードやフォームのデータは読み取れる形で送られます。
  • 引っ越すと壊れます。 IPはサーバーのものです。ホスティング会社やプランを変えると番号が変わり、共有したリンクはすべて使えなくなります。ドメインなら、新しいサーバーへ向け直すだけです。
  • 人にもフィルターにも信用されません。 多くのスパムフィルターやセキュリティツールは、数字だけのリンクを怪しいものと見なします。訪問者もそれを覚えられず、見分けることもできません。
  • プロらしいメールが使えません。 hello@mysite.com のようなアドレスにはドメインが必要です。
  • 検索エンジンに重複コピーが見えます。 サイトがIPでもドメインでも応答すると、検索エンジンは各ページを2つのコピーとして見てしまうことがあります。

ドメインとは本当は何か

コンピューターはIP番号を使って互いを見つけます。ドメイン名はその番号に付けた分かりやすい名札で、DNSというしくみがインターネットの電話帳の役割を果たします。名前を渡すと、番号を返してくれます。

関わるのは3者です。

  • レジストラ: ドメインを登録する会社です。ドメインは永久に買うものではありません。借りるもので、通常は1年ずつ更新します。
  • DNS: ドメインがどのサーバーを指すかを示すレコードを保管します。
  • ホスティング: Webサイトのファイルが置かれている場所です。
ブラウザがDNSにmysite.comのIPを尋ね、DNSが番号を返し、ブラウザがホスティングサーバーにページを要求する流れを示した図
誰かがあなたのドメインを入力した直後に起きること。

サイトをドメインに載せる

手順の考え方は、どのホスティングでも同じです。違うのはボタンやメニューの名前だけです。

1. サイトがどこにあるかを確認する

ドメインを何に向けるかは、ホスティングの種類によって決まります。

サイトがある場所ホスティング会社から渡されるもの一般的なレコード
共有ホスティングサーバーのIPアドレスそのIPへのAレコード
VPSまたはクラウドサーバーサーバーのIPアドレスそのIPへのAレコード
サイトプラットフォーム(Vercel、Netlify、Renderなど)向け先のホスト名。場合によってIPもプラットフォームの指示に従いCNAMEまたはA

正確な値は、必ずホスティング会社の案内に従ってください。ダッシュボードやドキュメントに載っていて、多くは歓迎メールにも書かれています。

2. ドメインをホスティングに向ける

方法は2つあります。どちらか一方を選び、両方は使わないでください。

  • 方法A:ネームサーバーを変更する。 レジストラで、ドメインのネームサーバーをホスティング会社が指定するものに置き換えます。以後、すべてのレコードはホスティングのダッシュボードで管理します。
  • 方法B:DNSは今の場所に置いたまま(レジストラやCloudflareなどのサービス)、そこにレコードを追加します。ドメインをサーバーのIPへ送るAレコードと、www がそれに従うためのCNAMEレコードです。
DNSレコードの図解:ドメインをサーバーのIPに向けるAレコードと、wwwのCNAMEレコード
ほとんどのサイトに必要な2つのレコードの図解。実際のDNS画面は異なる場合があります。

よくある落とし穴: レコードは、ドメインのDNSが実際に置かれている場所でのみ有効です。ネームサーバーをホスティング会社のものに変更した場合(方法A)、レジストラで追加したレコードは無視されます。その逆も同じです。

3. ホスティングにドメインを知らせる

ドメインをサーバーに向けるだけでは足りません。サーバーも、その名前にどのサイトが対応するのかを知っている必要があります。どのホスティングにも、そのための場所があります。共有ホスティングのドメインページ(cPanelのものが一例)、自前サーバーならWebサーバー設定の server_name の行、プラットフォームならプロジェクト設定のドメインタブです。この手順を飛ばすと、ドメインはサーバーに届いても、既定のページが表示されます。

4. DNSが行き渡るのを待つ

これを伝播と呼びます。数分から1〜2日かかることがありますが、多くは短時間で済みます。完了するまでは、人によってドメインが開けなかったり、古いページが表示されたりすることがあります。

5. HTTPSを有効にする

ドメインが向いた時点で、多くのプラットフォームや多くのホスティングが無料の証明書を自動で導入します。自前サーバーなら、Certbotというツールを使ってLet's Encryptのような無料の証明書サービスを利用できます。どちらの場合も、先にドメインがサーバーを向いている必要があります。完了したら、すべての http のアクセスを https へ転送するようにサイトを設定してください。

6. アドレスは1つの形に決める

mysite.com と www.mysite.com は別のアドレスとして扱われます。どちらかをメインに決め、もう一方をそこへ転送します。プラットフォームには、そのための設定があるのが普通です。Apacheサーバーなら、次のルールで実現できます(サイトの .htaccess ファイルに記述します)。1つ目は www を www なしのドメインへ送り、2つ目はサーバーの生のIPで来た人をあなたのドメインへ送ります。

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.mysite\.com$ [NC]
RewriteRule ^(.*)$ https://mysite.com/$1 [L,R=301]

RewriteCond %{HTTP_HOST} ^203\.0\.113\.10$
RewriteRule ^(.*)$ https://mysite.com/$1 [L,R=301]

例のドメインとIPは、ご自身のものに置き換えてください。Nginxなど他のサーバーでも考え方は同じですが、書き方が異なるため、それぞれのドキュメントを確認してください。

コードに隠れたアドレスを直す

AIが書いたコードには、localhost が直接書き込まれていることがよくあります。公開したサイトでは、これが分かりにくい形で不具合を引き起こします。訪問者のブラウザは localhost をその人自身のパソコンと解釈するため、ページはあなたのサイトとは無関係なマシンからデータを読み込もうとします。

悪い例:

fetch("http://localhost:3000/api/products")

良い例(どこでも動く):

fetch("/api/products")

プロジェクト全体で localhost、127.0.0.1、192.168、そして使ったことのあるIPを検索してください。そのうえで、次の場所を確認します。

  • サイトのURL設定: APP_URL や BASE_URL のような値には、https 付きの本物のドメインを使います。
  • ログインや決済のサービス: Googleログイン、決済ゲートウェイ、同様のサービスでは、各ダッシュボードで許可するリダイレクト先(コールバック)として本物のドメインを登録する必要があります。決済のWebhookは localhost にはまったく届きません。ゲートウェイのサーバーには、公開されたHTTPSアドレスが必要だからです。
  • 許可するオリジン(CORS): コードに許可するアドレスを列挙している場合は、localhost をドメインに置き換えます。
  • サイトマップとcanonicalタグ: IPやローカルのアドレスではなく、ドメインを示すようにします。

例外が1つ: データベースのアドレスは構成によって異なります。多くのホスティングでは、データベースがサイトと同じサーバーで動いているため、そこでは localhost が正しい値です。クラウドやマネージドのデータベースでは、提供元が別のアドレスを渡してくるので、そちらを使います。データベースをインターネット全体に開放したままにしないでください。

よくある問題

  • 設定直後に「このサイトにアクセスできません」と出る: DNSがまだ行き渡っていないか、レコードが間違っている可能性があります。待ってから、レコードを確認してください。
  • ドメインがホスティング会社の既定ページを表示する: ドメインはサーバーに届いていますが、サーバーはそのサイトが自分のものだと知りません。ホスティングの設定でドメインを追加してください。
  • 古いサイトや他人のサイトが表示される: 古いレコードか、ブラウザのキャッシュです。プライベートウィンドウや別のネットワークで試してください。
  • 「保護されていない通信」や証明書エラー: 証明書がまだ発行されていないか、ドメインがまだホスティングを向いていません。
  • www ありでは動くが、なしでは動かない(またはその逆): レコードが1つ足りません。www 用のCNAMEを追加してください。
  • デモにトンネルツールを使う: ngrokやCloudflare Tunnelのようなツールは簡単なテストには便利ですが、ホスティングではありません。
  • 自宅のルーターをインターネットに開放する(ポート転送): 避けてください。自宅のネットワークをさらすことになり、家庭用のIPはよく変わります。

ドメインを守る

ドメインは、あなたが持つもっとも価値あるアドレスです。しっかり守りましょう。

  • 自動更新をオンにします。期限切れのドメインは、他の誰かに登録されてしまうことがあります。
  • レジストラのアカウントには、強力で固有のパスワードと二段階認証を使います。
  • レジストラのロックを有効にします。あなたの承認なしにドメインが移管されるのを防ぎます。
  • 連絡用のメールアドレスを最新に保ちます。更新やセキュリティの通知はそこへ届きます。

2分でできるセルフチェック

  • http://あなたのサーバーのIP を開きます。サイトが表示されない(またはドメインへ転送される)はずです。
  • http://mysite.com を開きます。鍵のマーク付きで https://mysite.com にたどり着くはずです。
  • www 付きのバージョンを開きます。同じ最終アドレスにたどり着くはずです。
  • プロジェクト内で localhost とIP番号を検索します。
  • ターミナルで nslookup mysite.com を実行します。結果にホスティングのIPが表示される(プラットフォームの場合はそのサーバーを示す)はずです。

短いチェックリスト

  1. localhost は作るときだけに使い、アドレスとしては決して使わない
  2. ドメインを登録し、自動更新と二段階認証をオンにする
  3. ネームサーバー(方法A)またはAレコードとCNAMEレコード(方法B)のどちらか一方で、ホスティングに向ける
  4. ホスティングの設定にドメインを追加し、サーバーがどのサイトのものか分かるようにする
  5. DNSが行き渡るのを待ってから、HTTPSを有効にする
  6. 1つの形(www ありまたはなし)を選び、もう一方を転送する
  7. コード内のすべての localhost とIPを置き換え、ログインと決済のダッシュボードを更新する
  8. サイトがサーバーの生のIPで応答しないようにする

ドメインは、「自分のパソコンでは動く」を「誰でも訪問できる」に変えるものです。一度きちんと設定すれば、共有したリンクはすべて動き続け、後でホスティングを変えても大丈夫です。

Comments

No comments yet. Ask a question or add what we missed.