Blog

ルート相対パスを使ったHTMLの制作・確認をnode.jsのローカルな簡易サーバで効率的にする方法

2015.07.28Cat:Node.js デザイナー

HTMLのコーディングで、リンク先や画像やCSSのパスの指定方法として、

↑このような”/”から始まるルート相対パスという指定方法を指示される場合があると思います。

 

この方法でコーディングを行った場合、ローカル環境で直接ブラウザに表示すると、

ローカル環境のルートパスを参照してしまうため、画像やCSSが読み込まれず、

ss01

↑このように崩れて確認できないということになります。

 

私はこのような場合、

  • 契約しているテスト用のサーバーにFTPでアップロードして確認する
  • Windowsの場合は「XAMPP」でローカルにApacheのサーバーをたててlocalhostで確認する
  • Macの場合はライブラリのWebServerフォルダに入れてlocalhostで確認する

といった方法をとっていたのですが、

 

テスト用サーバにFTPでアップロードする方法の場合

細かな調整をするときに、調整の度にファイルをFTPでアップロードして確認するのは、

とても時間をとってしまい、手間もかかってしまいます。

 

XAMPPでApacheのサーバーをたてる方法やMacのWebServerを使う方法は、

ファイルの場所がある程度限定されてしまうので、

プロジェクトが変わるときにファイルを入れ替えなくてはなりません。

また、MacのWebServerはファイルの書き換えを行うときに権限の確認などが必要な場合もあり、

自由が効かないこともあります。

 

もっと自由に簡単に、ローカルでこのようなHTMLを確認する方法があります。

それは、Node.jsでサーバをたてる方法です。

 

Node.jsでサーバをたてるというと、なんだか難しそうな感じがするかもしれませんが、

サーバーサイドでのプログラム処理のない、HTMLを表示するだけのサーバなら、

自由な場所に、簡単に設置することができます。

 

方法

手順

  1. Node.jsがPCにインストールされていなければ、インストールする
  2. 簡易サーバ用の2つのファイル(JSファイルと404.html)を目的のフォルダに設置
  3. 設置したJSを実行する

 

1. Node.jsがPCにインストールされていなければ、インストールする

まず、この方法を使うためには、Node.jsがPCにインストールされている必要があります。

もしNode.jsがインストールされていなければ、インストールする必要があります。

 

Node.jsのPCへのインストールはとても簡単です。

公式サイトに行き、「INSTALL」というボタンを押すと、インストーラがダウンロードされますので、

ダウンロードしたファイルを実行すれば、PCにインストールされます。

ss02

インストールの途中でファイルの場所やインストールの方法などを問われますが、

基本的にはインストーラの元々の設定で問題ないです。

 

2. 簡易サーバ用の2つのファイル(JSファイルと404.html)を目的のフォルダに設置

以下の2つのファイルをダウンロードして下さい。

app.js

404.htmlchromeの方は右クリックで「リンク先を名前をつけて保存」で保存してください

こちらは、以下のサイトで紹介いただいている方法を使わせていただいています。

Web コンテンツを開発するための Node.js 簡易 Web サーバー – monoe’s blog – Site Home – MSDN Blogs

こちらで紹介いただいている、wevServer.jsのファイル名はapp.jsに変更しています。

また、ファイル名の指定がない場合のdefaultのファイル名をindex.htmlとし、

ファイルが見つからない場合は404.htmlを表示するように修正いたしました。

 

↓コードはこちら

その他は参考にさせていただいたサイトと同じコードです。

 

この2つのファイルをHTMLを作成しているディレクトリの一番上に配置してください。

(この2ファイルを配置した場所が、ルートディレクトリとして認識されるようになります。)

ss03

 

3. 設置したJSを実行する

最後に設置したJSを実行します。

Windowsの場合はNode.jsをインストールしたときにスタートメニューに追加される、

「Node.js command prompt」を開いてください。

Macの場合はターミナルを開いてください。

開いたら、cdコマンドでディレクトリを先ほどファイルを設置した場所に移動します。

 

例:

次に以下のコードを入力して、JSファイルを実行します。

これで完了です。

 

あとは、app.jsのはじめに設定しているIPアドレスとポート番号を、

ブラウザのアドレスのところに入力して移動すれば、ページが表示されます。

ss04

 

 

平行して別のサイトのコーディングを進めるときなどは、

配置するapp.jsの

↑この部分の数値を変更すれば、療法のサイトを平行して表示することができます。

 

終了するときはコマンドプロンプト、ターミナルで、

Windowsの場合は「CTRL」+「C」

Macの場合は「Control」+「C」

を入力すると、サーバーが停止します。

 

一度やり方を覚えればかなり楽に作業できますので、

是非ご利用ください。

 

参考サイト

Web コンテンツを開発するための Node.js 簡易 Web サーバー – monoe’s blog – Site Home – MSDN Blogs

 

参考図書

掌田 津耶乃 2014 現場で通用する力を身につける Node.jsの教科書

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