このレッスンでは、前のレッスンで作成したWebページをインターネットで公開する方法を解説します。ドメインとサーバの関係を押さえ、HTML・CSS・JavaScriptのファイルを公開先へ配置する流れを学びます。

公開サービスの操作そのものを暗記するためのレッスンではありません。HTTP・HTTPSなどの知識が実際のWeb公開とどうつながるかを体験するためのハンズオンです。HTMLやCSSを一通り学んでから取り組んでも構いません。

Webページを公開するまでの作業は、大きく次の3つに分かれます。

  1. 公開用のアドレスを決める。独自ドメインを登録する方法と、ホスティングサービスから提供されるアドレスを使う方法があります。
  2. ファイルを配信するサーバやホスティングサービスを用意する。
  3. 公開するファイルを配置し、必要なドメイン設定とHTTPSの設定を行う。

ここでは学習用の公開先を使い、前のレッスンのSampleフォルダを題材に進めます。すでに運用しているサイトがある場合は、そのファイルや設定を上書きしない場所を用意してください。

独自ドメインとIPアドレス

ドメイン名は、インターネット上の名前を人が扱いやすい形で表したものです。独自ドメインとは、企業や個人が登録して利用するドメインのことで、Webサイトのアドレスやメールアドレスなどに使います。以下では説明用のドメイン名としてexample.comを使います。実際の作業では、自分が利用できるドメイン名に読み替えてください。

一方、IPアドレスはネットワーク上で通信相手へデータを届けるためのアドレスです。ドメイン名を取得するだけでWebページが公開されるわけではありません。ファイルの公開先と、その公開先へアクセスするための名前の設定が必要です。

DNSによる名前解決

ドメイン名からIPアドレスなどを調べる仕組みがDNS（Domain Name System）です。名前を通信に必要な情報へ対応付ける処理を名前解決と呼びます。DNSで管理する情報のうち、名前とIPv4アドレスの対応にはAレコード、IPv6アドレスとの対応にはAAAAレコードを使います。

  1. ユーザーがWebブラウザにURLを入力する。
  2. WebブラウザやOSなどがDNSの仕組みを利用し、接続先のIPアドレスを得る。
  3. 得られた接続先と通信し、HTTPSの場合はTLSによる保護の下でHTTPのリクエストとレスポンスをやり取りする。

DNSの応答は一定期間キャッシュされるため、ページを開くたびにすべてのDNSサーバへ問い合わせ直すわけではありません。設定を変更しても、以前の情報がしばらく使われることがあります。

独自ドメインの設定では、ホスティング事業者が指定するネームサーバを利用する方法や、現在利用しているDNSサービスで必要なレコードを設定する方法があります。指定される内容はサービスごとに異なり、IPアドレスを直接設定する方式に限りません。利用するサービスの公式手順に従って設定しましょう。

DNSとドメイン登録情報の照会の違い

WHOISや、その後継として整備されたRDAPは、ドメインの登録情報を調べるための仕組みです。DNSの名前解決と同じものではありません。

調べたいこと 利用する仕組み・方法
その名前にどのIPアドレスが設定されているか DNS。nslookupやdigなどで照会できる
登録先の事業者、登録日、登録状態など RDAPやWHOIS。表示される項目はドメインや公開方針によって異なる

次の画面は、元の手順で使っていたドメイン情報照会サービスの例です。1つのサービスが登録情報とDNS情報をまとめて表示する場合でも、この2つの仕組みは区別してください。

現在の登録情報を調べる際は、.comなどについてはICANN Lookup、JPドメイン名についてはJPRS WHOISを利用できます。ICANN LookupはRDAPを利用する登録情報の照会サービスです。なお、登録者の情報がすべて公開されるとは限りません。

独自ドメインの契約

独自ドメインは、ドメイン登録を扱う事業者を通して登録します。登録者は契約に従って一定期間その名前を利用でき、使い続けるには更新が必要です。ドメインの登録と、Webページを保存するサーバの契約は別の役割ですが、同じ事業者でまとめて申し込めることもあります。

ドメイン登録に関わる次の3つの名称を整理しておきましょう。

名称 役割
レジストラ（Registrar） ドメインの登録・更新などを受け付ける事業者
レジストリ（Registry） トップレベルドメインごとの登録情報を管理する仕組みや、その運用組織を指す。.jpの登録管理はJPRSが担う
レジストラント（Registrant） ドメインを登録している個人や組織

たとえば、利用者がお名前.comなどの登録事業者でドメインを登録する場合、利用者がレジストラント、登録を受け付ける事業者がレジストラに当たります。その先に、トップレベルドメインごとの登録情報を管理するレジストリがあります。JPドメイン名では、JPRSの指定事業者を通じて登録手続きを行います。

