ねこテニ

猫とテニス。

広告

※このエリアは、60日間投稿が無い場合に表示されます。記事を投稿すると、表示されなくなります。

プログラミングビギナーNekoteniがあなたに贈る!NginxでVirtual Hostの巻

2014年10月22日 | プログラミング
NekoteniがNginxを〜♪嫌いなんじゃない〜♪
NginxがNekoteniを〜♪嫌ってるんだ〜♪

Nginxを無事インストールし終えたNekoteni。
さて、次はVIrtual Hostに挑戦します。
(何か、テレビのナレーションみたいですね)

プログラムビギナーのNekoteniが辿った軌跡が皆様のお役に立てば幸いです。


【前提】
・NekoteniはさくらのVPS上のDebianを使っている(自分のMacではない)。
・Nekoteniはお名前.comでドメインを取った。
・sslはVirtual Hostのサイトに適用した。

ビギナーであるがゆえに気をつけなければいけなかったポイントを【Beginner's Point】(青文字)として記載しています。
わかっている人にとっては当たり前のことなので、青い文字は飛ばして黒い文字赤い文字だけ追って行って下さい。


【Virtual Hostを設定する】
バーチャルホスト(Virtual Host)とは
 1つのサーバで複数のドメインを運用する技術のことで、Webサーバ、メールサーバなどで利用される。by Wikipedia

【Beginner's Point】
こまけーことはいいんだよ。sakura.ne.jpじゃなくて、自分の好きなドメイン(nekoteni.comとかnikukyu.comとか)が使いたいんだよ!という気分でこの設定をやってました。
まぁ、あながち間違いじゃない。動機としては十分です。



【お名前.comでドメインを取得する】
まず、お名前.comでドメインを取得します。

取得するドメインは何でもいいんですが、小額とはいえお金がかかるので、しばらく使えそうなドメインにするといいかも。
Nekoteniは肉球の画像をたくさん集めたサイトを作りたかったので、お名前.comのトップページで「nikukyu」でドメインを探してみました。

残念ながら.comと.netはsold out。
他に何かいいのないかなーと探したら.clubというのがありました。
おお、いいじゃん。nikukyu.club。280円。

さくっと購入。はい、次。


【お名前.comのネームサーバを登録する】
ネームサーバーとは

さくらVPSの情報をお名前.comに、お名前.comで取得したドメイン情報をさくらVPSに、それぞれ登録します。
片方だけじゃだめです。両方です。

新しく取得したドメインにさくらVPSのネームサーバを登録します。
お名前.comのサイトのドメインNAVIにログインします。
手順はこちら→やまだ 日記様


【さくらインターネット側でドメインの登録をする】
さくらインターネット側Vにお名前.comで取得したドメインの情報を登録します。
さくらインターネットの会員ページへログインします。
手順はこちら→やまだ 日記様


【NginxにVirtual Hostの設定をする】
さて、ここまではけっこう順調に進みます。
問題はこれからです。
お名前.comとさくらインターネット、双方の設定が済んだら、今度はNginxにVirtual Hostの設定をします。

以下の設定方法はこちらのサイト→ nginx @ ウィキを参考にしています。

まず、Virtual Host用のデータを入れておくディレクトリ(ファイル)を作ります。

$ sudo mkdir /home/demo/public_html
mkdir : make directory ディレクトリ(ファイル)を作って下され

次にサブフォルダを作ります。

$ sudo mkdir -p /home/demo/public_html/nikukyu.club/{public,private,log,backup}
「nkukyu.club」の部分をご自分で取ったドメイン名にして下さい。
mkdir -p : 指定したディレクトリをサブディレクトリごと作って下され

ディレクトリ(ファイル)の場所はここです(赤太字)
/ ルートディレクトリ (Windowsで言うとCドライブ、みたいなもの)

├ /bin 一般ユーザー向けの基本コマンド

├ /boot 起動に必要なファイル

├ /dev デバイスファイル

├ /etc 設定ファイル
| ├ /init.d システム (PC)が起動した時に、自動的に実行するプログラムが置いてあるらしい。
|  ├ nginx ←ここにNginxの実行ファイルがいます。Nginxを起動させる時、/etc/init.d/nginx startしましたね。


