Zenn
🦁

【Nginx】独自ドメインを取得して、Virtual Hostを使ってみる

2021/11/23に公開
nginx
VirtualBox
tech

はじめに

タイトルの通りですが、NginxでVirtual Hostを使ってみます。

Nginxをインストール

まずはNginxをインストールします。
【VirtualBox】Nginxをインストールして、ブラウザからアクセスするの記事でインストール手順を書いているのでこちらを参考にしてみてください。

VirtualHostを使ってみる

VirtualHost（バーチャルホスト）とは、一台のサーバーで複数のドメインを運用するサーバー技術のこと。複数のドメインを1台のサーバーで動かすことが出来るので、コストを抑えられるみたい。
例えば、「domain01.com」と「domain02.com」を同じWebサーバーで動かすことができるみたいな感じ。

まずは独自ドメインの取得

お名前.comで独自ドメインを取得しましょう。適当なドメイン名を探せば、1円で取得できます。
僕は「practice-website.net」という名前で取得してみました。

取得方法は、こちらを参考にしました。
【初心者OK】お名前.comで独自ドメインを取得する方法を完全解説！

DNS（ドメインネームサーバー）の設定する

取得したままでは何も表示できないので、ドメインとIPアドレスを紐付けるためにDNSを設定する必要があります。
DNS（ドメインネームサーバー）とは、ドメイン名を指定するとIPアドレスを返してくれるサーバのことです。

今回はお名前.comで取得したドメインとさくらVPSのIPアドレスを紐付けていきます。

【さくらサーバー】での設定

ネームサーバに関する設定を参考に、お名前.comで取得したドメインを登録しましょう。

次にゾーンを編集していきます。
ゾーンの設定を参考に、(1)さくらのDNSに設定する（簡単設定）で、さくらVPSのIPアドレスを送信すれば完了です。

今回はバーチャルホストを使って、複数のドメインでWebサイトを作りたいのでサブドメインも設定します。設定方法は、上記と同じ流れで、「サブドメインを新規登録」>「ゾーンを編集」すればOKです。

ネームサーバサービス一覧に追加したドメインが表示されたら、登録は完了です。

【お名前.com】での設定

【他社レンタルサーバー・お客様独自のネームサーバーにて運用する場合／
　初期状態に戻す場合】を参考に設定していきます。

「その他のネームサーバーを使う」でさくらのネームサーバーを設定します。
さくらのネームサーバーは他社で取得・管理中のドメインの設定方法の「STEP2　ネームサーバの変更」の項目で確認できます。

設定できたら、ドメイン詳細からネームサーバー情報を確認してみましょう。
ちゃんと設定できてそうですね。

表示してみる

1時間くらい待ってみて、取得したドメインでアクセスできる確認してみましょう。
ちゃんと紐付けできました。

VirtualHostの設定

VirtualHostなので、2つのドメインのWebサイトを表示できるように設定していきます。
今回は、「practice-website.net」と「sub.practice-website.net」を表示できるようにします。

「practice-website.net」の部分を自分のドメイン名に置き換えて進めてください。

ディレクトリを作成

home（ユーザーのホームディレクトリ）に、「demo」というVirtual Hostのデータを入れとくディレクトリを作成し、その中に「public_html」という公開ファイル用のディレクトリを作成します。

$ sudo mkdir -p /home/demo/public_html

独自ドメインとサブドメインのサブディレクトリを作成

ドメインごとに公開するファイルを分けたいので、それぞれのサブディレクトリを作成します。

# 独自ドメイン
$ sudo mkdir -p /home/demo/public_html/practice-website.net/{public,private,log,backup}

# サブドメイン
$ sudo mkdir -p /home/demo/public_html/sub.practice-website.net/{public,private,log,backup}

表示するhtmlファイルを作成

先ほど作成したサブディレクトリの中に表示するhtmlファイルを作成します。
ファイルの内容は違っていた方が、サイトを表示した時に分かりやすいので、ちょっと変えておきます。

# 独自ドメイン
$ vi /home/demo/public_html/practice-website.net/public/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>practice-website.netのWebサイト</title>
</head>
<body>
  <div class="container">
    <h1>practice-website.netのWebサイト</h1>
    <p>nginxで配信しています。</p>
  </div>

  <style>
    .container {
      max-width: 800px;
      margin: auto;
    }
  </style>
</body>
</html>

# サブドメイン
$ vi /home/demo/public_html/sub.practice-website.net/public/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sub.practice-website.netのWebサイト</title>
</head>
<body>
  <div class="container">
    <h1>サブドメインです。</h1>
    <h2>sub.practice-website.netのWebサイト</h2>
    <p>nginxで配信しています。</p>
  </div>

  <style>
    .container {
      max-width: 800px;
      margin: auto;
    }
  </style>
</body>
</html>

バーチャルホストの設定ファイルを作成

$ sudo vi /etc/nginx/sites-available/virtualhost.conf

# 設定ファイルの内容
server {
  listen   80;
  server_name sub.practice-website.net;
  access_log /home/demo/public_html/sub.practice-website.net/log/access.log;
  error_log /home/demo/public_html/sub.practice-website.net/log/error.log;
  location / {
              root   /home/demo/public_html/sub.practice-website.net/public/;
              index  index.html;
              }
  }

server {
  listen   80;
  server_name practice-website.net;
  access_log /home/demo/public_html/practice-website.net/log/access.log;
  error_log /home/demo/public_html/practice-website.net/log/error.log;
  location / {
              root   /home/demo/public_html/practice-website.net/public/;
              index  index.html;
              }
  }

ファイルの内容を説明すると以下のような感じ。

  • server {}バーチャルサーバの設定
  • listenバーチャルサーバがリクエストを受け付けるIPアドレスやポート番号を設定
  • server_nameサーバ名を指定
  • access_logアクセスログを記入するファイルを設定
  • error_logエラーログを記入するファイルを設定
  • locationURIのパス毎の設定
  • rootルートのディレクトリを設定
  • indexリクエストのURIが"/"で終わっている時に使われるファイル名を設定

シンボリックリンクを作成

Nginxは起動時に、/etc/nginx/sites-enabledに入っている設定ファイルを読み込みます。

なので先ほど作成したバーチャルホストの設定ファイルを読み込むために、/etc/nginx/sites-enabled/virtualhost.confを読み込むと、/etc/nginx/sites-available/virtualhost.conf が読み込まれるようにシンボリックリンクを作成します。

$ sudo ln -s /etc/nginx/sites-available/virtualhost.conf /etc/nginx/sites-enabled/virtualhost.conf

nginxを再起動して、サイトを表示

nginxを再起動しましょう。

$ sudo /etc/init.d/nginx stop
$ sudo /etc/init.d/nginx start

ちゃんと設定できていれば、ドメインごとのWebサイトが表示されると思います。
お疲れ様でした〜。

独自ドメイン

サブドメイン

Discussion