費用はドメインの種類、登録事業者、契約期間などで変わります。初年度の割引価格だけでなく、更新時の料金と自動更新の設定も確認してください。学習用に独自ドメインを契約することは必須ではなく、後で紹介するサービス提供のアドレスでも公開を試せます。

サーバのセットアップ

サーバとは、クライアントからの要求に応じてデータや機能を提供するコンピュータやソフトウェアのことです。Webページを公開する場合は、HTML・CSS・JavaScriptや画像などを保存し、HTTP・HTTPSで配信できる環境を用意します。

サーバ環境には複数の用意の仕方があります。Webサーバのソフトウェアの例としては、Apache HTTP ServerやNGINXがあります。

オンプレミスでサーバ環境を構築する

オンプレミスとは、企業や組織が自分たちで機器を用意し、社内やデータセンターなどに設置して運用する形態です。機器、ネットワーク、OS、Webサーバの設定や保守まで管理する必要があるため、今回のような個人の学習では通常選びません。

次の既存の画像は、データセンターの設備や、ラック型・タワー型のサーバの参考例です。Web公開の仕組みを学ぶために、これらの機器を購入する必要はありません。

クラウド環境でサーバを構築する

クラウドでは、事業者のデータセンターにある計算資源やストレージなどを、インターネット経由で必要に応じて利用します。AWSやGoogle Cloudがサービスの例です。

仮想サーバを使う方式では、物理的な機器の購入を事業者側に任せ、自分でOSやWebサーバを設定できます。次の図は、元のレッスンで紹介していた仮想化の参考図です。

仮想サーバへファイルを置き、ネットワーク、Webサーバ、ドメイン、HTTPSなどを設定して公開します。クラウドにも、Webサーバの運用をサービス側に任せる方式があります。そのため「クラウドなら必ずApacheやNGINXを自分でインストールする」というわけではありません。

レンタルサーバを活用する

レンタルサーバは、Webサイトの公開に必要な環境を借りるサービスです。共用型のサービスでは、事業者が設定したサーバを複数の利用者で共有します。一般に、利用者がOSやWebサーバのソフトウェアをインストールする必要はなく、管理画面での設定とファイルの配置が中心になります。

提供される機能、利用料金、転送方法はサービスやプランによって異なります。利用する前に、静的なHTMLファイルを公開できること、独自ドメインやHTTPSに対応していること、初期費用・更新料金を確認しましょう。

形態 機器・初期準備 運用負担・設定 向いている用途
オンプレミス 機器と設置場所を自分たちで用意する 機器からOS・Webサーバまで管理する 独自の設備要件がある組織のシステム
クラウドの仮想サーバ 機器購入は不要。利用した資源などに応じた費用がかかる OS・Webサーバなどの管理が必要 構成や処理を柔軟に選びたいシステム
共用レンタルサーバ プランを契約し、管理画面で設定する サーバ基盤の管理は事業者が担当。利用者は自分のサイトを管理する HTMLの公開や一般的なWebサイト

ファイル転送の方法を選ぶ

手元のファイルをサーバへ送ることをアップロードと呼びます。ファイル転送には、次のようなプロトコルがあります。

名称 通信の特徴
FTP ファイル転送用のプロトコル。TLSなどで保護しないFTPでは、認証情報やデータが暗号化されない
FTPS FTPの通信をTLSで保護する方式
SFTP SSHの安全な通信路でファイルを転送する方式。FTPとは別のプロトコル

利用先が対応するFTPSまたはSFTPを選び、接続先、ポート番号、ユーザー名、認証方法を公式手順に合わせます。両者は名称が似ていますが、クライアントの接続方式を取り違えると接続できません。管理画面のファイルマネージャからHTTPSでアップロードする方法が提供される場合もあります。

HTTPSで公開する準備

公開するWebサイトには、TLS証明書を設定してHTTPSで配信できるようにします。レンタルサーバでは、管理画面の「無料SSL」などの機能から設定する方式があります。名称にSSLと書かれていても、現在の通信保護はTLSが中心です。

Let’s EncryptはTLS証明書を発行する認証局の一つです。利用先が対応していれば、証明書の発行や更新をサービスに任せられます。設定方法と自動更新の有無は利用先の公式案内に従ってください。HTTPSの詳しい仕組みは「HTTPSプロトコルの概要」のレッスンで解説します。

作成したファイルをアップロードする

ここからは、前のレッスンで作成した次のフォルダ構成を使います。HTML内の相対パスとファイルの位置を一致させたまま転送することが大切です。

