派遣で働くエンジニアのスキルアップを応援するサイト

PRODUCED BY RECRUIT

【コラム】Webアプリが動くとき、裏側で何が行われているか。「使える」知識として基礎を身につけよう

利用者がWebサイトを開くとき、「URLを入力する」「リンクをクリックする」「検索欄に入力する」などの方法がありますが、いずれの方法でも目的のページの内容が表示されます。

このとき、裏側で何が行われているか、一般の人が知る必要はありません。しかし、何らかのトラブルがあってページの内容が表示されないとき、エンジニアであればその原因を突き止める必要があります。

そこで今回は、Webアプリが動くとき(利用者がアクセスしたとき)、裏側で使われている技術やその一連の動きについて解説します。

【講師】増井 敏克さん
【講師】増井 敏克さん
増井技術士事務所代表。技術士(情報工学部門)。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『おうちで学べるセキュリティのきほん』『プログラマ脳を鍛える数学パズル』『エンジニアが生き残るためのテクノロジーの授業』『図解まるわかりセキュリティのしくみ』(以上、翔泳社)、『シゴトに役立つデータ分析・統計のトリセツ』『プログラミング言語図鑑』(以上、ソシム)がある。

WebブラウザからWebサーバへの接続

・スキーム

利用者がURLを入力したとき、そのURLはただの文字列です。この文字列から、どのような処理が必要なのかを解釈する必要があります。まずはURLの構成から見ていきましょう。

f:id:itstaffing:20191112133644j:plain

URLの先頭(左端)にあるのが「スキーム」です。ここには表のように、さまざまな内容が指定されます。httpやhttpsであればWebサーバにアクセスしますが、mailやtelなどが指定されていると、メールや電話などのアプリケーションを開くこともあります。

f:id:itstaffing:20191112143032j:plain

httpやhttpsが指定されるとWebサーバにアクセスしますが、そのWebサーバの場所を指定するのが、続く「ホスト名」の部分です。

・ホスト名

ホスト名の部分には、ドメイン名だけでなく、BASIC認証のIDとパスワード、サーバのサブドメイン、ポート番号なども指定できます。BASIC認証のIDとパスワードは最近のWebブラウザでは拒否される場合もありますが、スクレイピングなどを行う場合には、いまだによく使われます。

f:id:itstaffing:20191112133648j:plain

・DNS

ここでサブドメインも含めたホスト名がわかりますが、ホスト名もただの文字列です。そこで、このホスト名からWebサーバのIPアドレスを調べる必要があります。このときに使われるのが「DNS(Domain Name System)」で、図のように階層的に管理してIPアドレスを調べられるようになっています。

f:id:itstaffing:20191112133651j:plain

・ルーター

DNSによって接続先のWebサーバのIPアドレスがわかると、次にそのIPアドレスまでの「経路」を調べる必要があります。ここで登場するのが「ルーター」で、名前の通りルートを案内する機器です。

事前にさまざまな宛先への経路をルーティングテーブルとして表を作成しています。この表に従って、同じネットワークなら内部で、異なるネットワークなら外部へ転送します。

f:id:itstaffing:20191112133655j:plain

・ポート番号

経路がわかると、Webサーバの機器まで到達できますが、その機器ではWebサーバだけが動いているとは限りません。メールサーバも同じ機器で運用しているかもしれませんし、データベースサーバも兼ねているかもしれません。

ここで必要になるのが「ポート番号」です。1台の機器に1つのIPアドレスが与えられていても、ポート番号を見てその機器の中で動いている複数のサーバを識別できます。

Webサーバの場合、httpであれば80番、httpsであれば443番が使われることが一般的です。他にも表のようなポート番号が一般的に使われており、1023番以下の番号は「ウェルノウンポート」と呼ばれます。

f:id:itstaffing:20191112133658j:plain

表に挙げた以外にも多くのポート番号がありますし、1024番以上であれば自由に設定でき、開発用のWebサーバとして8000番や8080番などがよく使われます(URLのホスト名部分で指定して使う)。

Webサーバでの処理

・HTTPリクエスト

Webサーバに到達すると、次は「HTTP(Hypertext Transfer Protocol)」というプロトコルで通信を行います。このときに使われるのが、HTTPリクエストとHTTPレスポンスです。

