4日目

Author: chelproc

docs/day04/04.md

@@ -0,0 +1,63 @@
+---
+title: Linuxのコマンドに慣れる
+---
+
+## ファイルシステム
+
+Linuxのファイルシステムは、**ルートディレクトリ**と呼ばれる特殊なディレクトリを頂点とする木構造で表現され、この木構造の中の特定の要素を一意に表現するための表記を**パス**と呼びます。Linuxにおいてパスの区切り文字は`/`で、それが単体で利用された際はルートディレクトリを表します。例えば、ルートディレクトリの中の`home`ディレクトリの中の`utcode`という名前のディレクトリは`/home/utcode`という形で表現されます。
+
+![ディレクトリの木構造](04/directory-tree.png)
+
+また、PCは複数のユーザーで使用されることを前提に設計されているため、各ユーザーが使用できる個人的な領域として「ホームディレクトリ」が作成されます。Ubuntuをはじめとした標準的なLinuxでは、ホームディレクトリは「/home/ユーザー名」にあります。
+
+Linuxには、最初から存在している**root**と呼ばれる特殊なユーザーがあります。`root`ユーザーは、コンピューター内の全てのファイルやディレクトリにアクセスできる権限を持っています。Ubuntuでは、rootユーザーのホームディレクトリは`/root`にあります。
+
+## 相対パスと絶対パス
+
+現在作業対象となっているディレクトリを**カレントディレクトリ**と呼びます。すべてのファイルやディレクトリは、ルートディレクトリを基準とした**絶対パス**で表される他、カレントディレクトリからの**相対パス**で表すことができます。例えば、カレントディレクトリが`/home/utcode`のとき、`/home/utcode/pictures/xxx.jpg`は`pictures/xxx.jpg`と表されます。
+
+Ubuntuの場合は、標準状態でカレントディレクトリがターミナル上に表示される場合が多いです。以下の例の場合は`~/projects/sample`がカレントディレクトリです。
+
+![カレントディレクトリの確認](04/check-current-directory.png)
+
+:::tip
+ターミナル上で動作し、ユーザーの入力を受け取って実際に実行するソフトウェアを**シェル**と呼びます。コマンドを入力する場所（**プロンプト**）にカレントディレクトリを表示させるか否かはシェルの設定に依存しますが、Ubuntuのデフォルトである**bash**やmacOSのデフォルトである**zsh**では、標準で表示されるようになっています。
+:::
+
+パスを表現するとき、様々な記号を用いることで、より複雑な関係を表現することができます。
+
+| カレントディレクトリ | 目標のディレクトリ     | 相対パス                    |
+| -------------------- | ---------------------- | --------------------------- |
+| /foo/bar             | /foo/bar/baz           | baz 又は ./baz              |
+| /foo/bar             | /foo/bar/baz/foobar    | baz/foobar又は ./baz/foobar |
+| /foo/bar/baz         | /foo/bar               | .. 又は ./..                |
+| /foo/bar/baz         | /foo                   | ../.. 又は ./../..          |
+| どこでも             | /home/[ユーザー名]/foo | ~/foo                       |
+
+カレントディレクトリは「.」、親ディレクトリは「..」、ホームディレクトリは「~」と表されることが分かります。
+
+## コマンドの入力方法
+
+コマンドはスペース区切りで入力し、最初がコマンド名、それ以降をそのコマンドの「引数」と呼びます。コマンド名や引数にスペース文字が含まれる場合は、値全体を`""`（ダブルクォーテーション）で囲むことでスペースが区切り文字として認識されることを防ぐことができます。以下にコマンドの一例を示します。
+
+| コマンド名   | 機能                         |
+| ------------ | ---------------------------- |
+| pwd          | カレントディレクトリを表示   |
+| ls           | ディレクトリの中身を一覧表示 |
+| cd [移動先]  | カレントディレクトリを移動   |
+| mkdir [名前] | 新しいディレクトリを作成     |
+| touch [名前] | 新しいファイルを作成         |
+
+## 課題
+
+ホームディレクトリ内に以下のディレクトリ・ファイル構造を作成してください。
+
+```
+[ホームディレクトリ]
+└── secret
+    ├── pictures
+    │   └── xxx.txt
+    └── videos
+        ├── yyy.txt
+        └── zzz.txt
+```

docs/day04/04/check-current-directory.png