├ /home ユーザーのホームディレクトリ
| ├ /demo ←Virtual Hostのデータを入れとくディレクトリ(ファイル)
|   ├ /public_html
|    ├ /nikukyu.club ←サブフォルダ
|     ├ /public
|     ├ /private
|     ├ /log
|     ├ /backup


├ /lib 共有ライブラリ

├ /mnt ファイルシステムの一時的なマウントポイント用ディレクトリ

├ /media CD-ROMなどのリムーバブル媒体(media)のマウントポイント

├ /opt 実行時に書き換えられないアプリケーションソフトウェアパッケージ

├ /proc カーネルやプロセスに関する情報をテキストで表示する仮想ファイルシステム

├ /root root用ホームディレクトリ

├ /sbin システム管理用コマンド

├ /tmp ファイルなどを一時的に保管するディレクトリ

├ /srv システムに提供されたサイト固有のデータ

├ /usr プログラムやカーネルソース
| ├ /share
|  ├ /nginx - index.html ←Welcome to Nginx!が入ってたのはここ!


└ /var システムログなどの動的に変化するファイル

Nginxは複数のドメインを管理できるので、もしもNekoteniがnekoteni.comという違う新しいドメインを取得したら、
$ sudo mkdir -p /home/demo/public_html/nekoteni.com/{public,private,log,backup}
ってやって新しいフォルダを作ります。


では、nikukyu.clubのトップページとも言えるindex.htmlを作りましょう。
$ sudo vim /home/demo/public_html/nekoteni.club/public/index.html

vimって指定しているのでコンソール画面でvimの画面が立ち上がったはずです。
「i」を押してINSERTモードにして、文字を入れて行きましょう!
※黒文字は入力しないで下さいね。

<html>
<head>
<title>nikuk.club</title> ←Chromeのタブにこれが表示されます。
</head>
<body>
Welcome to Nikukyu.club! ←Webの画面にこれが表示されます。
</body>
</html>


bodyの中身はもっといっぱい書いて遊んでもいいと思います。
表示された時の嬉しさが倍増です!

さて、index.htmlが入っている場所はこちらです。Welcome to Nginx!があった所とは違うことを確認しておいて下さい。
/ ルートディレクトリ (Windowsで言うとCドライブ、みたいなもの)

├ /bin 一般ユーザー向けの基本コマンド

├ /boot 起動に必要なファイル

├ /dev デバイスファイル

├ /etc 設定ファイル
| ├ /init.d システム (PC)が起動した時に、自動的に実行するプログラムが置いてあるらしい。
|  ├ nginx ←ここにNginxの実行ファイルがいます。Nginxを起動させる時、/etc/init.d/nginx startしましたね。


├ /home ユーザーのホームディレクトリ
| ├ /demo ←Virtual Hostのデータを入れとくディレクトリ(ファイル)
|   ├ /public_html
|    ├ /nikukyu.club ←サブフォルダ
|     ├ /public
|      ├index.html ←ここ!

|     ├ /private
|     ├ /log
|     ├ /backup


├ /lib 共有ライブラリ

├ /mnt ファイルシステムの一時的なマウントポイント用ディレクトリ

├ /media CD-ROMなどのリムーバブル媒体(media)のマウントポイント

├ /opt 実行時に書き換えられないアプリケーションソフトウェアパッケージ

├ /proc カーネルやプロセスに関する情報をテキストで表示する仮想ファイルシステム

├ /root root用ホームディレクトリ

├ /sbin システム管理用コマンド

├ /tmp ファイルなどを一時的に保管するディレクトリ

├ /srv システムに提供されたサイト固有のデータ

├ /usr プログラムやカーネルソース
| ├ /share
|  ├ /nginx - index.html ←Welcome to Nginx!が入ってたのはここ!


└ /var システムログなどの動的に変化するファイル


さぁ、これからちょっと面倒なことをします。
Virtual Hostの設定を作成します。

