社内勉強会用

1. webって
どうやって表示しているの？
2020/06/15 たなかひかる
Holyday技術基礎勉強会

2. 前回のお話の振り返り
・CPUとHDD/SSDとメモリ
・コンピュータには「Closed Question」
・様々なプログラム言語の実行形式
・プロセスとスレッド

3. 基本的なお仕事の流れ

4. コンピューターは人間ほど賢く無い？！
コンピューターは0と1でお仕事をしています
そのため、0と1で判断出来ないものについてとても弱いです
プログラムを書く上では常に「Closed Question」を意識しなければなりません

5. 言語の実行方法による差
実行までの早さ 実行速度 プログラム上の
制約の少なさ
実行環境の多さ
インタプリタ言語 ◎ × ◎ △
コンパイル言語 × ◎ × △
VM系言語 × 〇 × ◎

6. プロセスとスレッド
凄く雑に説明すると
・プロセスはCPUに直接命令するプログラムの実行単位
・スレッドはプロセスに複数ぶら下がってプログラムを実行する単位
になります

7. 今日のお話
・「httpプロトコル」ってなあに？
・インターネットでwebページを表示するまで
・トラブルシューティング
・まとめ
・質疑応答

8. 今日のお話
・「httpプロトコル」ってなあに？
・インターネットでwebページを表示するまで
・トラブルシューティング
・まとめ
・質疑応答

9. 今日の目標
「インターネットが見れない！」
を
正しく伝えられるようになる

10. そういえば「http」ってなに？

11. そういえば「http」ってなに？

12. そういえば「http」ってなに？
困った時のwikipedia
https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol
Hypertext Transfer Protocol（ハイパーテキスト・トランスファー・プロトコル、略称HTTP）とは、Webブラウ
ザがWebサーバと通信する際に主として使用する通信プロトコルであり、インターネット・プロトコル・スイートの
メンバである。HTMLなどのテキストによって記述されたWebページ等のコンテンツの送受信に用いられる。

13. そういえば「http」ってなに？
困った時のwikipedia
https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol
HTTP とは、WebブラウザがWebサーバと通
信する際に 使用する通信プロトコルであ る。

14. そういえば「http」ってなに？
困った時のwikipedia
https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol
HTTPとは、WebブラウザがWebサーバと通信する際に使用する通信プロトコルである。

15. そういえば「http」ってなに？
困った時のwikipedia
https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol
HTTPとは、WebブラウザがWebサーバと通信する際に使用する通信プロトコルである。

16. そういえば「http」ってなに？
困った時のwikipedia
https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol
HTTPとは、WebブラウザがWebサーバと通信する際に使用する通信規格である。

17. そういえば「http」ってなに？

18. ざっくりhttpプロトコル
・リクエスト行
・ヘッダー
・ボディ
詳細はブラウザの開発者コンソールで

19. 「webページ」が表示されるまで
サーバー
リクエスト
レスポンス

20. 「webページ」が表示されるまで
名前解決をする
ipアドレスによってどのサーバーにリクエストするか確定するが
domainの状態だとipアドレスがわからないので
domainからipアドレスを確認する作業
Ex.) holyday.co.jp → 157.7.44.175

21. 「webページ」が表示されるまで
DNSによる名前解決
「DNS(Domain Name System)」によって管理されているdomainとipの組み合わせから
ipをもらってくる
電話で言うところの104みたいなもの

22. 「webページ」が表示されるまで
hostsによる名前解決
ローカルにある「hosts」ファイルに保存されたdomainとipの組み合わせから
ipを探してくる
電話帳みたいなもの

23. 「webページ」が表示されるまで
サーバー
リクエスト
レスポンス
DNS

24. 「webページ」が表示されるまで
いよいよサーバーの中へ
アプリケーションの構成によりますが、最近弊社がAWS上で運用しているwebシステムでは
・アプリケーションサーバー
・DBサーバー
・静的ファイルホスティング
・ロードバランサー
・CDN
などが動いています サーバー

25. 「webページ」が表示されるまで
いよいよサーバーの中へ
アプリケーションの構成によりますが、最近弊社がAWS上で運用しているwebシステムでは
・アプリケーションサーバー
・DBサーバー
・静的ファイルホスティング
・ロードバランサー
・CDN
などが動いています
今日は特に普段聞きなれないであろう下の3つを取り上げてみます
サーバー

