nginxのvirtualhostを使って複数ドメインのサイトを作る方法
やりたいこと
virtualhostとは？
ひとつのサーバーで、複数ドメインのサイトを表示できる機能。nginxに限らずApacheにも備わっている。
バーチャルホストとは | クラウド・データセンター用語集／IDCフロンティア
今の時点でよくわからなくても、やってみればわかるので先に進もう。
環境
流れ
- 独自ドメイン取得
- ネームサーバー設定
- Virtual Hostの設定
- Virtualhost用のディレクトリを作成
- オリジナルのindex.htmlを作成
- Virtualhost用の設定ファイルを作成
- nginxに設定ファイルを読み込ませる
- nginxを再起動
1. ドメイン取得
Virtualhostに設定する独自ドメインを取得する。 ドメイン屋さんはどこでもOK。定番なのはお名前ドットコム。
私は以前にお名前ドットコムでドメインを複数取得していたこともあり、こちらを選択。.workドメインが1円と安かったので選んだ。
勉強用と割り切って安いドメインでOK。私は後々にポートフォリオサイトとして利用したかったので、いちおうきちんとしたURL？を取得した。
2. ネームサーバーに登録する方法
独自ドメインを取得できたら、その独自ドメインとIPアドレスを紐付ける作業をする。
どういうことか？ たとえば、「Orangutan.com」というドメインを取得していたとする。 これをChromeブラウザのURL入力欄に入れても、何も表示されない。 だから、「Orangutan.com」とあなたが運営するサイトのIPアドレスを紐付ける。
具体的にすることは、次の2つ
- お名前ドットコムでネームサーバー変更の設定
- さくらVPSでネームサーバーの設定
「ネームサーバー？なにそれよくわかんねぇ…」とチンプンカンプンな場合は、次の記事がわかりやすい。
「さくらのVPS」に「お名前.com」で取得した独自ドメインを割り当てる手順 | 100%レンタルサーバーを使いこなすサイト
2-1. お名前ドットコムでネームサーバーの変更の設定
まずはお名前ドットコムで設定をするため、「お名前ドットコムnavi」へアクセスする。 「ドメイン ＞ 取得したドメインを選択 ＞ ネームサーバー ＞ その他」へ進む。
ここに、さくらインターネットのネームサーバー情報を入力する（さくらを利用していない場合は、使用しているサーバーのホームページで確認しよう）。 さくらのネームサーバーを利用している場合は、以下の情報を利用する。2つとも入力する。
ネームサーバー1： ns1.dns.ne.jp ネームサーバー2： ns2.dns.ne.jp
（さくらインターネットでもさくらVPSでも共通して使われる） ネームサーバ利用申請 – さくらのサポート情報
こんな感じになるので確認ボタンを押す。
OKボタンを押して終わり。
インターネットの環境により、反映完了まで２４時間～７２時間程度かかる場合がございます。
時間がかかるみたいだが、たいていは1時間以内で終わる印象。
お名前ドットコムでの作業はこれで終了。次はさくらインターネットで設定をする。
2-2. さくらVPSでネームサーバーの設定
さくらインターネットの会員メニューへログインする https://secure.sakura.ad.jp/auth/login
会員トップメニューにいるので、「契約情報」をクリック
「契約サービスの確認」をクリック
「サーバ設定」をクリックし、コントロールパネル（さくらのVPS）が開く
左にあるカラムの「ネームサーバ登録」をクリック
ネームサーバの利用申請が開く。一番安いVPSサーバーを契約している場合、「1契約 5ドメイン」と書かれているはず。下部に取得した独自ドメインを入力し、送信する。
※さくらVPSは最初の2週間が無料期間なので、「1契約 5ドメイン」とは書かれておらず、ネームサーバが利用できない。課金して本契約をすれば数分で「1契約 5ドメイン」の表示が出る。
「ネームサーバ申請へ戻る」をクリック
「ネームサーバメニューへ」をクリック
「ゾーン編集」をクリック
サーバのIPアドレスを入力して送信
IPアドレスが入力されていたら成功。
これで設定は終わり。 独自ドメインとIPアドレスが紐付いてるか確認する。
$ nslookup ドメイン名
すると、まだ設定が反映されていない場合はこんなエラーが出る。
5〜10分くらい待って再度コマンドを打ってみると成功する。よって、エラーが出ても焦らずコーヒーでも飲んで休憩したらOK。
成功するとこんな感じに。
Server: xxx.xxx.xx.x Address: xxx.xxx.xx.x#xx Non-authoritative answer: Name: ドメイン名 Address: IPアドレス
成功！ これでドメイン関連の設定は終了。 次は、いよいよvirtualhostの設定に入っていきます。
3. Virtualhost 設定
$ ssh ユーザー名@IPアドレス
ポート番号を調整している場合は
$ ssh -p ポート番号 ユーザー名@IPアドレス
無事Linuxに入れたら、homeの下にdemo/public_htmlディレクトリを作る。
$ sudo mkdir /home/demo/public_html
慣れていない場合は、ディレクトリをひとつずつ移動して作っていってもいい。
$ cd /home
$ mkdir demo
$ cd demo
$ mkdir public_html
といった感じ。
次に、サブディレクトリを作る。
$ sudo mkdir -p /home/demo/public_html/取得したドメイン名/{public,private,log,backup}
（-pオプションで全部いっきに作ってくれる）
たとえば、test-dayo.workというドメイン名を取得したのなら、このようになる。
$ sudo mkdir -p /home/demo/public_html/test-dayo.work/{public,private,log,backup}
{public,private,log,backup}とは、test-dayo.workディレクトリの中にpublic,private,log,backupという4つのサブディレクトリを作るという意味。
全体的なディレクトリの構造はこんな感じになっている。
/home/ ├── demo │ └── public_html │ └── test-dayo.work │ ├── backup │ ├── log │ ├── private │ └── public
ちなみに、これはtreeコマンドといって、ディレクトリをツリー表示できる便利なやつ。sudo apt-get install treeでインストール。わかりにくいLinuxのディレクトリ構造を可視化してくれるのでとてもおすすめ。
ちなみにちなみに、私はここでtest-dayo.workの名前を間違えてしまったので、以下のコマンドで名前を変更した（作り直すのも面倒だったので）。
$ sudo mv 変更前のファイル名 変更後のファイル名
次は、表示させるためのオリジナルのhtmlを作る。
3-2. HTMLを作成する
vimを使って、/home/demo/public_html/test-dayo.work/public/にindex.htmlを作る。
$ sudo vim /home/demo/public_html/test-dayo.work/public/index.html
VScodeなどでhtmlを用意してコピペをするとラクちん。
作成例：
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> </head> <body> <h1>テストだぜぇ</h1> </body> </html>
iを押して文字入力モードにして、コピペ。ESCを押してビジュアルモードにした後、:wqを押して、上書き保存。
3-3. 設定ファイルの作成
まず、次の2つのディレクトリを作る。
$ sudo mkdir /etc/nginx/sites-available $ sudo mkdir /etc/nginx/sites-enabled
（etcディレクトリには設定に関するファイルがある）
次に、設定ファイルを作る。
$ sudo vim /etc/nginx/sites-available/ドメイン名
例：
$ sudo vim /etc/nginx/sites-available/test-dayo.work
vimが開いたら、iを押してインサートモードに入り次の設定を書く。
いたるところにドメイン名があるので、自身の独自ドメインを書こう。私は面倒なのでVScodeにこれをコピペして、test-dayo.workの部分を一括置換した。
server {
listen 80;
server_name www.test-dayo.work;
access_log /home/demo/public_html/test-dayo.work/log/access.log;
error_log /home/demo/public_html/test-dayo.work/log/error.log;
location / {
root /home/demo/public_html/test-dayo.work/public/;
index index.html index.php;
}
}
server {
listen 80;
server_name test-dayo.work;
access_log /home/demo/public_html/test-dayo.work/log/access.log;
error_log /home/demo/public_html/test-dayo.work/log/error.log;
location / {
root /home/demo/public_html/test-dayo.work/public/;
index index.html index.php;
}
}
ここで、とっても大事で、大ハマリポイントがあるので注意してほしい。
上記のコードをそのままコピペすると、文字列の左側全体に全角が入ってしまうことがある。すると、後で100%エラーが出てしまう。私はそれに気づかず半日くらいずっとハマっていた・・・。
どういうことかというと、こんな感じ。
私はこれを「全角の罠」と呼んでいる。
おそらくあなたは上記のコードをコピペすると思うので、次のサイトで全角が入っているかチェックしておこう。
全角が入っていたら、VScode等で全角を消して、タブやスペースキーなどを使って半角でインデントを揃える。これほんとに大事。
全角もなく、無事にコピペできたら、escを押し、:wqで保存、終了。
次に、/etc/nginx/sites-available/test-dayo.workをnginxにしっかり読み込んでもらうための設定をする。あと少しなので頑張ろう！
3-4. 設定を反映する
さきほど作った、/etc/nginx/sites-enabledに関しての設定。
nginxは起動時に、sites-enabledのディレクトリから設定ファイルを読み込む。しかし、sites-enabledには直接書かずに、別に作ったsites-availableから読み込むシステムになっている。なぜ？とは思うだろうが、そうなっているというだけ。
つまり、sites-enabledとsites-availableをつなげる処理をする必要がある。これを「シンボリックリンクを張る」という。
シンボリックリンクを張る
$ sudo ln -s ファイルA ファイルB
今回だとこんな感じ
$ sudo ln -s /etc/nginx/sites-available/ドメイン名 /etc/nginx/sites-enabled/ドメイン名
例：
$ sudo ln -s /etc/nginx/sites-available/test-dayo.work /etc/nginx/sites-enabled/test-dayo.work
「あれ？sites-enabledにtest-dayo.workなんてファイル作った？」と思った人はするどい。作ってません。ですが上記コマンドを使えば作ってくれます。便利ですねー。
シンボリックリンクの設定ができているか確認しておく。
ls -l /etc/nginx/sites-enabled/
3-5. 設定ファイルを反映する
最後に、作成した設定ファイルを反映させる処理をする。
/etc/nginx/nginx.confというファイルにコードを1行追加。
$ sudo vim /etc/nginx/nginx.conf
最後の行にこちらを追記
include /etc/nginx/sites-enabled/*;
こうなる。
設定がおかしくないか、チェック。
$ sudo /etc/init.d/nginx configtest
成功したら次のように表示される。
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
3-6. nginxを再起動、表示確認
では、nginxの再起動をしよう。
$ sudo /etc/init.d/nginx stop $ sudo /etc/init.d/nginx start
これでOK！ では、設定した2つのサイトをWebブラウザから見てみよう。
- www.test-dayo.work
- test-dayo.work
これは記事用なので表示できないが、どちらのURLを入れても、オリジナルのhtml(index.html)が表示されているはず！
できたー！