【Beginner's Point】
Virtual Hostの設定を作成・・・?さくらインターネットとお名前.com双方に設定したじゃん?何を設定すんの?とNekoteniは思いました。
設定してみてわかったのですが、例えて言うなら、さくらインターネットとお名前.comは空港のようなものです。日本の成田空港(お名前.com)とボラボラ島のボラボラ空港(さくらインターネット)に直行便ができたよ!な感じです。
で、この先の設定はボラボラ空港に着いた後どうやってフォーシーズンズリゾートボラボラ(nikukyu.com)に行くか、そういう設定だと思って下さい。


vimで設定ファイルを作成します。
$ sudo vim /etc/nginx/sites-available/nikukyu.club

このコマンドを打つと、新しいファイル(=何にも書いてないファイル)が表示されます。
その中に下記を書き込んで下さい。
「nikukyu.club」をご自分のドメイン名にするのを忘れないように!

server {
   listen 80;
   server_name www.nikukyu.club;
   access_log /home/demo/public_html/nikukyu.club/log/access.log;
   error_log /home/demo/public_html/nikukyu.club/log/error.log;
   location / {
        root /home/demo/public_html/nikukyu.club/public/;
        index index.html index.php;
        }
   }
server {
   listen 80;
   server_name nikukyu.club;
   access_log /home/demo/public_html/nikukyu.club/log/access.log;
   error_log /home/demo/public_html/nikukyu.club/log/error.log;
   location / {
        root /home/demo/public_html/nikukyu.club/public/;
        index index.html index.php;
        }
   }


【Beginner's Point】
この二つの塊、すごく良く似てませんか?Nekoteniは最初、何で同じものを2つも作るんだ?と思いました。
違いがちゃんとあります。1つめのserver_nameは「www.nikukyu.club」、2つめは「nikukyu.club」。
そう、2つ目は「www」がないんです。
この2つを設定しておくことで、Chromeのアドレスバーにwww.nikukyu.clubと入れても、nikukyu.clubと入れても、どっちでもindex.htmlが表示されます。便利ですね。

この中身を日本語っぽく言うと、
<サーバー設定>
・nikukyu.clubはさくらインターネットに入ってるサーバーの80番ポートを使って下さいね。
・サーバーの名前はwww.nikukyu.club(またはnikukyu.club)です。
・アクセスログは/home/demo/public_html/nikukyu.club/log/access.log;に書いて下さいね。
・エラーログは/home/demo/public_html/nikukyu.club/log/error.log;に書いて下さいね。
・場所のご案内。rootファイルは/home/demo/public_html/nikukyu.club/public/;です。indexはindex.html index.php;のどっちかです。
こんな感じです。指示書みたいですね。


書き込んだら「ESC」ボタンでノーマルモードに戻して、「:wq」とタイプして上書き(w)とvimの終了(q)をします。

設定はあともう一つだけ。
さっき書いた設定をnginxが読んでくれるようにします。

$ sudo ln -s /etc/nginx/sites-available/nikukyu.club /etc/nginx/sites-enabled/nikukyu.club
ln -s : ファイル・ディレクトリにリンクを設定してよ(ln)シンボリックリンク(-s)でね!。

【Beginner's Point】
Nekoteniが踏んだ轍を踏んではいけません!
In(アイの大文字とエヌの小文字)ではなく、ln(エルの小文字とエヌの小文字)です!
lnはlinkの省略文字です。わかると間違えないのですが、ガイドを見ながら作業を進めてるだけだと見事に間違います(nekoteniはまんまと間違えて、「Inなんていうコマンドねーよ」と蹴られました(泣))。

Nginxは、起動時に、ディレクトリ/etc/nginx/sites-enabledに入っている設定ファイルを読み込みます。
ですから、有効にしたいvirtual Hostについては、sites-available/にある設定ファイルへのシンボリックリンクを、sites-enabled/の中に作っておかなければなりません。
なので、こういうリンクを貼る作業をします。
プログラミングビギナーとしては、sites-enabledを起動時に読みに行くなら最初からsites-enabledに設定書けばいいじゃん、と激しく思ったのですが、sites-availableに書いて、sites-enabledにリンクを貼るのがお約束なのだそうです。
お約束なんじゃしょうがないですよね。


Virtual Hostの設定とリンクの保存先はこちら。
/ ルートディレクトリ (Windowsで言うとCドライブ、みたいなもの)

├ /bin 一般ユーザー向けの基本コマンド

├ /boot 起動に必要なファイル

