LoginSignup
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-29
1 / 55

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


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


今日伝えたい事

  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
  • フロントの方

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


おつかれさまでした

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3