ウェブ屋さんには是非ともローカル開発環境を作って欲しい

# ローカル開発環境使ってますか？

---
# ローカル開発環境便利ですよ！

---
# 今日伝えたい事
1. ローカル開発環境は早い
2. 最初の設定だけすればOK!
3. ディレクトリを作れば作れる!

---
# その他
- 今日は概念を中心に
- 具体的なやり方については今後是非
- 遠くないうちに誰かがきっと…

---
# 今日覚えて欲しいキーワード
1. ドメイン、IPアドレス、DNSサーバ
2. バーチャルホストとドキュメントルート

---
# あらすじ

1. ローカル開発環境
2. ウェブ開発用のサーバ構成はこれ！
3. ドメインとIPアドレス
4. ウェブサーバとドキュメントルート

---

# ローカル開発環境
1. 手元のパソコンで動く開発環境
2. FTPとかでアップしない
3. 会社内のローカルサーバ -> ギリセーフ…？

---
# ローカル開発環境

---
# めっちゃ早いです

---
# ローカル開発環境が早い
1. 壊してもへーきへーき
2. 遅延がないのでレスポンスが早い
  - アップロード (500ms)
  - ネットワーク (100ms)
3. ライブエディットできる
  - https://www.youtube.com/watch?v=wCVwdvufTds
  - https://www.youtube.com/watch?v=f__tQKkWodw

---
# ライブエディット イケてる！

---
# IntelliJ おすすめです！

---
###### この話はまたの機会に

---
# ウェブ開発用のサーバ構成
- ローカル開発環境
  -
- (公開テスト環境)
  -
- ステージング環境
  -
- プロダクション環境 (本番環境)
  -

---
# ウェブ開発用のサーバ構成
- ローカル開発環境
  - ローカルの開発環境。主に開発する環境。
- ステージング環境
  - 本番環境に近い環境での動作チェック。お客さんとの検証。
- プロダクション環境 (本番環境)
  - 公開サーバ。

---
# 反映のめやす

---

# 反映のめやす
<img width="498" alt="Screen Shot 2016-09-26 at 11.46.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/eb5088cf-ef29-5c6a-242e-9e256e9ce05e.png">

---
# めやす
ローカル環境で100回保存するぐらいで10回コミット、それをステージングへ反映させて、お客さん or ディレクターさんでチェック。
ステージングで10回ぐらい検証したら本番環境。

---
# ローカル環境のまとめ
1. 開発が早くなる
2. ローカル、ステージング、プロダクションで3サーバ
3. 10回コミットで上に

---
# ドメインとIPアドレス

---
# ドメイン
- example.com
- wbtoyama.org
- wbtoyama.example.com
- wbtoyama.dev

---
# IPアドレス
- 192.0.2.1
- 192.168.1.1
- 8.8.8.8

---
# ホスト名とIPアドレス
ホスト名 <==> IPアドレス
ホスト名からIPアドレスを教えてもらう => 名前解決

---
# ホスト名とIPアドレス
## 正引き
ホスト名からIPアドレスを調べる
wbtoyama.org => 49.212.235.165

## 逆引き
IPアドレスからホスト名を調べる
49.212.235.165 => www3425.sakura.ne.jp.

---
# これをやってくれるのがDNSサーバ

---
# DNSサーバ
- 名前解決をしてくれるサーバ

---
# パソコンに設定されたDNS

<img width="628" alt="Screen Shot 2016-09-26 at 12.01.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/aae4ee1a-22d8-251b-2b58-b0ccba18dd5a.png">

---
# Hostsファイル

<img width="664" alt="Screen Shot 2016-09-26 at 12.02.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/22a98160-e74f-b390-8464-da1e7c4b87b9.png">

---
# Hostsファイル編集ソフト
- Hoster (Mac OS X)
- HostsFileManager (Windows)

---
# Hostsを使うと
- 開発用のドメインをローカルに向ける
- ブラウザでローカル環境にアクセスできるようになる

---
# でもHostsの編集めんどくさい…

---
# ローカルDNS

---
# ローカルDNS
- 特定のドメインを全部ローカルに向ける
- 例) example.dev
- いちいちHostsファイルの設定をしなくて良い！
- 初期設定はやらないとダメ

---
# ドメイン名とIPアドレスのまとめ
- ドメイン名 => IPアドレス の名前解決
- ローカル開発用にHostsファイルを利用
- ローカルDNSを一度設定すればHostsいじらなくて良い
- Hostsファイル数百行とか大変

---
# ローカルDNS
- example.dev, ex1.dev, ...
- *.devのワイルドカードが行けます！

---


# ウェブサーバとドキュメントルート

---
# ウェブサーバ
- HTMLを出力する
- MAMP, XAMPP
- リクエスト -> レスポンス
- PHPとか (PHPサーバ)

---
# ドキュメントルート
- ドメイン(vhost)に対してどこ(ディレクトリ)を表示させるか

---
<img width="566" alt="Screen Shot 2016-09-26 at 12.48.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/027b8512-d0a7-a10b-1271-a0433b3a258d.png">

---
# バーチャルホストとドキュメントルート
- 案件ごとに ドメイン、ドキュメントルートを設定しなきゃ
- 間違えると動かなくなる
- もっと気軽にテストして欲しい
- 設定めんどい
ｰ 簡単にならない？

---
# 簡単になるんです

---
# VirtualDocumentRoot

---
# VirtualDocumentRoot
- 特定のディレクトリのディレクトリ名をvhost名として認識
- ディレクトリ名 <===> ホスト名
- ディレクトリ作るだけ

---
# ﾎﾟ∀ﾟ) 簡単!

---
# ローカルDNSと組み合わせると…

---
# まとめ
- ディレクトリを作ると新しい環境が出来る
- 初期設定が必要

---
# 再掲

---
# 今日伝えたい事
1. ローカル開発環境は早い
2. 最初の設定が必要
3. ディレクトリを作れば新しい環境ができる

---
# 今日覚えて欲しいキーワード
1. ドメイン、IPアドレス、DNSサーバ
2. バーチャルホストとドキュメントルート

---
# 誰かやってみませんか？

---
# 誰かやってみませんか？
- 今回紹介したことの導入
- 導入のヘルプします
- 導入後についてWordBenchで紹介を一緒に

---
# 誰かやってみませんか？
- できればMac
- フロントの方

---
# やってくれる方募集してます！

---
# おつかれさまでした