Vagrantで立ち上げたUbuntu & Nginxを通してローカルに置いたindex.htmlを見る

ぼくは普段自分の記録を束ねるためのローカルブログをRijiで作っていて、metacpan.org

でも最近ちょっと忙しくしてるうちにそれを乗せている仮想マシンが古くなって(CentOS6.5とか)、Vagrantで使いづらい感じになっていたので(具体的にはupした時にエラーが出てうまく解消できない)、いっそこれもUbuntuに乗せて、ついでにApacheではなくNginxというのを使ってみて、これまでとくに馴染みがなかったそれらに同時に慣れるきっかけとしてみよう、という流れで掲題のことをするまでのメモです。

Ubuntu環境を作る

・・については、前回の記事に書きました。note103.hateblo.jp

今回もとりあえずubuntu-lessonというディレクトリで。

$ cd ubuntu-lesson

前回生成されたVagrantfileを若干書き換えます。具体的には・・

  # config.vm.network "private_network", ip: "192.168.33.10"

これの行頭コメントを外す。

または、もし同ネットワーク内の別デバイスから同じページを見たければ、

  config.vm.network "public_network", ip: "10.0.1.100", bridge: "en0: Wi-Fi (AirPort)"

みたいにしておく。(上記と併記も可)

で、vagrant up & ログイン

$ vagrant up
$ vagrant ssh

こんな感じで。

vagrant@vagrant-ubuntu-trusty-64:~$

nginxを入れる

・・については、以下が参考になりました。qiita.com

そのうち、最後の一番シンプルな方法で。

$ sudo apt-get update
$ sudo apt-get install nginx -y

スタートさせて。

$ sudo service nginx start

確認して。

$ service nginx status
 * nginx is running

で、さっき設定したアドレスを見てみる。

f:id:note103:20150929235343p:plain

OK!

shared folderの設定

次、ubuntu-lessonディレクトリに置いたindex.htmlを見れるようにする。
というか、それがとりあえず今回のゴール。

と、ここでそういえば、CentOSだったらたしかindex.htmlって /var/www/html とかに置いた気がするけど、nginxって違うんだっけ・・と思って、findの練習もかねて探してみたり。

$ cd /
$ find . -name 'index.html' 2>/dev/null

こんな感じで出てきた。

./usr/share/nginx/html/index.html
./usr/share/doc/adduser/examples/adduser.local.conf.examples/skel.other/index.html
./usr/share/doc/gdisk/index.html
./usr/share/doc/python-configobj/api/index.html
(略)

一番上のがあやしそうなので、見てみる。

$ cat /usr/share/nginx/html/index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
(略)

あってるっぽい。

じゃあ、それとローカルのディレクトリをつなげよう。というのが以下の作業。

まず、ubuntu-lessonの中にindex.htmlを作成。

# Macの方
$ cd ubuntu-lesson
$ echo 'Hello, nginx!' > index.html
$ cat index.html
Hello, nginx!

次、Ubuntu内で現在のhtmlディレクトリをバックアップ&削除。

まずバックアップ。

# Ubuntuの方
$ cd /usr/share/nginx/
$ sudo cp -r html html_orig
$ ls
html html_orig

で、後からhtml/にシンボリックリンクを張るためにhtml/を削除。

$ sudo rm -rf html
$ ls
html_orig

で、シンボリックリンクを張る。

$ sudo ln -s /vagrant html
$ ls -F
html@ html_orig/
$ ls html
Vagrantfile index.html

つながってますね。ではあらためて192.168.33.10を見てみる。

f:id:note103:20150929235421p:plain

OK!!

ついでに、10.0.1.100をiPhoneから見てみる。

f:id:note103:20150929235432p:plain:w250

おつかれさまでした。