26. Q.そもそもなんで
色んなサーバーを使い分けるの？
A. サーバーによって得手不得手が違うから
AWS(AmazonWebService)などのクラウドサービスで提供されているサービスは
役割に特化したサービスが提供されており
適切に組み合わせる事により低コストでハイパフォーマンスが得られる

27. サンプルの構成

28. CDN
記憶したレスポンスを素早く返してくれる人
CDN(コンテンツ・デリバリー・ネットワーク)は
特に静的ファイル等で
キャッシュを保持しておく事により同一リクエストのレスポンスを素早く返す
インターネットの通信速度は物理的距離に左右されるので
キャッシュを多数の拠点に配置する事により素早くレスポンスを返せるようにする

29. ロードバランサー
来たリクエストを仕分けする人
複数台のサーバーを運用している際に
来たリクエストを適切に分配する
これにより、より多くのリクエストを捌く事ができる

30. ロードバランサー
来たリクエストを仕分けする人
複数台のサーバーを運用している際に
来たリクエストを適切に分配する
これにより、より多くのリクエストを捌く事ができる

31. ロードバランサー
来たリクエストを仕分けする人
複数台のサーバーを運用している際に
来たリクエストを適切に分配する
→分配ルールはいくつかのパターンがあります
これにより、より多くのリクエストを捌く事ができる

32. 静的ファイルホスティング
静的なファイルをホスティングする
計算処理をしない代わりに、ディスクI/Oに最適化されており
ファイルの破損や損失のリスクを最小限に抑えてくれる
AWSのS3(Simple Storage Service)の場合は
耐久性をイレブンナイン(99.999999999%)としている

33. サンプルの構成

34. 「webページ」が表示されるまで
リクエスト
レスポンス
DNS

35. 今日のお話
・「httpプロトコル」ってなあに？
・インターネットでwebページを表示するまで
・トラブルシューティング
・まとめ
・質疑応答

36. どうしよう！webページが表示されない！
何を確認しましょうか・・・

37. どうしよう！webページが表示されない！
【問題解決のプロセス】
・問題を再現させる
・問題がどこにあるかを特定する
・問題を取り除く
・問題が解消された事を確認する

38. どうしよう！webページが表示されない！
【問題解決のプロセス】
・問題を再現させる
・問題がどこにあるかを特定する
・問題を取り除く
・問題が解消された事を確認する

39. 「webページ」が表示されるまで
リクエスト
レスポンス
DNS

40. どうしよう！webページが表示されない！
HTTPステータスを見てみよう！
HTTPステータスはサーバーからのメッセージ
・2XXは「うまくいきました」
・3XXは「別の場所にあります」
・4XXは「お前が悪い」
・5XXは「私が悪い」

41. どうしよう！webページが表示されない！
HTTPステータスを見てみよう！
HTTPステータスはサーバーからのメッセージ
・2XXは「うまくいきました」
・3XXは「別の場所にあります」
・4XXは「お前が悪い」
・5XXは「私が悪い」

42. どうしよう！webページが表示されない！
HTTPステータスを見てみよう！
HTTPステータスはサーバーからのメッセージ
・2XXは「うまくいきました」
・3XXは「別の場所にあります」
・4XXは「お前が悪い」
・5XXは「私が悪い」

43. どうしよう！webページが表示されない！
インターネットに接続出来ていますか？
・googleは見れますか？
・Yahoo!は見れますか？

44. どうしよう！webページが表示されない！
名前解決は適切にされていますか？
・hostsファイルに不要な記述が含まれいませんか？
・アドレスはあってますか？

45. どうしよう！webページが表示されない！
HTTPステータスが4XXで見れない！
・不要なパラメータが付いていませんか？
・Cookieを削除してみましょう
・開発中のサービスであればエンジニアに相談してみましょう

46. どうしよう！webページが表示されない！
HTTPステータスが5XXで見れない！
・システムがダウンしている可能性があるので直ぐにエンジニアへ
・連続リロード厳禁！(負荷高騰の可能性があるため)

47. どうしよう！webページが表示されない！
HTTPステータスが200なのに見れない！
・サーバーからのレスポンスは正常です
・レスポンスbodyがあるか確認しましょう
・ブラウザコンソールにエラーは出ていませんか？

48. 今日のまとめ
・「httpプロトコル」っていう通信規格によって通信しているよ
・インターネットでwebページを表示するまでにはたくさんの役割の人がいるよ
・webサイトが見れない時はHTTPステータスを見てみよう
・HTTPステータスが5XXの時は急いでエンジニアを呼ぼう
・HTTPステータスが200なのに見れない時も急いでエンジニアを呼ぼう

49. 質疑応答