Tweet
Tweet

Slide 1

Slide 1 text

PHP で作る はじめての Web サイト Docker 環境構築編 YouTube Live (2020.6.18 Thur. 21:00~) CTO と VPoE が初学者向けに講義する オンライン勉強会です。 随時質問なども受け付けていますので、 お気軽にどうぞ。 ハッシュタグ #mu_zaru 前編

Slide 2

Slide 2 text

話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe エンジニアリングMgr。 チームづくり、採用。 Twitter 担当。 数学が好き。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components.

Slide 3

Slide 3 text

初学者向けです。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

Slide 4

Slide 4 text

エディタ触りながらではなく、 動画に集中してもらって大丈夫です。 YouTube 上でも、Twitter の メンションでも構いません。 質問にはできるだけ答えていきた いと思います。 質問OK ライブ配信の動画は、 そのまま YouTube に公開します。 なので途中で抜けてもいいし、 生で見なくてもいいです。 動画公開 ソースコード公開 講義中に使うソースコードは全て GitHub に公開しています。 github.com/mu-zaru/mu-zaru-channel

Slide 5

Slide 5 text

今日やること ① Web サーバーの仕組みと Docker を紹介 ② Docker を使って PHP サーバーを立てる

Slide 6

Slide 6 text

Web サイトの仕組み Web サイトって、どういう仕組みで 閲覧と操作ができるんだろう？ ? ブラウザ サーバ

Slide 7

Slide 7 text

閲覧の流れ インターネット サーバ ユーザ

Slide 8

Slide 8 text

インターネット http://example .com を見せて サーバ ユーザ ❶ 閲覧の流れ

Slide 9

Slide 9 text

HTML インターネット http://example .com を見せて サーバ ユーザ HTML を 返します！ ❶ ❷ 閲覧の流れ

Slide 10

Slide 10 text

HTML インターネット http://example .com を見せて サーバ ユーザ HTML を 返します！ HTML を 表示します！ ❶ ❷ ❸ 閲覧の流れ

Slide 11

Slide 11 text

HTML インターネット http://example .com を見せて サーバ ユーザ HTML を 返します！ 正確にいうと最初に DNS サーバへ、閲覧した いドメインの IP アドレスを聞いて、その IP アドレスに対してアクセスをしている HTML を 表示します！ ❶ ❷ ❸ ⓪ 閲覧の流れ

Slide 12

Slide 12 text

静的な Web サイト ● 誰がいつ見ても同じ内容が表示される ● 内容を変えるには、 HTML ファイル自体を 手作業で修正しないといけない HTML 開発者

Slide 13

Slide 13 text

動的な Web サイト オススメ 商品A オススメ 商品B なう 保存し ました データベース ● 人や閲覧タイミングによって内容が異なる ● ユーザのアクションに対して反応がある ● HTML 自体をプログラムで生成する 同じ URL で 違う コンテンツ

Slide 14

Slide 14 text

動的サイトの流れ インターネット サーバ ユーザ PHP http://example .com を見せて ❶ データベース

Slide 15

Slide 15 text

動的サイトの流れ インターネット サーバ ユーザ PHP 動的なコンテ ンツを作って http://example .com を見せて ❶ データベース ❷

Slide 16

Slide 16 text

動的サイトの流れ インターネット サーバ ユーザ PHP 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース ❷ ❸

Slide 17

Slide 17 text

動的サイトの流れ インターネット サーバ ユーザ PHP 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース 保存してある情 報を渡します！ ❷ ❹ ❸

Slide 18

Slide 18 text

動的サイトの流れ インターネット サーバ ユーザ PHP HTML 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース 保存してある情 報を渡します！ ❷ ❹ ❸

Slide 19

Slide 19 text

動的サイトの流れ HTML インターネット サーバ ユーザ HTML を 返します！ ❺ PHP HTML 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース 保存してある情 報を渡します！ ❷ ❹ ❸

Slide 20

Slide 20 text

動的サイトの流れ HTML インターネット サーバ ユーザ HTML を 返します！ HTML を 表示します！ ❺ ❻ PHP HTML 動的なコンテ ンツを作って PHP 実行し て HTML に します！ http://example .com を見せて ❶ データベース 保存してある情 報を渡します！ ❷ ❹ ❸

Slide 21

Slide 21 text

