LoginSignup
26
19

More than 5 years have passed since last update.

docker上のnginxのドキュメントルート

Last updated at Posted at 2018-02-08

dockerコンテナ上で起動しているnginxからhtmlファイルを返却させて、ブラウザ上に任意のwebページを表示させる方法をurlの意味や「サーバがhtmlファイルを返却するということ」についてという観点でまとめました。

まずは初期設定で http://localhost:80 にアクセスした状態です。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3232323236372f39323662336563612d336265382d383365352d376361652d6338303466663464326436342e6a706567.jpeg

これはlocalhost(127.0.0.1)に対してhttpプロトコルでリクエストしたら
localhostで起動しているnginxがhtmlファイルをレスポンスしたので
この画面が表示されています。
ということはこのhtmlファイルがnginxが起動しているサーバのどこかに存在しているということです。
まずはURLの意味を探って見ましょう。

URLの意味

例1

http://blog.example.jp/entries/1

というURLがあるとします。

http://

まず最初にプロトコルを指定しています。
他にもhttps:// ftp:// git:// ssh:// などがあります。通信方法を表しています。

次に

example.jp

これはホスト名です。127.0.0.1のようにipアドレスそのままの場合もあります。

/entries/1

ホスト名の後には階層を表すパスが続きます。
そして今回のこのwelcome画面は http://localhost:3000 というリクエストをしたら表示されました。
httpプロトコルでlocalhostというホストにパスを指定しない(つまり/[ルートディレクトリ])をリクエストしています。
つまり、ルートにこのhtmlファイルがあると仮定できます。
しかし実際に見てみると...
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3232323236372f30326564316263382d323730662d636439322d383734312d3362646137653661373532332e706e67.png
このように、それらしいものは見当たりません。
実はほとんどのサーバはルートディレクトリをセキュリティの観点上、公開できません。
そのため特定のディレクトリを外部からアクセス可能な最上位のディレクトリとして仮想的に設定します。
それをドキュメントルートと呼びます。
つまり、nginxのドキュメントルートがわかれば任意のhtmlファイルを返却させることができます。
nginxのドキュメントルートの初期設定は/usr/share/nginx/htmlが設定されています。
以下の設定ファイルを変更する事でドキュメントルートを変えることもできます。

default.conf

スクリーンショット 2018-02-09 0.31.30.png

location / {
    root    /usr/share/nginx/html;
    index   index.html index.htm;
}

ドキュメントルートとパスと表示するファイルが定義されています。
つまり、ルートにアクセスがあったら /usr/share/nginx/htmlディレクトリにある、
index.htmlまたはindex.htmを返すという定義ですね。

実際にドキュメントルートを見てみるとindex.htmlがあります。
スクリーンショット 2018-02-09 0.38.06.png

vimエディタで内容を確認
スクリーンショット 2018-02-09 0.39.06.png

つまりここに自分で作ったファイルを配置すればhtmlファイルを表示できるということでしょうか。やってみましょう。

top.htmlとして以下のようなhtmlを作ってドキュメントルート(index.htmlと同じディレクトリ)に配置します。
スクリーンショット 2018-02-09 0.42.47.png

スクリーンショット 2018-02-09 0.44.33.png

http://localhost:80/top.html にアクセス

スクリーンショット 2018-02-09 0.49.40.png

表示できました。

画面遷移

このように画面のmemberにはまた別のurlが設定されています。
スクリーンショット 2018-02-09 0.53.19.png

なので、profile_page.htmlを作成して同じ所に配置してみましょう。
スクリーンショット 2018-02-09 0.54.47.png

top.htmlへアクセスしてmemberをクリック!
スクリーンショット 2018-02-09 0.49.40.png
                      ↓

スクリーンショット 2018-02-09 0.56.38.png

遷移できました。

現代において、静的なhtmlページを表示するだけのwebサイトはまず
需要がないかと思われますが、urlの意味とサーバがレスポンスを返すという意味がわかる事が重要ではないでしょうか。

26
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
19