作成したWebページをインターネットで公開する

Visual Studio Codeで編集したソースコードで作成したWebページをインターネット上で公開するには以下の対応が必要です。

  • ドメインの契約(契約しない場合はサーバーのIPアドレスでWebページを公開する)
  • サーバーの用意(レンタルサーバー、クラウド環境など)
  • サーバーのセットアップ(Apache/NGINXの設定など、FTP/SFTPによる.htmlファイルの配置など)

順番に解説します。

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

独自ドメインは、wiandig.comなどのような企業や個人が自由に設定した文字列のドメインのことです。独自ドメインは、サーバーに設定されているIPアドレスと紐づける形で使用されます。

ドメインがどのサーバーと紐づけられているかという情報は以下のサイトから確認ができます。

https://who.is/

試しに当サイトを管理しているwiandig.comについて調べると以下のような情報が確認できます。ここで確認できるIPアドレスが、独自ドメインとサーバーを紐づけているIPアドレスです。インターネットを通じてWEBサイトにアクセスする際、常にこの独自ドメインとIPアドレスの紐付けの照会が行われています。

以下のサイトは、ドメインの管理をしているICANNが提供する公式サービスで、gTLD(.com.net など)のドメイン登録情報を確認できます。

https://lookup.icann.org/en

独自ドメインの契約

独自ドメインは、ドメイン登録サービスを提供する「レジストラ(Registrar)」を通して契約します。契約すると、一定期間そのドメインを使用する権利を取得できます。ICANNも、ドメイン登録者(Registrant)はレジストラとの登録契約によってドメインを登録・維持すると説明しています。

ドメインには主に次の3者が関係します。

レジストラ

ドメインの登録・更新などを受け付ける事業者

レジストリ

TLDごとのドメイン情報を管理する組織

レジストラント

ドメインを登録している個人・企業

例えば、ドメインの取得で有名なお名前.comは「レジストラ(Registrar)」にあたります。

整理すると、

  • 利用者 → ドメインを登録する「レジストラント(Registrant)」
  • お名前.com → ドメインの登録・更新などを受け付ける「レジストラ」
  • レジストリ(Registry).com などTLDごとのドメイン情報を管理する組織

例えば example.com をお名前.comで取得する場合、

利用者 → お名前.com(レジストラ) → .com のレジストリ

という関係になります。

https://www.onamae.com/

.comドメインは、年額1000円ほどで維持管理が可能なため、開発の勉強用に契約してみるというのもよいでしょう。

 

サーバーのセットアップ

HTML/CSS/JavaScriptで作成したサイトのデータは、サーバーに保存しておく必要があります。サーバー(Server)とは、ネットワーク上で他のパソコンやサーバーなどのコンピュータ(クライアント)からの要求に応じて、データや機能を提供するコンピュータ(またはそのソフトウェア)のことです。

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

オンプレミス(On-Premises)とは、サーバーやネットワーク機器などの情報システムを、自社(企業や組織)の建物内やデータセンターに自前で設置し、運用する形態のことです。

大規模なデータセンターにHTML/CSS/JavaScriptで作成したサイトデータを保存する場合は、以下のようなラックに格納するタイプのサーバーを使用します。

参照:https://business.ntt-east.co.jp/column/service/coworkstorage/datacenter.html

企業が自社のサイトをオフィス内で管理する場合は、以下のようなオフィスのデスク等で管理ができるタワー型のサーバーを使用します。

オンプレミスのサーバーで作成したWEBページを公開できるようにするには、サーバーにApache(アパッチ)もしくはNGINX(エンジンエックス)などをインストールしてサーバーをセットアップする必要があります。

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

クラウド環境とは、AWSやGoogle Cloudなどのクラウドサービスを使用してサーバー環境を構築した環境のことです。

https://aws.amazon.com/jp/

https://cloud.google.com/?hl=ja

クラウド環境はAmazonやGoogleなどのIT企業が管理しているデータセンターのサーバー上でサーバーを仮想的に構築してユーザーに間借りさせる形で貸し出している環境です。

以下のAWS公式が提供している図のGuestに当たるのが仮想サーバーです。

クラウド上に構築したサーバーにHTML/CSS/JavaScriptのデータを格納して、ドメインをクラウド上のサーバーのIPアドレスと紐づけることでインターネットを通じて世界中の人にWEBページを公開します。

クラウド上で構築したサーバーについても、オンプレミス同様にApacheやNGINXなどのセットアップが必要です。

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

レンタルサーバーは、すでにサイトを公開できるように設定済みのサーバーを複数のユーザーで共有して使用するサーバーです。

https://www.xserver.ne.jp/

月額1000円ほどから契約が可能で、作成したHTML/CSS/JavaScriptなどのデータをサーバーにアップロードして格納するだけで、あとはIPアドレスと独自ドメインを紐づければ簡単にWEBページの公開が可能になっているサービスが複数あります。

ファイルをサーバーにアップロードする時に使用する通信技術がFTPと呼ばれる通信技術になります。SFTPは、 SSHを利用した安全なファイル転送でFTPと異なり通信が暗号化されるため、一般的にはFTPではなくSFTPが使用されます。

エックスサーバーでHTMLで記載したサイトをインターネットで公開する方法

日本国内シェアトップの、エックスサーバーを使ってインターネット上にHTMLで作成したWEBページのデータを公開する方法については以下のエックスサーバー公式記事がわかりやすく情報をまとめています。

https://www.xserver.ne.jp/bizhp/homepage-creation-by-html/

また、自身で作成したWEBサイトのデータをエックスサーバーのどこに保存したらいいかについては以下のページで詳細がまとめられています。

必要に応じて参照して、実際にHTMLでサイトのデータを作成して公開してみましょう。

https://www.xserver.ne.jp/support/faq/service_ftp_setting_upload.php