name: orientation class: title, smokescreen, shelf, no-footer # コンピュータネットワーク(2024-)<br><small>第03回 モデル化と手動HTTP体験</small> <div class=footnote> <small><small> Copyright (C) Ken'ichi Fukamachi <fukachan@fml.org>, 2021-2025. CC BY-NC-SA 4.0 </small></small> </div> <div class=review-gw-begin></div> --- class: compact,col-3 # <small>抽象化されたモデルを考えられることは重要です</small> <div class=footnote> <small><small> (脚注) 人間は複雑すぎると理解できなくなるので、 モデル化することで、複雑さを軽減し、認知負荷を下げることができます。 モデルによる説明ができれば、コミュニケーションオーバヘッドも下がり、 議論も意思決定もシステム設計も効率的になるはずです </small></small> </div> 抽象化とは  <small><small> 少し高いところから見れば 「世の中のやりとりは全部おなじ」と考えられる </small></small> サーバクライアントモデル  <small><small> 「客が依頼（リクエスト）」すると「処理結果」が返る （-> 次頁以降） </small></small> <wbr> 階層モデル  <small><small> 仕事は分担したほうがよい （仕事を接客担当と配送担当で分担した様子） </small></small> --- class: compact # 用語 <div class=footnote> <small><small> (脚注1) 【参考】WWWブラウザが登場した頃の詳細は、qiitaの拙著記事 <A HREF="https://qiita.com/fmlorg/items/c97f7289a74f6e60334c">Ep.001「1993/04 世界は色づいた」</A>を参照 <br> (脚注2) WWWとは、インフラエンジニア目線では「空前のヒットを飛ばしたアプリケーション」のひとつに過ぎません。 そして「WWW = コンテンツ(HTMLなど) + 転送システム(HTTP)」です </small></small> </div> <small> - **サーバクライアントモデル** <small> - インターネットのサービスのほとんど全てがこれで説明できる抽象モデル </small> - **階層モデル** <small>（英語ではlayer-model；そのため「〜層」も「〜レイヤー」という言い回しをする）</small> <small> - コンピュータネットワークとは役割ごとの階層から構成されていると考える抽象モデル </small> - **ドメイン名** <small> - ドット( . )でつないだ文字列で組織名やサーバ名などに使う。 例: サーバ名のportal.net.fml.org </small> </small> - **WWW** (発音：わーるどわいどうえぶ/だぶりゅーすりー/うえぶ) <small> - 一番有名なアプリケーションで、一般人がイメージするインターネットはコレ(1993/09以降) </small> - **HTML** (発音：えいちてぃーえむえる) <small> - `index.html`などのハイパーテキストというコンテンツを記述する言語 </small> - **HTTP** (発音：えいちてぃーてぃーぴー) <small> - WWWのコンテンツ転送時の約束事(プロトコル)の名称 </small> </small> <div class=www-internal-begin></div> --- class: compact,img-right # ホームページ（WWW）のしくみ <div class=footnote> <small><small> (脚注) これを「サーバ(給仕)・クライアント(お客様)モデル」と呼んでいます </small></small> </div>  - (1) URL(`http://b2902900.cloud.fml.org/`)をブラウザでクリックすると - (2) 【WWWサーバの内側の動作】 <br> URL右端の`/`を`/index.html`と解釈しindex.htmlの中身を返す準備をします - (3) WWWサーバはブラウザにコンテンツ(index.html)を送り返します - (4) ブラウザは受け取ったコンテンツを解釈して表示します(レンダリング) <div class=review-gw-end></div> --- class: compact # URLとは「サーバ名＋見たいコンテンツの場所」 <div class=footnote> <small><small> (脚注1) www.pyとか、具体的なコンテンツ場所の説明は、月曜午後の科目にあわせています。 (脚注2) あらかじめ、 WWWサーバ(www.py)は、 / を /index.html と解釈し、 そのOS上の位置を/home/admin/htdocs/index.htmlと解釈するルールを教えられています </small></small> </div> <small> URL = サーバ名＋見たいコンテンツの場所 <br> 例: `http://b2902900.cloud.fml.org/` = サーバ名(b2902900.cloud.fml.org) + パス(/...) <small> - 左端は「プロトコル://」で、ここではhttpプロトコルを利用するという意味 - サーバ名は`b2902900.cloud.fml.org`部分 - サーバ名の右側部分(ここでは`/`)が<b>パス</b>で、サーバOS上で<b>コンテンツがある場所</b>の指定です。 <br> /に続けてファイル名なども指定できます <b>(注：ファイル名を省略した時はindex.htmlとみなされます(例外処理))</b> </small> ``` [例] http://b2902900.cloud.fml.org/ ... デフォルトのコンテンツ /home/admin/htdocs/index.html http://b2902900.cloud.fml.org/janken.html ... この場合のコンテンツは /home/admin/htdocs/janken.html http://portal.net.fml.org/ ``` </small> --- class: compact,img-right # 階層モデル <div class=footnote> <small><small> (脚注) 今のところは 「TCPに依頼すればデータを運んでくれる」とだけ理解してください。 より正確に述べればTCP/IPは4階層です。 実際には、トランスポート層以下の３つが協調して、データ転送を行っています。 おいおいやっていきます </small></small> </div>  <small> - 遠隔で注文を受けた様子 - 仕事を接客担当と配送担当で分担 - 接客担当（アプリケーション層） - ここがHTTP、 - 注文（<b>依頼</b>）をうけ、 （裏側で料理を手配して）、 料理を出荷（<b>処理</b>）します。 つまり<b>サーバクライアントモデル</b> - 配送担当（トランスポート層） - ここの担当がTCP - データ転送システムの実体 </small> <div class=www-internal-end></div> --- name: exercise class: title, smokescreen, shelf, no-footer # 演習「HTTPを体験しよう」 <div class=footnote> <small><small> 今日の午後、各自WWWサーバを構築し、ホームページを作成してもらいます </small></small> </div> --- class: compact # おしながき <div class=footnote> <small><small> (脚注) 石狩データセンター見学ほかにいますか？ 参考： <a href="https://youtu.be/avP5d16wEp0"> Google Data Center (stree view) </a> </small></small> </div> <small> 1. お知らせ等 1. EL (3分) 1. 解説: EL解説（+ 今回のテーマの解説/ハイライト -> 演習の冒頭解説） 1. 演習(手を動かします） - ブラウザでWWWサーバにアクセス - コマンドでWWWサーバにアクセス - 手動操作でWWWサーバにアクセス 1. 課題＆アンケートは google form で回答してください（-> ポータル） </small> --- name: model-server-client class: title, smokescreen, shelf, no-footer # <small>【解説】<br>サーバクライアントモデルの様々な例え話</small> <div class=footnote> <small><small> </small></small> </div> --- class: compact # <small>たとえ動画「HTTPのGETモードはUFOキャッチャー」</small> <iframe width="640" height="360" src="https://www.youtube.com/embed/etRED_BySEk" title="HTTPをUFOキャッチャーで説明する" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <small><small> <br> - WWWサーバ（UFOキャッチャーのwww.py）がコンテンツ（index.html）を探してきます。 <br> WWWサーバ（www.py）はコンテンツをWWWブラウザに返し、ブラウザがコンテンツを表示します - これはHTTPのGETメソッド：サーバからコンテンツをダウンロードするだけ、一方通行です - HTTPのPOSTメソッドは、サーバとデータのやり取りを行える、もう少し複雑な動作です(-> 午後) </small></small> --- class: compact,col-3 # <small>【たとえ話】サーバークライアントモデル：注文,お買い物,図書館</small> <div class=footnote> <small><small> (脚注) 予習にも出てくるレストランやコンビニで注文する様子です。 注文（依頼、リクエスト）をすると、結果（注文した料理が来る、購入品を渡される）が返ってくる身近な例になっています </small></small> </div>  <small><small> <br> レストランで注文 </small></small>  <small><small> <br> スーパーやコンビニのレジ </small></small>  <small><small> <br> 図書館で本を借りる </small></small> --- class: compact,col-3 # <small>【たとえ話】サーバークライアントモデル：ネットワーク</small> <div class=footnote> <small><small> (脚注) ブラウザもアプリの一つです。 見栄えが少し違うかもしれませんが、スマートフォンでもPCでもアプリはアプリです。 アプリの上で何かする（リンクをクリック、何か入力して送信ボタンをクリック）と、 サーバへ依頼が送信され、サーバが処理結果を返します。 身近な例ですが、裏側は見えていないので、想像力が試されると言えるでしょう </small></small> </div>  <small><small> <br> スマートフォンのアプリ </small></small>  <small><small> <br> アマゾン他 </small></small>  <small><small> <br> ヤフオク他 </small></small> --- class: compact,col-3 # <small>【たとえ話】サーバークライアントモデル：生活インフラ</small> <div class=footnote> <small><small> (脚注) 蛇口をひねる（依頼「水が欲しい」）と、 水が出てくる（結果）はサーバクライアントモデルで説明できます。 電気ガス水道すべて同様です。 インフラ全体を考えると小難しいかもしれませんが... </small></small> </div>  <small><small> <br> <br> 蛇口をひねる（依頼「水が欲しい」）と、 水が出てくる（結果） </small></small>  <small><small> <br> 電気ガス水道すべて同様 </small></small> --- class: compact,col-3 # <small>【たとえ話】サーバークライアントモデル：マスメディア</small> <div class=footnote> <small><small> (脚注) チャンネルほげほげを見たいとTVに依頼すると、そのチャンネルが表示されるという点で、 サーバクライアントモデルと言えるでしょう。 ただし、 他の例とは少し異なり、クライアント側が受身と考えられます。 （さいきん流行してませんが） サーバ側からクライアント側へ定期的にデータを送る形態のものをプッシュ型と言います。 逆に、素のHTTPは 「クライアントが主導して、データをサーバからクライアントへダウンロード」 するのでプル型です </small></small> </div>  <small><small> <br> 天気予報 </small></small>  <small><small> <br> ワイドショー </small></small> --- name: model-layer class: title, smokescreen, shelf, no-footer # <small>【解説】<br>階層モデル</small> <div class=footnote> <small><small> </small></small> </div> --- class: compact,col-2 # 階層モデル <div class=footnote> <small><small> (脚注1) 左図（再掲）では、自転車の人がTCP/IP(右図)の下3層分をまとめて担当していると解釈してください <br> (脚注2) 右図では、下の2層のあちこちで障害（図の赤い火花部分）が起きているイメージです </small></small> </div>   <small><small> <br> より正確なTCP/IP </small></small> --- class: title, smokescreen, shelf, no-footer # (にせ)ポータルサイトへHTTPアクセス <div class=footnote> <small><small> いろいろな手法で体験 </small></small> </div> --- class: compact # <small>例題1: ブラウザで(にせ)ポータルサイトへHTTPアクセス</small> <div class=footnote> <small><small> </small></small> </div> <small> - まずは、ふつうにブラウザを使ってアクセスします - アクセスする先は /<small> ``` http://210.128.53.254/ ``` --- class: compact # <small>例題2: curlコマンドで(にせ)ポータルサイトへHTTPアクセス</small> <div class=footnote> <small><small> (脚注1) 動作確認するために、いちいちブラウザなんて重たいものを起動する必要はありません。 そもそも、システム構築の際にブラウザが使えるとは限りません。 たとえば、２万キロ先のサーバを構築中。そこから HTTP が使えるか？の動作確認をしたい場合に、 ２万キロ先のサーバ上でブラウザを起動するのは非常に重たい (注: 巨大な画面のデータが２万キロも転送されてきます) <br> (脚注2) コマンドの解説は、コマンドリファレンス「厳選UNIXコマンド 第2版」を参照してください。 このリファレンスは、 <A HREF="https://distribution.techbooks.fml.org/">PDF</A> も印刷物も配布しています。 印刷版はH101のメディアコンサルタント席（プリンタがある隅のテーブルのところ）で配布しています </small></small> </div> ``` $ curl http://210.128.53.254/ ``` <small> - ブラウザが裏で実行している動作をコマンドで行えます </small> --- class: compact # <small>【デモ】telnetコマンドでサーバへHTTPアクセス</small> <div class=footnote> <small><small> (脚注1) ブラウザが裏で行っている動作はtelnetとcurlで擬似体験できます。 <br> (脚注2) 動画のサーバはlocalhost(IPアドレス: 127.0.0.1)です。 よって curl http://localhost/ もしくは curl http://127.0.0.1/と同等です </small></small> </div> <iframe width="640" height="360" src="https://www.youtube.com/embed/hq-CTEZK1-k?rel=0" title="HTTP/1.0のデモ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <small><small> <br> - 動画ではサーバがlocalhostですが、<b>演習では、サーバを 210.128.53.254 に変更してください</b> </small></small> --- class: compact,img-right # <small>【アプリケーション層】マジックナンバーの80とは？</small> <div class=footnote> <small><small> (脚注) コマンドの解説は、コマンドリファレンス「厳選UNIXコマンド 第2版」を参照してください。 このリファレンスは、 <A HREF="https://distribution.techbooks.fml.org/">PDF</A> も印刷物も配布しています。 印刷版はH101のメディアコンサルタント席（プリンタがある隅のテーブルのところ）で配布しています </small></small> </div>  <small> ``` $ telnet サーバのIPアドレス 80 ``` - telnetコマンドの引数(右端)にある80を<b>ポート番号</b>と呼んでいます - <b>サービスを識別する数字</b>です。サービスごとに割り当てられています。 WWWサーバつまり<b>HTTPはポート番号80</b>を使います - 図の一番上の層（左右へ矢印が伸びているところ）で<b>アプリケーションを区別</b>する番号です - <b>アプリケーション層</b>と呼んでいます </small> --- class: compact,img-right # <small>【トランスポート層】telnet ... 80でTCPの通信路を作成</small> <div class=footnote> <small><small> </small></small> </div>  ``` $ telnet localhost 80 Trying 127.0.0.1... Connected to localhost. Escape character is '^]'. ``` <small> - 動画にあるサーバかの応答の<b>最初の3行が「TCPの仮想通信路を作成」</b>したところ <br> 図の<b>下から3層目（青い箱が並んでいるところ）がTCPの仮想通信路</b>です - トランスポート層と呼んでいます - 青い箱が<b>パケット</b>です </small> --- class: compact # <small>例題3: telnetコマンドで(にせ)ポータルサイトへHTTPアクセス</small> <div class=footnote> <small><small> (脚注) サーバの動作確認をする際に年中やります。 いままでに何百回やったことがあるかと... </small></small> </div> <small> - ブラウザが裏でやっていることを実感するために、 <B>生々しくHTTPを手動でやってみましょう</B> <br> 一緒にやります。字面だとタイミングがよくわからないでしょうから - 手順 1. まずtelnetコマンド「telnet 空白 サーバ名 空白 80」でサーバへ接続 <br> <B>TCPの通信路を作ります</B>【トランスポート層】 ``` $ telnet 210.128.53.254 80 ``` 2. ここで次の1行をコピー＆ペーストし、ENTERを2回たたいてください <br> ここが<B>HTTP</B>【アプリケーション層】 ``` GET / HTTP/1.0 ``` </small> --- class: compact # [例題] telnetコマンドで手動HTTPしてみよう <div class=footnote> <small><small> (脚注) サーバが返すHTTPヘッダ(制御情報;HTTP/1.0〜）,空行,コンテンツ(welcome〜)。 最終行(Connection closed ...)はtelnetの出力 </small></small> </div> <small> ``` [実行例] $ telnet 210.128.53.254 80 Trying 210.128.53.254... Connected to 210.128.53.254. Escape character is '^]'. GET / HTTP/1.0 HTTP/1.0 200 OK Server: nginx/1.22.1 Date: Thu, 29 Feb 2024 23:02:03 GMT Content-type: text/html Content-Length: 23 Last-Modified: Thu, 29 Feb 2024 23:01:46 GMT welcome to my homepage Connection closed by foreign host. ``` </small> --- class: compact # 課題 - アンケート＆課題は google form で回答してください - URLは、ポータルの添付資料を参照 - 三々五々、解散です - おつかれさまでした