サーバは特殊な装置ではない 謎の すごい装置？ ≒ 普通の パソコンと同じ ✖

Slide 22

Slide 22 text

HTML インターネット PHP HTML つまり、このサーバが… サーバ

Slide 23

Slide 23 text

自分の PC でも可能 HTML PHP HTML PC

Slide 24

Slide 24 text

自分の PC でも可能 HTML PHP HTML PC このサーバ部分を、 今回は Docker を使って サクッと用意してみます

Slide 25

Slide 25 text

Docker を使えば、 PC の中に別環境を簡単に作れる PHP が動か せるよ データベース が動かせるよ etc

Slide 26

Slide 26 text

Docker を使えば、 PC の中に別環境を簡単に作れる PHP が動か せるよ データベース が動かせるよ etc こういったことを「仮想化」といいます

Slide 27

Slide 27 text

仮想化は、物理からソフトへ 複数の環境を用意するに は、普通は物理的にそれぞ れのコンピュータが必要 Linux Windows Mac 物理的には1つの環境の中に 実質的に複数の環境を作る のが仮想化 Linux Windows Mac

Slide 28

Slide 28 text

仮想環境のことを Docker では コンテナ と呼ぶ PHP コンテナ MySQL コンテナ オリジナル コンテナ

Slide 29

Slide 29 text

コンテナは色んな人が作って公開してる ● コンテナは Dockerfile と言うファイルで作れる ● コンテナは DockerHub と言うサイトで公開できる ● DockerHub で公開されたコンテナは誰でも利用できる Dockerfile

Slide 30

Slide 30 text

DockerHub に沢山のイメージがあります あとで 使う

Slide 31

Slide 31 text

Docker インストール方法 https://hub.docker.com/editions/community/docker-ce-desktop-mac/ https://hub.docker.com/editions/community/docker-ce-desktop-windows/

Slide 32

Slide 32 text

ここからの目標 実際に、パソコン で Docker を 動かして PHP の 環境をつくる！

Slide 33

Slide 33 text

つまり、自分の PC で... HTML PHP HTML PC

Slide 34

Slide 34 text

今日覚えて（知って）欲しい たった１つのコマンド $ docker run [イメージ名]

Slide 35

Slide 35 text

docker run の動き PHP コンテナ $ docker run [イメージ名] DockerHub イメージ

Slide 36

Slide 36 text

コンテナを起動する $ docker run php php -r 'echo "Hello World";' Docker コマンド イメージ名 実行したいコマンド PHP コンテナに、PHP コ マンドの -r オプションで "Hello World" を表示させ ている

Slide 37

Slide 37 text

コンテナを起動する $ docker run php php -r 'echo "Hello World";' Docker コマンド イメージ名 実行したいコマンド PHP コンテナに、PHP コ マンドの -r オプションで "Hello World" を表示させ ている 本来、自分のパソコンに PHP が入っていないと php -r ‘echo 1’ などは動かせない Docker のおかげで PHP が動い た！感動の瞬間です！

Slide 38

Slide 38 text

PHP サーバを動かしてみる

Slide 39

Slide 39 text

PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す

Slide 40

Slide 40 text

PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す コンテナのポートを ホスト側に公開

Slide 41

Slide 41 text

PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す コンテナのポートを ホスト側に公開 ホスト側のディレク トリをコンテナと共 有する

Slide 42

Slide 42 text

PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す コンテナのポートを ホスト側に公開 ホスト側のディレク トリをコンテナと共 有する ムーザルが作った オリジナルのコンテナ

Slide 43

Slide 43 text

PHP サーバを動かしてみる コンテナ停止後に、 データを残さないように消す コンテナのポートを ホスト側に公開 ホスト側のディレク トリをコンテナと共 有する ムーザルが作った オリジナルのコンテナ PHP ビルトインのサーバを起動

Slide 44

Slide 44 text

できたこと... HTML PHP HTML PC localhost:8000

Slide 45

Slide 45 text

おさらい: 自分のパソコンで PHP サーバーを動かすまで ① docker for mac / windows をインストール ② command を打つ（docker run --rm muzaru/php …） ③ localhost:8000 にアクセスする！

Slide 46

Slide 46 text

ありがとうございました！ 6/25（木）21:00~ 「PHP で作る はじめての Web サイト（PHP編）#2」 質問感想など呟いていただけると嬉しいです！ ハッシュタグ #mu_zaru