@@ -0,0 +1,129 @@
+---
+title: Webサーバー
+---
+
+## Dockerを用いてWebサーバーを構築する
+
+新しいディレクトリを作成し、VSCodeで開きましょう。`docker-compose.yml`という名前のファイルを作成し、以下の内容を記述します。
+
+```yml
+version: '3'
+services:
+  web:
+    image: httpd
+    ports:
+      - 8080:80
+    volumes:
+      - ./files:/usr/local/apache2/htdocs
+```
+
+続いて`files`ディレクトリを作成して、適当な`index.html`をその中に作成してください。
+
+![docker-compose.ymlを含むプロジェクト](05/docker-project.png)
+
+プロジェクトディレクトリで以下のコマンドを実行します。
+
+```
+$ docker-compose up
+```
+
+[http://localhost:8080/](http://localhost:8080/) にアクセスして、先ほど作成したHTMLファイルの内容が表示されることを確認してください。
+
+:::tip
+`docker-compose up`コマンドで起動したサーバーは、`Ctrl + C`のショートカットで終了させることができます。
+:::
+
+## URLの構造
+
+私たちがウェブサイトにアクセスする場合には、**URL**を用いるのが普通です。URLには様々な情報が含まれています。
+
+![URL](05/url.png)
+
+### ② ドメイン
+クライアントがサーバーにリクエストを送信する際、まず最初に使用されるのがドメインです。ドメンは、インターネット上でサーバーの場所を区別するための文字列です。
+
+:::note
+②の場所に入る文字列を、正確には**FQDN**と呼びます。FQDNは、`www.utcode.net`のような文字列で、`www`を**ホスト名**、`utcode.net`をドメインと呼びます。
+
+しかしながら、FQDN、ホスト、ドメインが同じ意味で用いられる場合も多いので注意が必要です。
+:::
+
+:::tip
+多くの端末では、`localhost`とすることで自分自身にアクセスすることができます。
+:::
+
+### ③ ポート
+
+クライアントからリクエストを受けるコンピューターをサーバーと呼びますが、そのリクエストを実際に受け取って処理を行うソフトウェアもまた、サーバーと呼びます。
+
+このため、一台の物理的なサーバーで稼働しているソフトウェアとしてのサーバーが一種類とは限りません。どのソフトウェアの通信なのかを区別するため、外部からの接続を待ち受けするソフトウェアは、`0 ～ 2^16 – 1 (65535)`の整数で表される**ポート**番号を指定する必要があります。
+
+![ポート番号](05/port.png)
+
+サーバーの種類によって使われるポート番号は大体決まっています。例えば、Webサーバーの場合は、80番または443番が使用されるのが普通です。後述するプロトコルがHTTPの場合は80番、HTTPSの場合は443番のとき、URLにおけるポート番号は省略可能になります。一般的なURLにポート番号が存在していないのはこのためです。
+
+### ① プロトコル
+
+複数のコンピューターが正しく通信を行うためには、事前に通信の方法を定めておく必要があります。通信を行うための取り決めを、**プロトコル**と呼びます。ウェブサイトを提供するためのプロトコルは**HTTP**または**HTTPS**です。
+
+### ④ パス
+
+通信先のサーバーにおける、リクエストするリソースの場所を表す文字列です。具体的な解釈の方法はプロトコルで決まっているわけではなく、サーバーソフトウェアの実装次第です。
+
+## DockerとDocker Composeの使い方
+
+以前インストールしたDockerは、**仮想化**のためのソフトウェアです。サーバーは通常物理的な筐体ですが、仮想化を用いることで、あるコンピューターの中にあたかも別のコンピューターが存在するかのようにふるまわせることができます。
+
+**Docker Compose**は、複雑なコマンド体系を持つDockerを扱いやすくするためのソフトウェアです。`docker-compose.yml`という名前のファイルにサーバーの構成を記述し、`docker-compose up`とするだけで、様々なサーバーを起動させることができます。
+
+先ほどの`docker-compose.yml`を見直してみましょう。このファイルは、**YAML**と呼ばれる可読性の高いフォーマットで記述します。
+
+```yml
+version: '3' # docker-compose.ymlの仕様のバージョン
+services:
+  web:
+    image: httpd
+    ports:
+      - 8080:80
+    volumes:
+      - ./files:/usr/local/apache2/htdocs
+```
+
+:::tip
+VSCodeの拡張機能 [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) をインストールしておくと便利です。
+:::
+
+YAMLは、JavaScriptオブジェクトに変換することが可能な形式です。このファイルの内容をJavaScriptの式で記述すると、下記のような形式になります。
+
+```js
+({
+  version: '3',
+  services: {
+    web: {
+      image: 'httpd',
+      ports: [
+        '8080:80'
+      ],
+      volumes: [
+        './files:/usr/local/apache2/htdocs'
+      ]
+    }
+  }
+})
+```
+
+`services`の各プロパティが、一台のサーバーを表します。Docker Composeは、このプロパティ一つごとに、仮想的なLinux端末（**コンテナ**）ひとつを生成します。上記の例の場合は`web`ひとつだけです。
+
+`service.サービス名.image`には、コンテナのベースとなるイメージ名を指定します。このイメージは、通常[Docker Hub](https://hub.docker.com/)上にアップロードされているもので、公式・非公式ともにさまざまな種類が用意されています。
+
+`service.サービス名.ports`は、`ローカル側ポート:コンテナ側ポート`形式の文字列配列を指定します。この指定をすることで、`localhost`の指定ポートへの通信を、コンテナ側の指定ポートへ転送することができます。
+
+`service.サービス名.volumes`は、`ローカル側パス:コンテナ側パス`形式の文字列配列で、ローカル側のファイルシステムを、コンテナ側のファイルシステムと同期させることができるようになります。
+
+## Webサーバー
+
+`httpd`イメージは、Dockerが公式に提供している、**Apache**を含むイメージです。Apacheは、世界で一般的に使用されるWebサーバーの一種です。
+
+Webサーバーは通常、**ドキュメントルート**と呼ばれるディレクトリを設定し、そのディレクトリ内にあるファイルを公開します。URLに含まれるパスは、そのドキュメントルートからの相対パスです。
+
+Dockerの`httpd`イメージでは、ドキュメントルートが`/usr/local/apache2/htdocs`、ポート番号が80に設定されています。これが、Docker Composeの設定によりそれぞれ`./files`、8080番ポートに転送されているため、`http://localhost:8080/`のURLで`./files/index.html`にアクセスすることができたのです。

docs/day04/04/directory-tree.png

@@ -0,0 +1,52 @@
+---
+title: PHPの動作
+---
+
+PHPは、リクエストを受け取ったWebサーバーが、レスポンスを返す前に動作するプログラミング言語です。
+
+## PHPが動作するWebサイト
+
+```yml title="docker-compose.yml"
+version: '3'
+services:
+  web:
+    image: php:apache
+    ports:
+      - 8080:80
+    volumes:
+      - ./files:/var/www/html
+```
+
+```php title="files/index.php"
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <title>Hello World</title>
+</head>
+<body>
+  <?php print('Hello PHP!'); ?>
+  <script>document.write('Hello JS!');</script>
+</body>
+</html>
+```
+
+プロジェクトディレクトリは以下のようになるはずです。
+
+![PHPのDockerプロジェクト](06/docker-php-project.png)
+
+詳細は後にするとして、とりあえず実行結果にアクセスすると、表示は大方予想通りになります。
+
+![PHPを含むウェブサイトの表示](06/php-output.png)
+
+しかしながら、ページ自体のソースを表示させてみるといかがでしょうか。
+
+![PHPを含むウェブサイトのブラウザ側から見えるソース](06/php-source.png)
+
+`Hello PHP!`の部分は出力内容しか残っていないことが分かります。これが、サーバーサイドで動作するプログラムの特徴です。プログラムは、実行結果がクライアントに送信される前に実行されるため、ブラウザからはサーバーサイドのプログラムのソースコードを表示させることができません。
+
+## 動作原理
+
+Dockerイメージの`php:apache`は、PHPが動作するよう設定されたApacheのイメージです。ポート番号は80、ドキュメントルートは`/var/www/html`に設定されています。
+
+このApacheは、拡張子が`.php`のファイルに対してリクエストを受けたとき、PHPを起動させます。PHPは、ファイルの中から`<?php`から`?>`で囲まれた部分をPHPのプログラムとして実行します（囲まれていない部分は通常の出力と解釈されます）。この実行結果をApacheが受け取り、クライアント側に返却するようになっています。