# ページが表示される仕組みの理解
Web ページが表示されるまでの過程について、少し理解を深めます。
※ docker run コマンドで 起動済みにしてください。
※ http://localhost:3000/ (opens new window) にアクセスしてください。
初めから進めている場合、画面はこのようになっているはずです。 数多くのファイルを作成・コピーしましたが、実際の挙動を確認します。
今、 http://localhost:3000/ (opens new window) を開いた段階では、2 つのファイルが読み込まれています。
~~/public/index.html~~/public/favicon.ico
# index.html が読み込まれる理由
以下の条件が必要です。
- 条件: サーバーが起動している。
- 条件: サーバーに HTTP リクエストが到着する。
- 条件: Apache にリクエストが到着する。
- 条件: URL のパスがルート（
なしあるいは/）である。 - 条件: 返すべきファイル（
index.html）が然るべきところにある。
# 条件: サーバーが起動している。
サーバーは docker run コマンドで起動しました。
# 条件: サーバーに HTTP リクエストが到着する。
Google Chrome で http://localhost:3000/ にアクセスしました。
localhost は自動的に自身のコンピュータ宛としてドメイン解決されます。
# 条件: Apache に HTTP リクエストが到着する。
サーバーを起動する際にポート番号を 3000 番で開放しました。（コンテナ内部では 80 番 に変換されています。）
Google Chrome で http://localhost:3000/ にアクセスする際に ポート番号 3000 番 を指定しているため、
HTTP リクエストは 3000 番 を開放中の Docker コンテナに流れます。
Docker コンテナの中には Apache が起動しているため Apache に HTTP リクエストが到着します。（コンテナ内部では 80 番 で受け取ります。）
# 条件: URL のパスがルート（なし あるいは /）である。
Google Chrome で http://localhost:3000/ にアクセスする際にパス(Path) / を指定しました。
:3000 の右の / のことです。
Apache は パスが ない 場合 あるいは / で終わる場合 は、標準で index.html を返却しようとファイルを探します。
# 条件: 返すべきファイル（index.html）が然るべきところにある。
URL のパスは、 / で始まります。Apache の場合、この URL のパスと フォルダの構造が一致しており、階層は / で区切って表現します。
つまり以下のようになります。※例外的にパスが / で終わる場合 index.html を返却します。
| URL (Path) | 返却するファイル （~~/public の中の..） |
|---|---|
http://localhost:3000/index.html | index.html |
http://localhost:3000/ | index.html |
http://localhost:3000/assets/main.css | assets ディレクトリの中 の main.css |
http://localhost:3000/favicon.ico | favicon.ico |
index.html 等のファイルはどこにあるのか
今回使用している Apache の設定では、コンテナ内の /usr/local/apache2/htdocs/ を起点としてファイルを探します。
つまり正確なファイル階層（絶対パスといいます）は以下のようになります。
| URL (Path) | 返却するファイルの絶対パス（コンテナ内） |
|---|---|
http://localhost:3000/index.html | /usr/local/apache2/htdocs/index.html |
http://localhost:3000/ | /usr/local/apache2/htdocs/index.html |
http://localhost:3000/assets/main.css | /usr/local/apache2/htdocs/assets/main.css |
http://localhost:3000/favicon.ico | /usr/local/apache2/htdocs/favicon.ico |
/usr/local/apache2/htdocs/ が起点である理由は、「そのような仕様のためだから」です。
用法は今回使用した Docker Hub イメージである httpd のページ (opens new window)に記載されており、
本来、使用するにはこれらの説明を読む必要があります。（本学習サイトで紹介したため、今回は読まなくても使用できます。）
docker run コマンドで起動する際に -v オプションで ~~/public の中身を /usr/local/apache2/htdocs/ にバインドマウント（同期）するように
指定したため、コンテナ内部から参照した際に、結果的にファイル階層が、上記の表と一致するために、返すべきファイルが見つかり、ファイルの中身を返却（レスポンス）します。
ブラウザは、そのデータを受け取り（受信）後、内容を解釈し、画面を描画（レンダリング）します。
# favicon.ico が読み込まれる理由
条件は index.html と同様で以下の通りです。
- 条件: サーバーが起動している。
- 条件: サーバーに HTTP リクエストが到着する。
- 条件: Apache にリクエストが到着する。
- 条件: URL のパスが
/favicon.icoである。 - 条件: 返すべきファイル（
favicon.ico）が然るべきところにある。
favicon.ico は画像です。http://localhost:3000/favicon.ico (opens new window) を開いて確認してください。以下のように画像が表示されます。
/favicon.ico はブラウザのタブの部分に表示される小さなアイコンです。
このアイコンはページを開く際に、ブラウザが自動的にリクエストを実行します。
index.html に何も書いていなくても、 そのページのドメイン + /favicon.ico に対して、リクエストを
実行し、favicon.ico ファイルがあるかどうか確認します。これは昔からあるブラウザの仕様です。
ico ファイルは画像ファイルですが、いくつかルールがあるため作成するには変換が必要です。 様々な便利ツール (Google 検索) (opens new window) がありますので、興味のある方はチェックしてみてください。
# 他のファイルを読み込むタイミング
画像等の素材ファイルは、今の時点では読み込まれません。 ただし、直接 URL を指定して開くと表示できます。
例: http://localhost:3000/assets/photos/1.jpg (opens new window)
これらの画像や動画を読み込むには index.html に img タグ等を使用して指定する必要があります。
タグやプログラムによって、読み込む必要がある場合に、ブラウザは 指定した URL に対してリクエストを発行します。
つまり、index.html に img タグ等を使用して画像 URL を指定すると、
まず ページの URL に対してリクエストを発行し、 index.html が読み込まれた後（レスポンス後）、ブラウザの解釈の結果、
追加で img タグに指定された画像 URL に対してリクエストを発行し、読み込む という流れになります。