SKILL-NETWORK_03_

name: orientation
class: title, smokescreen, shelf, no-footer
# コンピュータネットワーク(2024-)<br><small>第03回 HTTPを体験しよう</small>

<div class=footnote>
<small><small>
3年、春学期、必修;
旧「コンピュータネットワーク」(-2023);
今日の午後、各自WWWサーバを構築します
</small></small>
</div>

<div class=review-gw-begin></div>
---
class: compact
# 基本用語(1)

- サーバクライアントモデル or クライアントサーバモデル
<small>
    - インターネットのサービスを抽象化したモデルで、
      インターネットのサービスのほとんど全てがこれで説明できる。
      身近なところでは「レストランの給仕(サーバ)とお客(クライアント)」が、これ
</small>      
- ドメイン名
<small>
    - ドット( . )でつないだ文字列で組織名やサーバ名などに使われるもの
    - 例: サーバ名のportal.net.fml.org
</small>

---
class: compact
# 基本用語(2)

<div class=footnote>
<small><small>
[参考] 1993年、WWWブラウザ
<A HREF="https://qiita.com/fmlorg/items/c97f7289a74f6e60334c">NCSA Mosaicは世界に色を灯した</A>のです
</small></small>
</div>

</small>
- WWW (World Wide Web略してW3やWeb, 1989-)
<small>
    - 発音は「わーるどわいどうえぶ」もしくは「だぶりゅーすりー」らしい、あとは略して「うえぶ」
    - 一般人がイメージするインターネットのこと(1993/09以降);
      <br>
     （インフラエンジニア目線では）空前のヒットを飛ばしたアプリケーションのひとつ
    - WWW = コンテンツ(HTMLなど) + 転送システム(HTTP)
</small>
- HTML (発音：えいちてぃーえむえる)
<small>
    - `index.html`などのハイパーテキストというコンテンツを記述する言語
    - 適当に書いてもブラウザが何とかしてくれる(ので動作確認なら正確さは気にしなくてOK:-)
</small>
- HTTP (発音：えいちてぃーてぃーぴー)
<small>
    - WWWのコンテンツ転送時の約束事(プロトコル)の名称
</small>

<div class=www-internal-begin></div>
---
class: compact,img-right
# ホームページ（WWW）のしくみ

<div class=footnote>
<small><small>
(脚注)
これを「サーバ(給仕)・クライアント(お客様)モデル」と呼んでいます
</small></small>
</div>

![](/slides/skill-network/images/www-internal-htdocs.png)

- (1) URL(`http://b2902900.cloud.fml.org/`)をブラウザでクリックすると

- (2) 【WWWサーバの内側の動作】
  <br>
  URL右端の`/`を`/index.html`と解釈しindex.htmlの中身を返す準備をします

- (3) WWWサーバはブラウザにコンテンツ(index.html)を送り返します

- (4) ブラウザは受け取ったコンテンツを解釈して表示します(レンダリング)

---
class: compact
# URLとは「サーバ名＋見たいコンテンツの場所」

<div class=footnote>
<small><small>
(脚注)
www.pyとか、具体的なコンテンツ場所の説明は、月曜午後の科目にあわせています
</small></small>
</div>

<small>
URL = サーバ名＋見たいコンテンツの場所
<br>
例: `http://b2902900.cloud.fml.org/` = サーバ名(b2902900.cloud.fml.org) + 場所(/)

- (ここでは、午後の科目で使うWWWサーバの仕様で説明します)
- サーバ名が`b2902900.cloud.fml.org`
- サーバ名の右側部分(ここでは`/`)がサーバ上でのコンテンツの場所の指定
  <br>
  (注: `/`=`/index.html`は相対位置です。
  WWWサーバ(www.py)には`/index.html`の実在する位置は`/home/admin/htdocs/index.html`であると解釈する設定が入っています)

```
[例]
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: title, smokescreen, shelf, no-footer

<div class=footnote>
<small><small>
ハイライトは前ページのスライド
</small></small>
</div>

---
class: compact
# 第2回 必須課題必須の模範解答

---
name:  exercise
class: title, smokescreen, shelf, no-footer
# 演習「HTTPを体験しよう」

<div class=footnote>
<small><small>
今日の午後、各自WWWサーバを構築し、ホームページを作成してもらいます
</small></small>
</div>

---
class: compact
# 演習のお品書き

1. ブラウザでWWWサーバにアクセス
1. コマンドでWWWサーバにアクセス
1. 手動操作でWWWサーバにアクセス

---
class: compact
# <small>登場するコマンドたち</small>

<div class=footnote>
<small><small>
(脚注)
もともとUnixにsu(えすゆー)コマンドがあって、
のちにsudo登場なので、すなおに「えすゆーどぅー」な気がするんですけどね
</small></small>
</div>

<small>
- コマンド
   - コンピュータに与える命令で擬似英語っぽい単語(+文章)、スペース区切りに注意
- curl
    - ダウンロードやブラウザの代わりが出来る便利なコマンド(発音:しーゆーあーるえる or かーる)
    - HTTPを話すことが出来る
- telnet
    - 本来はリモートのコンピュータにログインするコマンド (発音：てるねっと)
    - 本演習ではWWWサーバへの(TCP)接続に使用
</small>

---
name:  hands-on-www
class: compact
# <small>[凡例] Unixマニュアルorドキュメントの読み方</small>

<small>
```
[コマンドの記述例]

