🦍

独自ドメインでウェブサイトをホストする

2024/07/01に公開

ウェブホスティングサービスを利用して任意のウェブサイトを構築し、カスタムドメインを紐付けてインターネット上に公開する方法について説明します。

🛠️ 事前準備

インフラサービスは以下を利用する。

  • お名前.com
    ドメインレジストラ(ネームサーバー)
    COMドメイン:初年度 0円〜/年、更新 1,408円/年 + サービス維持調整費 22.5%
    JPドメイン:初年度 330円〜/年、更新 3,124円/年 + サービス維持調整費 22.5%

  • Value Domain(バリュードメイン)
    ドメインレジストラ、ウェブホスティングプロバイダ(ネームサーバー)

    • XREA(エクスリア)
      レンタルサーバーサービス
      無料プラン:ウェブ・メール、容量10GB、転送量5GB/日

1. ドメインの取得

ドメインを持っていない場合は購入しておく。

2. ホスティングアカウントの取得

ウェブサイトの設置場所となるサーバーを用意しておく。

⑴ プロバイダへのユーザー登録

🎬 ①Value Domain のトップページ右上にある「ユーザー登録」をクリックする。
🎬 ②任意のユーザー名、パスワード、メールアドレスを入力し「入力内容を確認」をクリックする。

🎬 ③入力内容を確認し「登録する」をクリックする。

🎬 ④メールアドレス宛に届いた認証番号を入力し「認証を行う」をクリックする。

🎬 ⑤ 必須項目を入力後、赤枠の項目に携帯番号を入力し「送信」ボタンをクリックする。

※ネームサーバーを利用するため「SMS認証」を設定する。(後から設定も可能)

🎬 ⑥ SMSに届いた認証コードを入力して「認証」ボタンをクリックする。

🎬 ⑦ SMS認証が済んだら「入力内容を確認」をクリックする。

🎬 ⑧ 登録情報に間違いがないかを確認し「ユーザー登録する」をクリックする。

🎬 ⑨ 確認を促すメッセージが表示されるので、問題なければ「OK」をクリックする。

完了画面が表示されるので「コントロールパネルTOPへ」をクリックする。

Value Domain のコントロールパネルが表示される。

⑵ レンタルサーバーの申込み

🎬 ① Value Domain のトップページ右上にある「ログイン」をクリックする。
🎬 ② コントロールパネルから [サーバー] -> [XREA] をクリックする。

🎬 ③ 「XREAの新規アカウントを作成」をクリックする。

🎬 ④ 「XREA(無料)を取得」をクリックする。

🎬 ⑤ 希望アカウント名を入力して「登録」をクリックする。

🎬 ⑥ 完了画面が表示されるので「戻るにはここをクリック」で [XREAの管理・購入] 画面に戻る。

取得したサーバーアカウントが表示される。

🎭 作業手順

※本手順は無停止ドメイン移行を考慮しない。

1. ネームサーバーの切り替え

レジストラが管理するネームサーバーの参照先を変更する。

🎬 ① お名前.com のトップページ右上にある「ログイン」をクリックする。

※ドメインを取得した際にメールで案内された「お名前ID」と設定済みのパスワードを入力する。

https://www.onamae.com/

🎬 ② コントロールパネルから [ネームサーバー設定] -> [ネームサーバーの設定] をクリックする。

🎬 ③ 対象のドメインに下記のネームサーバーを登録し「確認画面へ進む」をクリックする。

Value Domain が提供する無料ネームサーバー(DNSサーバー)

📄 ネームサーバー情報
ns1.value-domain.com
ns2.value-domain.com
ns3.value-domain.com
ns4.value-domain.com
ns5.value-domain.com

🎬 ④ 以下のポップアップ広告が表示される場合は [×] ボタンで閉じるか「設定しない」をクリックする。

🎬 ⑤ 変更内容に間違いがないかを確認し「設定する」をクリックする。

しばらく待つと完了画面が表示される。

2. DNSの委任(ドメイン登録)

プロバイダが管理するネームサーバーにドメインを登録する。

🎬 ① Value Domain のトップページ右上にある「ログイン」をクリックする。
🎬 ② コントロールパネルから [無料ネームサーバー] -> [他者登録しているドメインを登録] をクリックする。

🎬 ③ ドメインと認証方式の選択し「仮登録をする」をクリックする。

🎬 ④ そのまま「本登録をする」をクリックする。

🎭 作業手順 1 にてネームサーバーの切り替えが済んでいるものとする。

登録に成功すると完了画面が表示される。

3. DNSリソースレコードの追加

プロバイダが管理するネームサーバーの応答内容を登録する。

🎬 ① Value Domain のトップページ右上にある「ログイン」をクリックする。
🎬 ② コントロールパネルから [無料ネームサーバー] -> [ドメインのDNS設定] をクリックする。

🎬 ③ 対象ドメインの「編集」をクリックする。

🎬 ④ 自動DNS設定に XREA で取得したサーバーの情報を書き加えて「保存」をクリックする。

設定に成功すると完了画面が表示される。

4. サーバーアカウントへの接続

サーバーアカウントのコントロールパネルに接続する。

🎬 ① Value Domain のトップページ右上にある「ログイン」をクリックする。
🎬 ② コントロールパネルから [サーバー] -> [XREA] をクリックする。

