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

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

まずは初期設定で http://localhost:80 にアクセスした状態です。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3232323236372f39323662336563612d336265382d383365352d376361652d6338303466663464326436342e6a706567.jpeg](https://qiita-image-store.s3.amazonaws.com/0/222267/870eca93-cd01-bd94-87d0-0471183a83f0.jpeg)



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

# URLの意味

例1

```http
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](https://qiita-image-store.s3.amazonaws.com/0/222267/4533001e-a9e1-4851-c433-1870e368fcd3.png)
このように、それらしいものは見当たりません。
実はほとんどのサーバはルートディレクトリをセキュリティの観点上、公開できません。
そのため特定のディレクトリを外部からアクセス可能な最上位のディレクトリとして仮想的に設定します。
それを__ドキュメントルート__と呼びます。
つまり、nginxのドキュメントルートがわかれば任意のhtmlファイルを返却させることができます。
nginxのドキュメントルートの初期設定は/usr/share/nginx/htmlが設定されています。
以下の設定ファイルを変更する事でドキュメントルートを変えることもできます。
#### default.conf
![スクリーンショット 2018-02-09 0.31.30.png](https://qiita-image-store.s3.amazonaws.com/0/222267/a52a1365-ac57-7025-e2e4-5e2c170d72dc.png)

```shell
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](https://qiita-image-store.s3.amazonaws.com/0/222267/5edee031-e0bc-9c56-558a-d7bf7bbaecfb.png)


vimエディタで内容を確認
![スクリーンショット 2018-02-09 0.39.06.png](https://qiita-image-store.s3.amazonaws.com/0/222267/0c7ce116-51e0-cc95-b151-7a120be03ec8.png)

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

top.htmlとして以下のようなhtmlを作ってドキュメントルート（index.htmlと同じディレクトリ)に配置します。
![スクリーンショット 2018-02-09 0.42.47.png](https://qiita-image-store.s3.amazonaws.com/0/222267/7749c79c-7cd1-40eb-12e7-2ef482110242.png)

![スクリーンショット 2018-02-09 0.44.33.png](https://qiita-image-store.s3.amazonaws.com/0/222267/6b02b7c7-763e-387f-cf42-5d8168410150.png)

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

![スクリーンショット 2018-02-09 0.49.40.png](https://qiita-image-store.s3.amazonaws.com/0/222267/426afd70-862e-e5fe-7b5e-dfd99f2a0432.png)

__表示できました。__

## 画面遷移
このように画面のmemberにはまた別のurlが設定されています。
![スクリーンショット 2018-02-09 0.53.19.png](https://qiita-image-store.s3.amazonaws.com/0/222267/31adc09c-a6af-84e4-d8f3-ab9b87913d6a.png)

なので、profile_page.htmlを作成して同じ所に配置してみましょう。
![スクリーンショット 2018-02-09 0.54.47.png](https://qiita-image-store.s3.amazonaws.com/0/222267/f35fa57f-360e-6cf6-e68b-bcf8074a6745.png)

top.htmlへアクセスしてmemberをクリック！
![スクリーンショット 2018-02-09 0.49.40.png](https://qiita-image-store.s3.amazonaws.com/0/222267/40e526ce-f62f-f0ad-a066-fd5bb2896331.png)
　　　　　　　　　　　　　　　　　　　　　　↓

![スクリーンショット 2018-02-09 0.56.38.png](https://qiita-image-store.s3.amazonaws.com/0/222267/686de62d-25fa-998d-4aaa-369a01be4018.png)

遷移できました。

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