前編（Docker 環境構築編）PHP で作る はじめての Web サイト

配信動画はこちら
https://www.youtube.com/watch?v=oDc-E8O2ODc&t=9s

もし良かったらムーザルちゃんねるのチャンネル登録お願いします！
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_vpoe
zaru
https://twitter.com/zaru

Transcript

1. PHP で作る はじめての Web サイト Docker 環境構築編 YouTube Live (2020.6.18 Thur. 21:00~) CTO と VPoE が初学者向けに講義する オンライン勉強会です。 随時質問なども受け付けていますので、 お気軽にどうぞ。 ハッシュタグ #mu_zaru 前編
2. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe エンジニアリングMgr。 チームづくり、採用。 Twitter 担当。 数学が好き。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components.
3. 初学者向けです。JavaScript/PHP/Ruby などを使って Web 開発をしていきたい方向け。 Lv.2-3 をメイン対象としてます。 難易度？ Lv.4 Lv.3 Lv.2 Lv.1 HTML/CSS を触り始める 書籍、Progate、ドットインストールなどで JS/PHP/Ruby 入門 スクールに通いフレームワーク Laravel/Rails や DB/Git 入門 未経験から内定圏内 / エンジニア1年目 実務 1~2年 テストコード、リファクタ、設計、インフラ 中堅 以上 Lv.5 Lv.6
4. エディタ触りながらではなく、 動画に集中してもらって大丈夫です。 YouTube 上でも、Twitter の メンションでも構いません。 質問にはできるだけ答えていきた いと思います。 質問OK ライブ配信の動画は、 そのまま YouTube に公開します。 なので途中で抜けてもいいし、 生で見なくてもいいです。 動画公開 ソースコード公開 講義中に使うソースコードは全て GitHub に公開しています。 github.com/mu-zaru/mu-zaru-channel
5. 今日やること ① Web サーバーの仕組みと Docker を紹介 ② Docker を使って PHP サーバーを立てる
6. Web サイトの仕組み Web サイトって、どういう仕組みで 閲覧と操作ができるんだろう？ ? ブラウザ サーバ
7. 閲覧の流れ インターネット サーバ ユーザ
8. インターネット http://example .com を見せて サーバ ユーザ ❶ 閲覧の流れ
9. HTML インターネット http://example .com を見せて サーバ ユーザ HTML を 返します！ ❶ ❷ 閲覧の流れ
10. HTML インターネット http://example .com を見せて サーバ ユーザ HTML を 返します！ HTML を 表示します！ ❶ ❷ ❸ 閲覧の流れ
11. HTML インターネット http://example .com を見せて サーバ ユーザ HTML を 返します！ 正確にいうと最初に DNS サーバへ、閲覧した いドメインの IP アドレスを聞いて、その IP アドレスに対してアクセスをしている HTML を 表示します！ ❶ ❷ ❸ ⓪ 閲覧の流れ
12. 静的な Web サイト • 誰がいつ見ても同じ内容が表示される • 内容を変えるには、 HTML ファイル自体を 手作業で修正しないといけない HTML 開発者
13. 動的な Web サイト オススメ 商品A オススメ 商品B なう 保存し ました データベース • 人や閲覧タイミングによって内容が異なる • ユーザのアクションに対して反応がある • HTML 自体をプログラムで生成する 同じ URL で 違う コンテンツ
14. 動的サイトの流れ インターネット サーバ ユーザ PHP http://example .com を見せて ❶ データベース
15. 動的サイトの流れ インターネット サーバ ユーザ PHP 動的なコンテ ンツを作って http://example .com を見せて ❶ データベース ❷
16. 動的サイトの流れ インターネット サーバ ユーザ PHP 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース ❷ ❸
17. 動的サイトの流れ インターネット サーバ ユーザ PHP 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース 保存してある情 報を渡します！ ❷ ❹ ❸
18. 動的サイトの流れ インターネット サーバ ユーザ PHP HTML 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース 保存してある情 報を渡します！ ❷ ❹ ❸
19. 動的サイトの流れ HTML インターネット サーバ ユーザ HTML を 返します！ ❺ PHP HTML 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース 保存してある情 報を渡します！ ❷ ❹ ❸
20. 動的サイトの流れ HTML インターネット サーバ ユーザ HTML を 返します！ HTML を 表示します！ ❺ ❻ PHP HTML 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース 保存してある情 報を渡します！ ❷ ❹ ❸
21. サーバは特殊な装置ではない 謎の すごい装置？ ≒ 普通の パソコンと同じ ✖
22. HTML インターネット PHP HTML つまり、このサーバが… サーバ
23. 自分の PC でも可能 HTML PHP HTML PC
24. 自分の PC でも可能 HTML PHP HTML PC このサーバ部分を、 今回は Docker を使って サクッと用意してみます
25. Docker を使えば、 PC の中に別環境を簡単に作れる PHP が動か せるよ データベース が動かせるよ etc
26. Docker を使えば、 PC の中に別環境を簡単に作れる PHP が動か せるよ データベース が動かせるよ etc こういったことを「仮想化」といいます
27. 仮想化は、物理からソフトへ 複数の環境を用意するに は、普通は物理的にそれぞ れのコンピュータが必要 Linux Windows Mac 物理的には1つの環境の中に 実質的に複数の環境を作る のが仮想化 Linux Windows Mac
28. 仮想環境のことを Docker では コンテナ と呼ぶ PHP コンテナ MySQL コンテナ オリジナル コンテナ
29. コンテナは色んな人が作って公開してる • コンテナは Dockerfile と言うファイルで作れる • コンテナは DockerHub と言うサイトで公開できる • DockerHub で公開されたコンテナは誰でも利用できる Dockerfile
30. DockerHub に沢山のイメージがあります あとで 使う
31. Docker インストール方法 https://hub.docker.com/editions/community/docker-ce-desktop-mac/ https://hub.docker.com/editions/community/docker-ce-desktop-windows/
32. ここからの目標 実際に、パソコン で Docker を 動かして PHP の 環境をつくる！
33. つまり、自分の PC で... HTML PHP HTML PC
34. 今日覚えて（知って）欲しい たった１つのコマンド $ docker run [イメージ名]
35. docker run の動き PHP コンテナ $ docker run [イメージ名] DockerHub イメージ
36. コンテナを起動する $ docker run php php -r 'echo "Hello World";' Docker コマンド イメージ名 実行したいコマンド PHP コンテナに、PHP コ マンドの -r オプションで "Hello World" を表示させ ている
37. コンテナを起動する $ docker run php php -r 'echo "Hello World";' Docker コマンド イメージ名 実行したいコマンド PHP コンテナに、PHP コ マンドの -r オプションで "Hello World" を表示させ ている 本来、自分のパソコンに PHP が入っていないと php -r ‘echo 1’ などは動かせない Docker のおかげで PHP が動い た！感動の瞬間です！
38. PHP サーバを動かしてみる
39. PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す
40. PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す コンテナのポートを ホスト側に公開
41. PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す コンテナのポートを ホスト側に公開 ホスト側のディレク トリをコンテナと共 有する
42. PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す コンテナのポートを ホスト側に公開 ホスト側のディレク トリをコンテナと共 有する ムーザルが作った オリジナルのコンテナ
43. PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す コンテナのポートを ホスト側に公開 ホスト側のディレク トリをコンテナと共 有する ムーザルが作った オリジナルのコンテナ PHP ビルトインのサーバを起動
44. できたこと... HTML PHP HTML PC localhost:8000
45. おさらい: 自分のパソコンで PHP サーバーを動かすまで ① docker for mac / windows をインストール ② command を打つ（docker run --rm muzaru/php …） ③ localhost:8000 にアクセスする！
46. ありがとうございました！ 6/25（木）21:00~ 「PHP で作る はじめての Web サイト（PHP編）#2」 質問感想など呟いていただけると嬉しいです！ ハッシュタグ #mu_zaru