スライド
ローカル開発環境

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

More than 1 year has 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と組み合わせると…
  • まとめ
  • 再掲
  • 今日伝えたい事
  • 今日覚えて欲しいキーワード
  • 誰かやってみませんか?
  • 誰かやってみませんか?
  • 誰かやってみませんか?
  • やってくれる方募集してます!
  • おつかれさまでした