Edited at

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

More than 3 years have passed since last update.


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



ローカル開発環境便利ですよ!



今日伝えたい事


  1. ローカル開発環境は早い

  2. 最初の設定だけすればOK!

  3. ディレクトリを作れば作れる!



その他


  • 今日は概念を中心に

  • 具体的なやり方については今後是非

  • 遠くないうちに誰かがきっと…



今日覚えて欲しいキーワード


  1. ドメイン、IPアドレス、DNSサーバ

  2. バーチャルホストとドキュメントルート



あらすじ


  1. ローカル開発環境

  2. ウェブ開発用のサーバ構成はこれ!

  3. ドメインとIPアドレス

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



ローカル開発環境


  1. 手元のパソコンで動く開発環境

  2. FTPとかでアップしない

  3. 会社内のローカルサーバ -> ギリセーフ…?



ローカル開発環境



めっちゃ早いです



ローカル開発環境が早い


  1. 壊してもへーきへーき

  2. 遅延がないのでレスポンスが早い


    • アップロード (500ms)

    • ネットワーク (100ms)



  3. ライブエディットできる





ライブエディット イケてる!



IntelliJ おすすめです!



この話はまたの機会に



ウェブ開発用のサーバ構成


  • ローカル開発環境
    -

  • (公開テスト環境)
    -

  • ステージング環境
    -

  • プロダクション環境 (本番環境)
    -



ウェブ開発用のサーバ構成


  • ローカル開発環境


    • ローカルの開発環境。主に開発する環境。



  • ステージング環境


    • 本番環境に近い環境での動作チェック。お客さんとの検証。



  • プロダクション環境 (本番環境)


    • 公開サーバ。





反映のめやす



反映のめやす

Screen Shot 2016-09-26 at 11.46.28.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

Screen Shot 2016-09-26 at 12.01.47.png



Hostsファイル

Screen Shot 2016-09-26 at 12.02.59.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)に対してどこ(ディレクトリ)を表示させるか


Screen Shot 2016-09-26 at 12.48.56.png



バーチャルホストとドキュメントルート


  • 案件ごとに ドメイン、ドキュメントルートを設定しなきゃ

  • 間違えると動かなくなる

  • もっと気軽にテストして欲しい

  • 設定めんどい
    ー 簡単にならない?



簡単になるんです



VirtualDocumentRoot



VirtualDocumentRoot


  • 特定のディレクトリのディレクトリ名をvhost名として認識

  • ディレクトリ名 <===> ホスト名

  • ディレクトリ作るだけ



ポ∀゚) 簡単!



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



まとめ


  • ディレクトリを作ると新しい環境が出来る

  • 初期設定が必要



再掲



今日伝えたい事


  1. ローカル開発環境は早い

  2. 最初の設定が必要

  3. ディレクトリを作れば新しい環境ができる



今日覚えて欲しいキーワード


  1. ドメイン、IPアドレス、DNSサーバ

  2. バーチャルホストとドキュメントルート



誰かやってみませんか?



誰かやってみませんか?


  • 今回紹介したことの導入

  • 導入のヘルプします

  • 導入後についてWordBenchで紹介を一緒に



誰かやってみませんか?


  • できればMac

  • フロントの方



やってくれる方募集してます!



おつかれさまでした

  • ウェブ開発用のサーバ構成
  • ウェブ開発用のサーバ構成
  • 反映のめやす
  • 反映のめやす
  • めやす
  • ローカル環境のまとめ
  • ドメインとIPアドレス
  • ドメイン
  • IPアドレス
  • ホスト名とIPアドレス
  • ホスト名とIPアドレス
  • これをやってくれるのがDNSサーバ
  • DNSサーバ
  • パソコンに設定されたDNS
  • Hostsファイル
  • Hostsファイル編集ソフト
  • Hostsを使うと
  • でもHostsの編集めんどくさい…
  • ローカルDNS
  • ローカルDNS
  • ドメイン名とIPアドレスのまとめ
  • ローカルDNS
  • ウェブサーバとドキュメントルート
  • ウェブサーバ
  • ドキュメントルート
  • バーチャルホストとドキュメントルート
  • 簡単になるんです
  • VirtualDocumentRoot
  • VirtualDocumentRoot
  • ポ∀゚) 簡単!
  • ローカルDNSと組み合わせると…
  • まとめ
  • 再掲
  • 今日伝えたい事
  • 今日覚えて欲しいキーワード
  • 誰かやってみませんか?
  • 誰かやってみませんか?
  • 誰かやってみませんか?
  • やってくれる方募集してます!
  • おつかれさまでした