Successfully reported this slideshow.
ノンプログラマのための  ウェブサーバ入門     Ver0.2(2011-11-11)     0.2:文字が潰れてる部分の修正
自己紹介           factory_ay と申します。           Twitter_id:@factory_ay            (http://twitter.com/#!/factory_ay           F...
案外知られてないウェブサーバの動きと機能他のデザイナさんやコーダーさん達と仕事をしていた時に、何度かサーバという物がよく分からない、危険なモノ、という認識の方が結構居ました• 何となくファイルをUPすれば後は何とかなる• (コーダ/デザイナの)...
サーバを分かると何が嬉しいか?• 動きがわかる事で不安が減る『よく分からないモノ』と仕事をしているから、一々不安がったり仕事の手が止まったり・・・• トラブルの際、対処が数十倍早くなるトラブルは起こさないのがベストですが、起きた時どうすれば良い...
同じ結果を出すためでも、より『うまいやり方』を知っていれば、作業時間が倍、数十倍違ってくることは、この業界よくある。                  要は・・・  素早く仕事を終わらせ、早く帰ろう!!それじゃゴタクはさておき・・・
サーバの種類•   ウェブサーバ•   アプリケーションサーバ•   DNSサーバ•   センドメールサーバ•   データーベースサーバ•   メールサーバ今回、ココで取り扱うのは『ウェブサーバ』と『アプリケーションサーバ』です。
ウェブサーバのお仕事•   ブラウザが何を欲しがっているのか聞く•   目的の物を探しだしてくる•   見つけたファイルを準備してブラウザに送る•   ソレをどうすれば良いのかブラウザに教える•   PHPやCGIなど、プログラム言語だった場合...
アプリケーションサーバのお仕事• PHPやCGIのこと• ウェブサーバからファイルを貰ってお仕事• ファイルの一部/全体を書き換えてブラウザ毎  にファイルを生成、送り出す• 基本的にブラウザが処理出来る結果を返す• プログラム言語によって様々...
ブラウザとサーバの動き  サーバ                                                         ブラウザ     ②ドメインをチェック                       ①このURLの...
もうちょっと詳しく・・・ブラウザとサーバは、アクセスされる際にヘッダと呼ばれる情報でお互いの設定を交換している• リクエストヘッダ(ブラウザからサーバへ・ユーザーエージェント(ブラウザの種類とバージョン・クッキー読み込み・キャッシュなどその他特...
ステータスコード?• ファイルの状況を3桁の数字で表す機能サーバからブラウザに真っ先に送られる最重要情報200:ファイル有ったよ!表示してね(`・ω・´)404:ファイルなかった・・・(´・ω・`)301:ココじゃなく別のURLに移動してね( ...
実際の中身をみてみよう
ウェブサーバのお仕事実際にヘッダを読めるようになる必要はありません。ただの参考ですウェブサーバはブラウザがキチンと表示できるように色んな助けをしてます• どんなファイルなのか?画像なのかHTMLなのか→サーバによって、ファイルがその場で開いたり...
裏を返すと・・・•   サーバ全体で動きがおかしい•   フォームなどで文字化けが頻出•   キャッシュがいつまでも使われて手間•   全体的に不安定•   表示されるはずの物がDLされてしまう•   プログラムには何の問題も無いのにバグる  ...
ウェブサーバの特殊機能ファイルを探してブラウザに送る、以外に実は様々な機能があります•ファイル圧縮転送機能詳細は次のページ•ディレクトリ一覧表示/でアクセスされた際にフォルダの中身丸見え化する機能•ベーシック認証•Favicon•インデックスフ...
圧縮機能HTMLなどをブラウザに送る際に、サーバが圧縮を掛けてサイズを劇的に小さくしてから送る機能サーバ                                                                 ブラウザ ...
実例(圧縮設定前)
実例(圧縮設定後)     もっと重たいHTMLなら劇的に変わります
ウェブサーバの機能を使おう多様なウェブサーバの機能しかし、設定ファイルを弄るのは何かと面倒で危険•ミスしたらサーバがおかしくなる•サーバ管理者しか触れないファイル              ↓         そこで.htaccess
.htaccess?こういうファイル名の設定ファイル• ウェブサーバの全機能を書き換え出来ます• 置いたフォルダ、下の階層にまで影響します。• 上には影響しないので、サーバ全体ではなく  特定のドメインやフォルダだけ設定可能
設定例• 圧縮機能を使うAddOutputFilterByType DEFLATE text/html text/css application/x-javascript• エラーの際に独自のHTMLファイルを使うErrorDocument 5...
URL書き換え機能ウェブサーバの、ドメインを認識して、ファイルを探してブラウザに渡す機能を改変することで、面白い事が出来るようになる•   サーバの引越し•   ドメインの縛りを消す•   存在しないファイルをあるように見せかける•   下の階...
URLリライト1• www 無しのドメインからwww有りに移動 RewriteEngine on RewriteCond %{HTTP_HOST} ^test.com                  ←設定内容 RewriteRule ^(....
URLリライト2(マッピングを書き換える• 実際のフォルダ構成とは異なるURLを作る設定前:http://test.com/sub1/sub2/image/logo.jpg → 404エラー RewriteEngine on RewriteCo...
URLリライト3(異なるドメイン間で同じファイルを読む• 3つのドメインで共通のファイルを使いたいwww.nantoka.com、test.nantoka.com、ssl.nantoka.comそれぞれフォルダが、/nantoka/www/、/...
URLリライトの機能どのドメインにどのファイルを割り当てるのか?という部分を自由に変えることが出来るので、非常に柔軟なURL設計が可能になる。•   テスト用構成から一瞬で本番環境に•   複数のファイルを纏めてスッキリ•   複雑なパラメータ...
.htaccessとアプリケーションサーバ.htaccessを使うと、PHPの設定を書き換える事ができます。•文字コードを変更するphp_value default_charset UTF-8•エラーを表示してより細かく出すphp_flag d...
まとめ• HTMLを表示する、という裏には色んな仕組  みが隠れている。• ウェブサーバには色んな機能が隠されている• より理解すれば、もっと早く上手に仕事をこな  すことが出来る• トラブルの防止/対処の為是非学んでください• 大体のエラーは...
すぺしゃるさんくすこのスライドを作る上で刺激を受けた人達• このみさん• ハムさん(@h2ham• あかぬーさん(@toshiyuki83• 竜さん(@tricknotes• rtiさん(@super_rti• ロックンロールデザイニスト山本さ...
ご閲覧ありがとうございました  貴方のくりえいてぃぶらいふに幸運を。•ツッコミして頂けると喜びます•時々バージョンアップします•分からない箇所あれば聞いて貰えると喜びます             2011-11-10 ver0.1
Upcoming SlideShare
Loading in …5
×

ノンプログラマのためのウェブサーバ入門

7,447 views

Published on

サーバの基礎と挙動を私の知り合いに知ってもらう為に作りました

Published in: Technology
  • Be the first to comment

ノンプログラマのためのウェブサーバ入門

  1. 1. ノンプログラマのための ウェブサーバ入門 Ver0.2(2011-11-11) 0.2:文字が潰れてる部分の修正
  2. 2. 自己紹介 factory_ay と申します。 Twitter_id:@factory_ay (http://twitter.com/#!/factory_ay Facebook:factory.ay (http://www.facebook.com/factory.ay仕事では・・・サーバ、ネットワーク、Java&ScalaやPHP、JS/Htmlデザイン&コーディング以外をごった煮でやってます。Webシステム全般、GEO/位置情報、形態素解析、スクレイピングを仕事にしてます。趣味では・・・トラブルバスター、と言う名のなんでも屋をやってます。壊れたPC&サーバ、クラックされたサイトの復旧、MT/WPの修正、ポスレジ、業務用冷蔵庫の修理など、こちらもごった煮で修理してます。
  3. 3. 案外知られてないウェブサーバの動きと機能他のデザイナさんやコーダーさん達と仕事をしていた時に、何度かサーバという物がよく分からない、危険なモノ、という認識の方が結構居ました• 何となくファイルをUPすれば後は何とかなる• (コーダ/デザイナの)私には関係ないもの• 管理者じゃないと触っちゃいけないもの ↓ いえいえ、理解していると良い事がありますよ
  4. 4. サーバを分かると何が嬉しいか?• 動きがわかる事で不安が減る『よく分からないモノ』と仕事をしているから、一々不安がったり仕事の手が止まったり・・・• トラブルの際、対処が数十倍早くなるトラブルは起こさないのがベストですが、起きた時どうすれば良いのか知っとこう・・・• 動きが分かれば仕事の範囲が分かり担当の 振り分けも早くなるドコで起きたトラブルか?が分かってないので、誰に頼んで良いのかが分からない、とか・・・• 同じ仕事でも、より早く解決出来るすべを見 つける事が出来る・今までプログラムでやっていた事を、設定ファイル一つで簡単に変更!・同じプログラムでも、より柔軟に動かす事が出来るようになる
  5. 5. 同じ結果を出すためでも、より『うまいやり方』を知っていれば、作業時間が倍、数十倍違ってくることは、この業界よくある。 要は・・・ 素早く仕事を終わらせ、早く帰ろう!!それじゃゴタクはさておき・・・
  6. 6. サーバの種類• ウェブサーバ• アプリケーションサーバ• DNSサーバ• センドメールサーバ• データーベースサーバ• メールサーバ今回、ココで取り扱うのは『ウェブサーバ』と『アプリケーションサーバ』です。
  7. 7. ウェブサーバのお仕事• ブラウザが何を欲しがっているのか聞く• 目的の物を探しだしてくる• 見つけたファイルを準備してブラウザに送る• ソレをどうすれば良いのかブラウザに教える• PHPやCGIなど、プログラム言語だった場合 アプリケーションサーバに処理を渡す PHPとかCGIとかプログラム以外全般を担当
  8. 8. アプリケーションサーバのお仕事• PHPやCGIのこと• ウェブサーバからファイルを貰ってお仕事• ファイルの一部/全体を書き換えてブラウザ毎 にファイルを生成、送り出す• 基本的にブラウザが処理出来る結果を返す• プログラム言語によって様々• 独自の設定ファイルを持つ
  9. 9. ブラウザとサーバの動き サーバ ブラウザ ②ドメインをチェック ①このURLの中身が欲しい ドメイン:www.test.com http://www.test2.com/first.htmlサーバに設定されているドメインのリスト1.www.test1.info /public/test1/2.www.test2.com )→合うドメインの設定を見つけたらこのフォルダを /public/test2/ ドキュメントルートとする(そのドメインの一番上のフォルダ)3.www.test3.jp /public/test/ ③ドメイン以降のパスと実際のフォルダを合わせる http://www.test2.com/first.html /public/test2/index.html /public/test2/images/ /public/test2/css/ /public/test2/first.html /public/test2/second.html ④見つかったファイルをブラウザに投げる
  10. 10. もうちょっと詳しく・・・ブラウザとサーバは、アクセスされる際にヘッダと呼ばれる情報でお互いの設定を交換している• リクエストヘッダ(ブラウザからサーバへ・ユーザーエージェント(ブラウザの種類とバージョン・クッキー読み込み・キャッシュなどその他特殊な情報• レスポンスヘッダ(サーバからブラウザへ・ステータスコード・クッキー保存・キャッシュの有効期間・ファイルの種類
  11. 11. ステータスコード?• ファイルの状況を3桁の数字で表す機能サーバからブラウザに真っ先に送られる最重要情報200:ファイル有ったよ!表示してね(`・ω・´)404:ファイルなかった・・・(´・ω・`)301:ココじゃなく別のURLに移動してね( ´∀`)304:自分のキャッシュ使え!聞くな(゚Д゚)500: エラった・・・何も聞くな・・・(‘A`)よく『キャッシュで表示が変わらない〜』っての はサーバから304ステータスコードが送らてい るため、新しいHTMLをブラウザが使わないか ら
  12. 12. 実際の中身をみてみよう
  13. 13. ウェブサーバのお仕事実際にヘッダを読めるようになる必要はありません。ただの参考ですウェブサーバはブラウザがキチンと表示できるように色んな助けをしてます• どんなファイルなのか?画像なのかHTMLなのか→サーバによって、ファイルがその場で開いたりDLされたり、と言った動きの秘密• エンコード情報を教えます→HTMLのcharsetを読む前に使われます• キャッシュの期間を教えます→キャッシュをいつまで使えば良いのか?時間を過ぎたキャッシュは自動で破棄• ファイルの大きさを教えます→ファイルのDLが後何分で終わるのか?の計算など
  14. 14. 裏を返すと・・・• サーバ全体で動きがおかしい• フォームなどで文字化けが頻出• キャッシュがいつまでも使われて手間• 全体的に不安定• 表示されるはずの物がDLされてしまう• プログラムには何の問題も無いのにバグる ↓こういった問題はウェブサーバの設定がおかし くなってしまってるからかも?
  15. 15. ウェブサーバの特殊機能ファイルを探してブラウザに送る、以外に実は様々な機能があります•ファイル圧縮転送機能詳細は次のページ•ディレクトリ一覧表示/でアクセスされた際にフォルダの中身丸見え化する機能•ベーシック認証•Favicon•インデックスファイル/でアクセスされた際にindex.htmlが表示されるのはこの機能 index.phpやindex.cgiの設定もこの機能を弄ったもの etc…
  16. 16. 圧縮機能HTMLなどをブラウザに送る際に、サーバが圧縮を掛けてサイズを劇的に小さくしてから送る機能サーバ ブラウザ このURLの中身頂戴 ファイル発見! http://www.test2.com/first.html /public/test2/first.html 圧縮前:500KB 圧縮の設定がある場合 (AddOutputFilterByType DEFLATE text/html)/public/test2/first.html 圧縮後のファイルを送信 圧縮後:50KB ブラウザが自動で解凍&表示
  17. 17. 実例(圧縮設定前)
  18. 18. 実例(圧縮設定後) もっと重たいHTMLなら劇的に変わります
  19. 19. ウェブサーバの機能を使おう多様なウェブサーバの機能しかし、設定ファイルを弄るのは何かと面倒で危険•ミスしたらサーバがおかしくなる•サーバ管理者しか触れないファイル ↓ そこで.htaccess
  20. 20. .htaccess?こういうファイル名の設定ファイル• ウェブサーバの全機能を書き換え出来ます• 置いたフォルダ、下の階層にまで影響します。• 上には影響しないので、サーバ全体ではなく 特定のドメインやフォルダだけ設定可能
  21. 21. 設定例• 圧縮機能を使うAddOutputFilterByType DEFLATE text/html text/css application/x-javascript• エラーの際に独自のHTMLファイルを使うErrorDocument 500 /wwww/sc/500.html• ファイルの取扱を変えるAddType application/x-httpd-php .inc (.incファイルもPHPとして取り扱うAddType “application/vnd.ms-excel” .xls (Excelを開けるようにする• インデックスファイルを変更するDirectoryIndex index.html index.htm index.cgi index.php• エンコードの設定を変えるdefault_charset = "UTF-8" 更に・・・
  22. 22. URL書き換え機能ウェブサーバの、ドメインを認識して、ファイルを探してブラウザに渡す機能を改変することで、面白い事が出来るようになる• サーバの引越し• ドメインの縛りを消す• 存在しないファイルをあるように見せかける• 下の階層にあるファイルを自由に移動できる
  23. 23. URLリライト1• www 無しのドメインからwww有りに移動 RewriteEngine on RewriteCond %{HTTP_HOST} ^test.com ←設定内容 RewriteRule ^(.*)$ http://www.test.com/ [R=301,L]ステータスコード301が発動し、ブラウザは自動で移動するhttp://test.com/first.html → http://www.test.com/• パスそのままでドメインをお引越し RewriteEngine on RewriteCond %{HTTP_HOST} ^test.com RewriteRule ^(.*)$ http://www.nantoka.com/$1 [R=301,L]ステータスコード301が発動し、ブラウザはパスを保ったまま自動で移動するhttp://test.com/first.html → http://www.nantoka.com/first.html
  24. 24. URLリライト2(マッピングを書き換える• 実際のフォルダ構成とは異なるURLを作る設定前:http://test.com/sub1/sub2/image/logo.jpg → 404エラー RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^sub1/sub2/image/(.*)$ /test/image/$1 [QSA,L]設定後: http://test.com/sub1/sub2/image/logo.jpg → /test/image/logo.jpg• パラメーターを隠すhttp://test.com/view.php?name=abc&day=2011-11-10 というURLを静的に RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^view/(.*?)/(.*?)/$ /view.php?name=$1&day=$2 [QSA,L]設定後: http://test.com/view/abc/2011-11-10/ でアクセス可能に
  25. 25. URLリライト3(異なるドメイン間で同じファイルを読む• 3つのドメインで共通のファイルを使いたいwww.nantoka.com、test.nantoka.com、ssl.nantoka.comそれぞれフォルダが、/nantoka/www/、/nantoka/test/、/nantoka/ssl/バラバラで相対にも出来ない。でも画像は同じ物を使いたい・・・/common/image/ ←このフォルダを3つのドメインで共用する場合 RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^/image/(.*)$ /common/image/$1 [QSA,L]http://www.nantoka.com/image/logo.jpg → /common/image/logo.jpghttp://test.nantoka.com/image/logo2.jpg → /common/image/logo2.jpghttp://ssl.nantoka.com/image/small/logo.jpg → /common/image/small/logo.jpg
  26. 26. URLリライトの機能どのドメインにどのファイルを割り当てるのか?という部分を自由に変えることが出来るので、非常に柔軟なURL設計が可能になる。• テスト用構成から一瞬で本番環境に• 複数のファイルを纏めてスッキリ• 複雑なパラメーターを隠してスッキリ• 面倒な引越し、サブドメイン対応も簡単• 徐々に肥大化するサイトのダイエットも
  27. 27. .htaccessとアプリケーションサーバ.htaccessを使うと、PHPの設定を書き換える事ができます。•文字コードを変更するphp_value default_charset UTF-8•エラーを表示してより細かく出すphp_flag display_errors Onphp_value error_reporting 2047•アップできるサイズを増やすphp_value upload_max_filesize 8M特定のドメイン、特定のフォルダの限定で簡単に変更可能に!
  28. 28. まとめ• HTMLを表示する、という裏には色んな仕組 みが隠れている。• ウェブサーバには色んな機能が隠されている• より理解すれば、もっと早く上手に仕事をこな すことが出来る• トラブルの防止/対処の為是非学んでください• 大体のエラーはプログラム上で起きる・・・し かし、探しても全く見つからない場合、ひょっ とするとウェブサーバの方に原因があるのか も?
  29. 29. すぺしゃるさんくすこのスライドを作る上で刺激を受けた人達• このみさん• ハムさん(@h2ham• あかぬーさん(@toshiyuki83• 竜さん(@tricknotes• rtiさん(@super_rti• ロックンロールデザイニスト山本さん (@WEBdeDB
  30. 30. ご閲覧ありがとうございました 貴方のくりえいてぃぶらいふに幸運を。•ツッコミして頂けると喜びます•時々バージョンアップします•分からない箇所あれば聞いて貰えると喜びます 2011-11-10 ver0.1

×