独自ドメインでウェブサイトをホストする
ウェブホスティングサービスを利用して任意のウェブサイトを構築し、カスタムドメインを紐付けてインターネット上に公開する方法について説明します。
🛠️ 事前準備
インフラサービスは以下を利用する。
-
お名前.com
ドメインレジストラ(ネームサーバー)
COMドメイン:初年度 0円〜/年、更新 1,408円/年 + サービス維持調整費 22.5%
JPドメイン:初年度 330円〜/年、更新 3,124円/年 + サービス維持調整費 22.5% -
Value Domain(バリュードメイン)
ドメインレジストラ、ウェブホスティングプロバイダ(ネームサーバー)-
XREA(エクスリア)
レンタルサーバーサービス
無料プラン:ウェブ・メール、容量10GB、転送量5GB/日
-
XREA(エクスリア)
1. ドメインの取得
ドメインを持っていない場合は購入しておく。
2. ホスティングアカウントの取得
ウェブサイトの設置場所となるサーバーを用意しておく。
⑴ プロバイダへのユーザー登録
🎬 ①Value Domain のトップページ右上にある「ユーザー登録」をクリックする。
- Value Domain
https://www.value-domain.com/
🎬 ②任意のユーザー名、パスワード、メールアドレスを入力し「入力内容を確認」をクリックする。
🎬 ③入力内容を確認し「登録する」をクリックする。
🎬 ④メールアドレス宛に届いた認証番号を入力し「認証を行う」をクリックする。
🎬 ⑤ 必須項目を入力後、赤枠の項目に携帯番号を入力し「送信」ボタンをクリックする。
※ネームサーバーを利用するため「SMS認証」を設定する。(後から設定も可能)
🎬 ⑥ SMSに届いた認証コードを入力して「認証」ボタンをクリックする。
🎬 ⑦ SMS認証が済んだら「入力内容を確認」をクリックする。
🎬 ⑧ 登録情報に間違いがないかを確認し「ユーザー登録する」をクリックする。
🎬 ⑨ 確認を促すメッセージが表示されるので、問題なければ「OK」をクリックする。
完了画面が表示されるので「コントロールパネルTOPへ」をクリックする。
Value Domain のコントロールパネルが表示される。
⑵ レンタルサーバーの申込み
🎬 ① Value Domain のトップページ右上にある「ログイン」をクリックする。
- Value Domain
https://www.value-domain.com/
🎬 ② コントロールパネルから [サーバー] -> [XREA] をクリックする。
🎬 ③ 「XREAの新規アカウントを作成」をクリックする。
🎬 ④ 「XREA(無料)を取得」をクリックする。
🎬 ⑤ 希望アカウント名を入力して「登録」をクリックする。
🎬 ⑥ 完了画面が表示されるので「戻るにはここをクリック」で [XREAの管理・購入] 画面に戻る。
取得したサーバーアカウントが表示される。
🎭 作業手順
※本手順は無停止ドメイン移行を考慮しない。
1. ネームサーバーの切り替え
レジストラが管理するネームサーバーの参照先を変更する。
🎬 ① お名前.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 のトップページ右上にある「ログイン」をクリックする。
- Value Domain
https://www.value-domain.com/
🎬 ② コントロールパネルから [無料ネームサーバー] -> [他者登録しているドメインを登録] をクリックする。
🎬 ③ ドメインと認証方式の選択し「仮登録をする」をクリックする。
🎬 ④ そのまま「本登録をする」をクリックする。
※ 🎭 作業手順 1 にてネームサーバーの切り替えが済んでいるものとする。
登録に成功すると完了画面が表示される。
3. DNSリソースレコードの追加
プロバイダが管理するネームサーバーの応答内容を登録する。
🎬 ① Value Domain のトップページ右上にある「ログイン」をクリックする。
- Value Domain
https://www.value-domain.com/
🎬 ② コントロールパネルから [無料ネームサーバー] -> [ドメインのDNS設定] をクリックする。
🎬 ③ 対象ドメインの「編集」をクリックする。
🎬 ④ 自動DNS設定に XREA で取得したサーバーの情報を書き加えて「保存」をクリックする。
設定に成功すると完了画面が表示される。
4. サーバーアカウントへの接続
サーバーアカウントのコントロールパネルに接続する。
🎬 ① Value Domain のトップページ右上にある「ログイン」をクリックする。
- Value Domain
https://www.value-domain.com/
🎬 ② コントロールパネルから [サーバー] -> [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」と入力し、テキストエリア内に以下のソースコード(参考)を記述する。その後「 💾 」ボタンでファイルを保存した後「 ⬅︎ 」ボタンで前画面に戻る。
簡単なウェブページを表示するソースコードの例(トップページ表示用)
※内容は必要に応じて適宜書き換えること。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
Hello, World!
</body>
</html>
🎬 ④ www.ありのドメイン名についても同様に ①〜③ の手順を繰り返す。
※各ドメインのルートディレクトリにファイルが追加される。
- 例: http://example.com(www.なしのドメイン名)
- 例: http://www.example.com(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 の箇所は適宜書き換えること。
# 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://example.com(www.なしのドメイン名)
- 例: http://www.example.com(www.ありのドメイン名)
Discussion