├ /dev デバイスファイル

├ /etc 設定ファイル
| ├ /init.d システム (PC)が起動した時に、自動的に実行するプログラムが置いてあるらしい。
|  ├ /nginx ←ここにNginxの実行ファイルがいます。Nginxを起動させる時、/etc/init.d/nginx startしましたね。
|   ├ /sites-available - nikukyu.club ←Virtual Hostの設定を書いたファイル
|   ├ /sites-enable - nikukyu.club ←sites-availableの内容を見にいけよーというシンボリックリンクが貼られたファイル。


├ /home ユーザーのホームディレクトリ
| ├ /demo ←Virtual Hostのデータを入れとくディレクトリ(ファイル)
|   ├ /public_html
|    ├ /nikukyu.club ←サブフォルダ
|     ├ /public - index.html ←nikukyu.clubのトップページ
|     ├ /private
|     ├ /log
|     ├ /backup


├ /lib 共有ライブラリ

├ /mnt ファイルシステムの一時的なマウントポイント用ディレクトリ

├ /media CD-ROMなどのリムーバブル媒体(media)のマウントポイント

├ /opt 実行時に書き換えられないアプリケーションソフトウェアパッケージ

├ /proc カーネルやプロセスに関する情報をテキストで表示する仮想ファイルシステム

├ /root root用ホームディレクトリ

├ /sbin システム管理用コマンド

├ /tmp ファイルなどを一時的に保管するディレクトリ

├ /srv システムに提供されたサイト固有のデータ

├ /usr プログラムやカーネルソース
| ├ /share
|  ├ /nginx - index.html ←Welcome to Nginx!が入ってたのはここ!


└ /var システムログなどの動的に変化するファイル

さぁ、設定はここまでです!
設定を変えたので一度Nginxを終了して、再起動しましょう。
注意:このとき、sudo /etc/init.d/nginx restartを使わないこと。再起動しないことがよくあるそうです。
$ sudo /etc/init.d/nginx stop ←Nginx停止
$ sudo /etc/init.d/nginx start
←Nginx起動

Chrome(ブラウザ)でアクセスしてみましょう!
http://www.nikukyu.club
「nikukyu.club」をご自分のドメイン名にするのを忘れないように!

正常に動作していれば、画面にWelcome to Nikukyu.club!と表示されます(Chromeのタブにはnikukyu.clubと表示されているはずです)。

ついでにもう一つ。
http://nikukyu.clubをChromeで表示させてみましょう。
sites-availableに2つ設定しましたね。だからwwwがなくてもwww.nikukyu.clubと同じ表示がされます。

【Beginner's Point】
おめでとうございます!!これで自分で取ったドメインを使ってサイトを表示させることができるようになりました!
Nekoteniは表示できた時、嬉しさのあまり、隣で寝ていた猫を高い高いして部屋中をぐるぐる回りました(あとで猫にものすごく怒られたので、おやつのカツオと猫缶を献上して許してもらいました・・・)。
でもこの小さな喜びが明日への大きな糧になります。
Nekoteniはこの記事を、自分のようなプログラミングビギナーがNginxであんまり苦労しないように書きましたが、書く事でやっていた時の辛かったこと、嬉しかったこと、知識が曖昧な所、意外とちゃんと憶えていたところを発見することができました。
メモ程度のものでもいいので、やったことを書き出してみるといいですよ。
いえいえ、小煩い説教じゃないんですよ。自分、こんなにがんばったんやーってなるんです。精神衛生上よろしいのです。それだけです。
ジャンル:
ウェブログ
コメント   この記事についてブログを書く
この記事をはてなブックマークに追加
« プログラミングビギナーNekot... | トップ | プログラミングビギナーNekot... »
最近の画像もっと見る

コメントを投稿


コメント利用規約に同意の上コメント投稿を行ってください。

数字4桁を入力し、投稿ボタンを押してください。

あわせて読む

トラックバック

この記事のトラックバック  Ping-URL
  • 送信元の記事内容が半角英数のみのトラックバックは受け取らないよう設定されております。
  • このブログへのリンクがない記事からのトラックバックは受け取らないよう設定されております。
  • ※ブログ管理者のみ、編集画面で設定の変更が可能です。