$ curl 210.128.53.254
```
- 左端の`$`をプロンプトと呼んでいます。<B>OSが「入力まち」を意思表示</B>していると考えてください
    - プロンプト`$`部分はOSやユーザごとに異なるので、あくまでも一例です
    - 通常、<B>左端にある特殊文字部分</B>は、プロンプトとして無視してください（そのうち慣れます）
- <B>英語なので空白区切り</B>です。初心者は日本語のつもりか連続して文字を打ちこみがちなので注意
- ユーザが打ちこむ部分は `curl 210.128.53.254` です。そしてENTERキーを押します
    - 通常マニュアルにENTERキーは書きませんので、ユーザが頭の中で補完してください
    - 雑誌や書籍では、組版(くみはん)の際にデザイナさんがENTER印を書きこんでくれているのです
</small>

---
class: title, smokescreen, shelf, no-footer
# (にせ)ポータルサイトへHTTPアクセス

<div class=footnote>
<small><small>
いろいろな手法で体験
</small></small>
</div>

---
class: compact
# <small>例題1: ブラウザで(にせ)ポータルサイトへHTTPアクセス</small>

- アクセスする先は

```
http://210.128.53.254/
```

- ふつうにブラウザを使ってください。さすがに、これはいいよね？

---
class: compact
# <small>例題2: curlコマンドで(にせ)ポータルサイトへHTTPアクセス</small>

```
$ curl http://210.128.53.254/
```
<small>
- ブラウザが裏で実行している動作をコマンドで行えます
- 動作確認するために、いちいちブラウザなんて重たいものを起動する必要はありません
- システム構築の際にブラウザが使えるとは限りません
    - 例: ２万キロ先のサーバを構築中。そこから HTTP が使えるか？の動作確認
        - ２万キロ先のサーバ上でブラウザを起動してどうする
          <br>
         (注: 巨大な画面のデータが２万キロ転送されてくるぞ)
</small>

---
class: compact
# <small>例題3: telnetコマンドで(にせ)ポータルサイトへHTTPアクセス</small>

<div class=footnote>
<small><small>
(脚注1)
サーバの動作確認をする際に年中やります。
いままでに何百回やったことがあるかと...
</small></small>
</div>

<small>
- ブラウザが裏でやっていることを実感するために、
  <B>生々しくHTTPを手動でやってみましょう</B>
  <br>
  一緒にやります。字面だとタイミングがよくわからないでしょうから
- 手順
    1. まずtelnetコマンド「telnet 空白 サーバ名 空白 80」でサーバへ接続し、<B>TCPの通信路を作ります</B>。
    ```
    $ telnet 210.128.53.254 80
    ```
    サーバ名は各自ことなります。
    右端の80がWWW(というサービス)を意味しています
        
    2. ここで次の1行をコピー＆ペーストし、ENTERを2回たたいてください(ここが<B>HTTP</B>)
    ```
    GET / HTTP/1.0
    ```
</small>

---
class: compact
# [例題] telnetコマンドで手動HTTPしてみよう(2)

<small>
```
[実行例]
$ telnet 210.128.53.254 80
Trying 10.20.30.40...
Connected to 10.20.30.40.
Escape character is '^]'.
GET / HTTP/1.0

HTTP/1.0 200 OK
Server: SimpleHTTP/0.6 Python/3.7.3
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
# ８０？

- telnetコマンドの引数(右端)にある80をポート番号と呼んでいます

- サービスを識別する数字です。サービスごとに割り当てられています

- WWWサーバはポート番号80を使っています

---
class: compact,img-right
# 課題

![](../images/www-internal-htdocs-haribote.png)

<small>
- 問１と２：次の文字列は、図の（１）〜（４）の、どこに入れるのかが適切か？
    - `GET / HTTP/1.0`
    - `Welcome to my homepage`
- 問３: http://210.128.53.254/api/janken/v1 が見たいコンテンツの場合、図の（１）の部分に入る文字列は、どうなるか？
- 次のgoogle formで回答してください
    - 
    - ついでに自由記述欄も付け加えたので、よかったら、ご意見ご感想などをお書きください
</small>