f:id:itstaffing:20191112133701j:plain

HTTPリクエストでは、1行目にメソッドやURL、バージョンなど。2行目以降にホスト名やユーザエージェントなどが書かれています。メソッドには、表にあるようないくつかの指定がありますが、GETとPOSTが多く使われています。

f:id:itstaffing:20191112144301j:plain

実際には、次の図のようなリクエストが送信されます。これらは、各Webブラウザの開発者モードを使うことで確認できます。

f:id:itstaffing:20191112133704j:plain

・HTTPレスポンス

この内容を受け取ったWebサーバは、書かれている内容に従って、HTTPレスポンスを返します。

HTTPレスポンスでは、1行目にステータスラインがあり、そこに書かれているステータスコードによって、エラーの有無や内容がわかります。よく見かける例として、表のようなステータスコードがあります。

f:id:itstaffing:20191112144654j:plain

なお、静的なWebサイトの場合は、指定されたファイルをWebサーバが返すだけですが、動的なWebアプリの場合には、アプリケーションサーバやデータベースサーバなどが連携して動作します。

f:id:itstaffing:20191112133706j:plain

また、同じ利用者からのアクセスを識別するために、Cookieを発行し、次回のアクセスの際に送信することも必要になります。

Webブラウザでの表示

・読み込むファイル

Webサーバからのレスポンスを受け取ったWebブラウザは、その内容を表示しますが、大きく分けて以下の4つのステップがあります。

1.ダウンロード
2.スクリプトの実行
3.スタイル
4.画面への描画

ここで、1つのWebページを表示するときには、読み込んでいるファイルの数だけダウンロードが発生することに注意しなければなりません。

画像ファイルを複数読み込んでいれば、それだけダウンロードが発生しますし、スタイルシートのCSSファイル、プログラムを書いたJavaScriptのファイルなど、最近のWebページは複数のファイルで構成されています。

JavaScriptの実行ができなければ、画面のレイアウトができない場合もあるため、これらを理解しておかなければ、ダウンロードされたとしても、Webブラウザの表示に時間がかかることになってしまいます。

f:id:itstaffing:20191112133709j:plain

JavaScriptの実行→画面のレイアウトが一般的な流れですが、実際にはロードバランサー(負荷分散装置)やキャッシュ、プロキシサーバ、CDNといった技術が使われている可能性も考慮する必要があります。

ロードバランサーが使われていると、利用者が同じWebサーバにアクセスしていると思っていても、異なる筐体にあるサーバにアクセスしている可能性があります。

・キャッシュ

キャッシュが有効になっていると、Webサーバにアクセスしていると思っていても、実際にはWebブラウザに保存されている内容を表示している可能性もあります。

このため、画像などは毎回ダウンロードしていない場合も多いでしょう。DNSの通信もキャッシュされていますので、そのたびに問い合わせが発生するわけではありません。

プロキシサーバがあれば、他の人が閲覧したものを一時的に保存しておくことで、Webサーバへの通信を減らすことができますし、CDNを利用すれば画像や動画など、大量のファイルがあってもWebサーバの負荷を減らせる可能性があります。

ただし、Webアプリの場合など、利用者によって返す内容を変えている場合は、キャッシュしてしまうと個人情報の漏洩などにつながるリスクもあります。コンテンツの内容に応じて、何をキャッシュするのか(何がキャッシュされているのか)、考える必要があります。

おわりに

資格試験に向けた対策などで勉強している人の場合、個々の用語は理解していても、それがどの場面で使われているのか知らないという人を見かけます。「使える」知識として身につけるためには、実際にコマンドを入力する、Webブラウザの開発者機能を使う、脆弱性診断ツールを使う、パケットキャプチャを使うなど、さまざまな方法で体感することが大切です。いろいろなツールを試しながら、その動作を確認してみてください。

このコラムの内容は、2019年9月25日に開催したイベント「Webアプリが動くとき、裏側で何が行われているか知ろう~基礎からのプログラミングリテラシー~」にて、より詳しく増井さんにご解説いただきました。株式会社リクルートスタッフィングが運営するITSTAFFINGでは、弊社に派遣登録いただいている皆さまのスキル向上を支援するこのようなイベントを、定期的に開催しています。皆さまのご参加をお待ちしております。