Sample/
├── sample.html
├── css/
│   └── style.css
└── js/
    └── script.js
  1. 接続情報を用意する。サーバ管理画面や公式ヘルプで、転送先のホスト名、FTPS・SFTPなどの方式、ポート番号、ユーザー名と認証方法を確認します。
  2. ファイル転送クライアントで接続する。利用する方式に対応したソフトウェアを使い、用意した情報を設定します。画面の項目名はソフトウェアによって異なります。
  3. 公開ディレクトリを開く。公開するファイルを置くフォルダを選びます。名称の例はpublic_htmlですが、サービスによって異なるため、表示された最初のフォルダへ無条件に置かないでください。
  4. フォルダ構成を保って転送する。Sampleの中にあるsample.html、cssフォルダ、jsフォルダを公開ディレクトリへ配置します。既存ファイルを上書きするか尋ねられた場合は、対象を確かめてから操作します。
  5. 公開URLから開く。ドメインとHTTPSの設定ができたら、Webブラウザでhttps://example.com/sample.htmlに相当する自分のURLを開きます。パソコン内のファイルを開く操作とは区別しましょう。

Sampleフォルダそのものを公開ディレクトリへ入れた場合は、URLもhttps://example.com/Sample/sample.htmlのようになります。URLのパスは、公開ディレクトリから見たファイルの位置に対応します。

サーバがindex.htmlをディレクトリの既定ページとして扱う設定なら、sample.htmlをindex.htmlに変更して配置することで、https://example.com/のようにファイル名を省略して開けます。これはサーバの設定による動作で、HTML側に特別な要素を追加する機能ではありません。

エックスサーバーで公開する場合の配置先

レンタルサーバの一例として、エックスサーバーでは、対象ドメインのフォルダ内にあるpublic_htmlへ公開用ファイルを置くと案内されています。たとえば、example.com/public_html/sample.htmlへ置いたファイルは、そのドメインの/sample.htmlとしてアクセスする対象になります。操作画面や最新の手順は末尾の公式ヘルプを参照してください。

表示や読み込みがうまくいかないとき

公開ページを自分で確認するときは、次のように原因を切り分けると考えやすくなります。

状態 確認すること
ページ自体を開けない ドメインのDNS設定、サーバへのドメイン追加、TLS証明書の設定、入力したURL
404が表示される 公開ディレクトリ、ファイル名、大文字・小文字、URLのパスが一致しているか
HTMLは表示されるがCSSやJavaScriptが反映されない css・jsフォルダも転送したか、HTMLのhref・srcと配置が一致しているか
以前の内容が表示される 編集内容を保存して転送したか、ブラウザや配信側のキャッシュが残っていないか

ブラウザの開発者ツールのネットワーク表示を使うと、どのURLの取得に失敗したかを調べられます。パソコン内のファイルのパスや、公開していないファイルを参照していないかも確かめましょう。

学習用の静的サイトホスティングを使う

HTML・CSS・JavaScriptなどのファイルを配信する静的サイトなら、GitHub Pagesのようなサービスも選択肢になります。GitHub PagesはGitHubのリポジトリにあるファイルからサイトを公開するサービスで、GitHub Freeでは公開リポジトリを使って利用できます。提供されるgithub.ioのアドレスで公開できるため、独自ドメインの契約は必須ではありません。

リポジトリはファイルと変更履歴をまとめて管理する場所です。GitHub Pagesの公開方法は、FTPSやSFTPでレンタルサーバへ転送する手順とは異なります。学習用のコードを公開リポジトリへ置き、公式ドキュメントに従って公開元を設定する方法があります。公開するファイルにパスワードや秘密鍵などを含めないようにしてください。利用条件や制限はサービスの公式案内で確認しましょう。

このレッスンのポイント

  • 公開には、ファイルを配信する環境と公開用のアドレスが必要。独自ドメイン以外に、サービス提供のアドレスも使える。
  • DNSは名前解決の仕組み。RDAPやWHOISによる登録情報の照会とは目的が異なる。
  • サーバ環境にはオンプレミス、クラウド、レンタルサーバなどがあり、自分が担当する設定・運用の範囲が異なる。
  • ファイル転送には、利用先に対応したFTPS・SFTPなどの保護された方法を使う。Webサイトの配信にはHTTPSを設定する。
  • HTML・CSS・JavaScriptは相対パスの関係を保って公開ディレクトリへ配置する。index.htmlを既定ページとして扱うかどうかはサーバの設定による。
  • 学習用の静的サイトは、GitHub Pagesなどの静的サイトホスティングでも公開できる。

参考資料

前へ次へ