class: title, smokescreen, shelf, no-footer # 色づかないWorld Wide Webの昨日から<br><small>- World Wide Web -</small> <div class=footnote> <small><small> <div class="white"> "Night cityscape in Nagasaki - view from near the mouth of Urakami River (2016-04-09 by Eiji Kikuta @Pixabay 1342591).jpg" by Eiji Kikuta (AG2016) from Sendai, Japan is marked with CC0 1.0. </div> </small></small> </div> <img src="/images/background/Night_cityscape_in_Nagasaki.jpg"> --- name: index class: compact # 目次 <div class=footnote> <small><small> (脚注1) 4/17までに22/tcp,80/tcp以外は細々と分けて学習しているはずですが、 それらが頭の中で<B>合体していない</B>ようなので<B>復習</B>回 <br> (脚注2) 「ださい」とか言わないように;-) React,Angular,Vueとかの人は各自で頑ばってほしいですが、 (a)なぜCGI -> Ajax -> SPA と進化する必要があったのか? (b)SPAの裏側で何をしているか、 きちんと説明できますか？ </small></small> </div> <small> 1. [サーバとクライアント、IPアドレス、ポート番号](#app-layer-digest) - 「コンピュータネットワーク第1回」「ITベーシック 第3回」の復習 1. [World Wide Webとは?](#www) 1. [WWWサーバのお仕事](#www-server)、80/tcp - 「コンピュータネットワーク第2回」の復習 1. [ホームページの動作原理](#www-internal-homepage) 1. 【別スライド】[WWWサーバの管理](../www-adm/)(WWWサーバへSSHでログイン), 22/tcp, コンテンツの編集 - 「ITベーシック 第3回」の復習 1. 【別スライド】[HTMLとCGI](../html-form/) 1. 【別スライド】[www.pyソースコード注解](../www.py/) ... 配布しているwww.py(自作WWWサーバ)の基本部分のみ </small> --- name: app-layer-digest class: col-2,compact # サーバとクライアント、IPアドレス、ポート番号 <div class=footnote> <small><small> (脚注) マジックナンバーの22/tcp, 80/tcp以外は 「コンピュータネットワーク第1回」 「ITベーシック 第3回」 の復習です <br> そもそもAWSでも普通にすすめた場合ポート番号など出てこないので困らないはずです (失敗の時は? -> もう一つEC2作成) </small></small> </div> <small> - サーバは給仕、クライアントは顧客(あなた) - 通信する際には、 使いたい**運送会社**の送り状を入手し、 双方の**住所**(どこ〜どこ?)、 **誰**から誰へ?を指定する必要があります。 つまり、 宅急便の伝票と同じですね(右図) - 給仕の名前(名札) = **IPアドレス** - 給仕できる料理の種類 = **ポート番号** </small> <small><small> | 現実世界 | インターネット | 例 | 備考 | |---------- |---------------- |------------- |------------------------------ | | 住所 | IPアドレス | 192.168.1.1 | | | 誰 | ポート番号 | 80 | HTTP、80/tcpという表記も多い | | 誰 | ポート番号 | 22 | SSH、22/tcp | | 運送会社 | プロトコル | TCP | たいていTCPかUDP | </small></small>    --- name: www class: compact # World Wide Web <div class=footnote> <small><small> (脚注) 歴史的な話は省略していますけれども... AWS構築ガイドの付録に少し書いて...いや書こうとして途中ですね <br> <B>自由課題</B>(発展課題,加点対象として口頭試問してあげようじゃないか) <br> WW2以降の約55年のWorld Wide Webをめぐる技術史について、 簡潔にまとめ、プレゼンせよ。 人物および出来事相関図なども適宜あるとよい。 ヒントとして網羅するべき単語を以下に挙げておく: V. Bush、 Atlantic Monthly、 D. Engelbart, ARPA, A. Kay, Hypercard, T.B.Lee, NCSA Mosaic, A. Gore, Netscape社誕生, Internet Explorer, 第一次ブラウザ戦争, OSIとOSS運動, Netscape社の滅亡, Firefoxの誕生 </small></small> </div> > WWW = HTTPによるデータ転送の仕組み + HTMLなどのコンテンツ - はい、単に、これだけです - HTTPは、コンピュータネットワーク第2回でやったので省略しますよ、OK? - [HTML](../html-form/)は、別の資料で解説します - コンテンツはデジタル表現できるモノすべてです --- name: www-server class: img-right,compact # サーバのお仕事 <div class=footnote> <small><small> (脚注) 自由亭喫茶室 <A HREF="https://glover-garden.jp/activity/tea-room"> https://glover-garden.jp/activity/tea-room </A> </small></small> </div>   <small> - お客さん(**クライアント**)が注文をすると - 給仕(**サーバ**)が注文に答えてくれますが、給仕さんごとに担当が異なります。例: 給仕(A)さんは**紫陽花ソーダ**, 給仕(B)さんは**長崎カステラ**を担当,... <br> 給仕さん(サーバ)の裏には、 もっと小難しい仕事たとえば料理を作る人がいますよね。 これが注文の下請けをしてくれる[CGI](../html-form/)さん!? - インターネット版の給仕(?) - 給仕(WWW担当)さん、コンテンツ(メニュー?)を見せてください - 給仕(SSH担当)さん、サーバ(台所?)に入りたいんだけど、ダンドリよろしく </small> <div class=www-internal-begin></div> --- name: www-internal-homepage class: img-right,compact # ホームページの動作原理 <div class=footnote> <small><small> (脚注) HTDOCSはカスタマイズの対象です。 <B> HTDOCS = /home/admin/htdocs </B> と設定すれば、 <B> ユーザが個人的に保守できる </B> コンテンツに出来ます。 演習で使うwww.pyは、 厳密なもの(<B>本気で運用するサーバ)ではない</B>ので、 これで十分でしょう。 なお、 本物のWWWサーバの場合は、もっと厳密なユーザ権限の制御をしています (e.g. Apacheのmod_userdirやsuexecなどを勉強しましょう) </div> </small></small> </div>  <small><small> 例: http://api.fml.org/upload/ 1. ブラウザが、 サーバ(`api.fml.org`)に見たいコンテンツ(`/upload/`)のリクエストを送ります 1. サーバはコンテンツを探します <br> **変数HTDOCS(サーバの設定)+URIの場所(`/upload/`)** <br> がコンテンツの場所です。 Linuxの場合 `HTDOCS`変数のデフォルト値は`/var/www/html`が多いので、 ここでも`/var/www/html`と仮定します。 またURIの右端が`/`の場合、ファイル名(index.html)が省略されているとみなします。 よって検索目標のファイルは次のものになります `/var/www/html/upload/index.html` 1. index.htmlの中身をブラウザへ送り返します 1. ブラウザが返されたindex.htmlをレンダリングして表示 </small></small> <div class=www-internal-end></div>