🎬 ③ 取得済みサーバーアカウントの「新コントロールパネル」をクリックする。

XREA のコントロールパネルがログイン状態で起動する。

5. カスタムドメインへの紐付け

契約したホスティングをドメインで参照できるよう設定する。

⑴ ドメイン設定の追加

🎬 ① XREA のコントロールパネルから [ドメイン設定] をクリックする。

🎬 ② 「ドメイン設定の新規作成」をクリックする。

🎬 ③ www.なしのドメイン名を入力し「ドメイン設定を新規作成する」をクリックする。

🎬 ④ 新規作成完了のダイアログが表示されるので [×] ボタンで閉じる。

🎬 ⑤ www.ありのドメイン名についても同様に ②〜④ の手順を繰り返す。

※ドメイン一覧には全部で2件の設定が追加される。

⑵ サイト設定の追加

🎬 ① XREA のコントロールパネルから [サイト設定] をクリックする。

🎬 ② 「ドメイン設定の新規作成」をクリックする。

🎬 ③ www.なしのドメイン名で無料SSLを選択し「サイト設定を新規設定する」をクリックする。

🎬 ④ 新規設定完了のダイアログが表示されるので [×] ボタンで閉じる。

🎬 ⑤ www.ありのドメイン名についても同様に ②〜④ の手順を繰り返す。

※サイト一覧には全部で2件の設定が追加される。

⑶ メールの追加

🎬 ① XREA のコントロールパネルから [メール] をクリックする。

🎬 ② 「メールの新規作成」をクリックする。

🎬 ③ 各項目は任意に設定し「メールを新規作成する」をクリックする。

🎬 ④ 新規設定完了のダイアログが表示されるので [×] ボタンで閉じる。

🎬 ⑤ メール一覧に設定が追加されていることを確認する。

⛳️ 動作確認

1. ウェブスペースへのFTP接続

FTPクライアントソフトを利用してサーバーに通信できることを確認する。

🎬 ① XREA のコントロールパネルから [サイト設定] をクリックする。

🎬 ② [FTP設定] をクリックする。

🎬 ③ お好きな FTPクライアントでサーバーに接続する。

Web FTPクライアントを利用する場合は「net2ftp ファイルマネージャ」をクリックする。

net2ftp がログイン状態で起動する。

2. カスタムドメインでアクセス

コンテンツファイルをアップロードし、アクセスできることを確認する。

🎬 ① net2ftp で「www.なしのドメイン名」で公開するウェブディレクトリまで移動する。

テキストボックスにパス(例: /public_html/example.com)と入力して [Enter] キーを押下するか、フォルダをクリックして「www.なしのドメイン名」まで辿っていく。

🎬 ② 移動先のウェブディレクトリで「新規ファイル」をクリックする。

🎬 ③ コンテンツファイル(html)を新規に作成して保存(アップロード)する。

新しいファイル名に「index.html」と入力し、テキストエリア内に以下のソースコード(参考)を記述する。その後「 💾 」ボタンでファイルを保存した後「 ⬅︎ 」ボタンで前画面に戻る。

簡単なウェブページを表示するソースコードの例(トップページ表示用)
※内容は必要に応じて適宜書き換えること。

📄 index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  Hello, World!
</body>
</html>
🎬 ④ www.ありのドメイン名についても同様に ①〜③ の手順を繰り返す。

※各ドメインのルートディレクトリにファイルが追加される。

🎬 ⑤ HTTPおよびHTTPSの通信でウェブページが表示されることを確認する。

無料プランであるため、ページ上部には広告バナーが埋め込まれている。

HTTP通信(平文) HTTPS通信(SSL暗号化)
サイト表示の例: http://example.com
サイト表示の例: https://example.com
サイト表示の例: http://www.example.com
サイト表示の例: https://www.example.com

3. 転送先のURLへリダイレクト

分散設定ファイルをアップロードし、自動転送できることを確認する。

🎬 ① net2ftp で「www.なしのドメイン名」で公開するウェブディレクトリまで移動する。

テキストボックスにパス(例: /public_html/example.com)と入力して [Enter] キーを押下するか、フォルダをクリックして「www.なしのドメイン名」まで辿っていく。

🎬 ② 移動先のウェブディレクトリで「新規ファイル」をクリックする。

🎬 ③ 分散設定ファイル(htaccess)を新規に作成して保存(アップロード)する。

新しいファイル名に「.htaccess」と入力し、テキストエリア内に以下のソースコード(参考)を記述する。その後「 💾 」ボタンでファイルを保存した後「 ⬅︎ 」ボタンで前画面に戻る。

Google Site に転送するソースコードの例(ウェブアクセス制御用)
※命令文 example の箇所は適宜書き換えること。

📄 .htaccess
# Redirect
RewriteEngine On

# base path
RewriteBase /

RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ http://sites.google.com/view/example/$1 [R=301,L]
RewriteCond %{SERVER_PORT} 443
RewriteRule ^(.*)$ https://sites.google.com/view/example/$1 [R=301,L]
🎬 ④ www.ありのドメイン名についても同様に ①〜③ の手順を繰り返す。

※各ドメインのルートディレクトリにファイルが追加される。

🎬 ⑤ HTTPおよびHTTPSの通信で指定したURLに転送されることを確認する。

Discussion