忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[140] [139] [138] [137] [136] [135] [134] [133] [132] [131] [130

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

相対ルートパスのサイトをローカルで見る方法(バーチャルホスト設定)

配属最初の一週間が終わりました。

かなりお仕事を振っていただいて、楽しく作業をしている反面、
細かいミスが多くてげんなりしてしまいます。

当事者として仕事に関わることは楽しいけれど、
一歩引いて作業をしないと周りが見えなくなってしまうな、
とも感じている今日この頃です。



前置き長くなりましたが、今回は
「相対ルートパスのサイトをローカルで見る方法」(バーチャルホスト設定方法)のメモ。


なぜこれを設定するのかというと、
まずはWebサイトのリンクのパスからの話にさかのぼります。

パスの書き方には3種類あります。

絶対パス
http://granshe.blog.shinobi.jp/など、http://からパスを書くもの。
外部リンクを貼るときはこれ。
相対パス
../index.htmlや../company/about.htmlなど、記述してあるHTMLから見て、リンク先のHTMLがどのディレクトリにあるのかを指定。
同じサーバに上がっていないとできない。
ルート相対パス
/index.htmlや/company/about.htmlなど、はじめに「/」がつきます。
この/が、「ルート」を示します。すべてのページ共通でサイトのルートディレクトリからどこにリンクするのかを示します。
相対パスと書いてある通り、同じサーバに上がっていないとできません。

です。

大規模で、かつ階層が深いサイトの場合、
どのページに対しても同じパスでリンクを貼ることができるので、
相対ルートパスは本当に便利です(と、最近実感しました)。


しかし、この相対ルートパスは、
ローカル上でサイトが確認できない

XAMPPを使ってローカルサーバを立ててこれを解消できるのですが、
自由にバーチャルホストの場所を指定する方法を知らなくて、
なんて自由度のないシステムなんだ!と思っていたのですが、
現場の先輩におしえていただきました!

これで、どこのフォルダにサイトを作っても、
ローカル上で動作確認、レンダリングチェックが可能に。


XAMPPが既にインストールされているものと仮定して、手順は2つだけ。

下記は、Cドライブ直下にXAMPPをインストールし、
Dドライブ直下の「sitemane」というフォルダに作ったサイトを
バーチャルホストとして指定する例です。


1.C:\xampp\apache\conf\extraの中にある「httpd-vhosts.conf」の最下部に下記コードを追加。

<VirtualHost *:80>
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@sitename
    DocumentRoot D:/sitename
    ServerName sitename
  <Directory "D:/sitename">
    Options Indexes FollowSymLinks Includes ExecCGI
    Order deny,allow
    Deny from All
    Allow from localhost 127.0.0.1
  </Directory>
</VirtualHost>

と入れる。


2.C:\WINDOWS\system32\drivers\etcの中にある「hosts」の最下行のlocalhostの後ろに半角スペースを空け、サーバ名を記入。

127.0.0.1       localhost sitemane

または、

127.0.0.1       localhost
127.0.0.1       sitemane

でもOKです。


これでローカル上で相対ルートパスサイトをきちんと見ることができます。
注意して欲しいのは、サイトのパスに半角スペースが入るとダメなようですので、
(たとえば「Program Files」など。)注意してください。


以上、メモ終わり。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
03« 2017/04 »05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
ブログ内検索
忍者ブログ [PR]