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

カテゴリーから探す

年別から見る

2015/07/29

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

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


<img src="/images/example.png" alt="example">

1	<img src="/images/example.png" alt="example">

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

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

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

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

私はこのような場合、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

方法

手順

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

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

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

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

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

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

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

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

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

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を表示するように修正いたしました。

↓コードはこちら


/*Web コンテンツを開発するための Node.js 簡易 Web サーバー サンプル*/
//Web サーバーが Listen する IP アドレス
var LISTEN_IP = '127.0.0.1';
//Web サーバーが Listen する ポート
var LISTEN_PORT = 8086;
//ファイル名が指定されない場合に返す既定のファイル名
var DEFAULT_FILE = "index.html";

var http = require('http'),
    fs = require('fs');

//拡張子を抽出
function getExtension(fileName) {
    var fileNameLength = fileName.length;
    var dotPoint = fileName.indexOf('.', fileNameLength - 5);
    var extn = fileName.substring(dotPoint + 1, fileNameLength);
    return extn;
}

//content-type を指定
function getContentType(fileName) {
    var extentsion = getExtension(fileName).toLowerCase();
    var contentType = {
        'html': 'text/html',
        'htm' : 'text/htm',
        'css' : 'text/css',
        'js' : 'text/javaScript; charset=utf-8',
        'json' : 'application/json; charset=utf-8',
        'xml' : 'application/xml; charset=utf-8',
        'jpeg' : 'image/jpeg',
        'jpg' : 'image/jpg',
        'gif' : 'image/gif',
        'png' : 'image/png',
        'mp3' : 'audio/mp3',
    };
    var contentType_value = contentType[extentsion];
    if(contentType_value === undefined) {
        contentType_value = 'text/plain';
    }
    return contentType_value;
}

//Web サーバーのロジック 
var server  = http.createServer(); 
server.on('request', 
    function(request, response){ 
        console.log('Requested Url:' + request.url); 
        var requestedFile = request.url; 
        requestedFile = (requestedFile.slice(-1) === '/') ? requestedFile + DEFAULT_FILE : requestedFile;
        console.log('Handle Url:' + requestedFile); 
        console.log('File Extention:' + getExtension( requestedFile));
        console.log('Content-Type:' + getContentType( requestedFile));
        fs.readFile('.' + requestedFile,'binary', function (err, data) {
            if(err) {
                fs.readFile('./404.html', 'UTF-8', function (err, data) {
                    response.writeHead(404, {'Content-Type': 'text/html'});
                    response.write(data);
                    response.end();
                });
            } else {
                response.writeHead(200, {'Content-Type': getContentType(requestedFile)});
                response.write(data, "binary");
                response.end();
            }
        });
    }
);

server.listen(LISTEN_PORT, LISTEN_IP);
console.log('Server running at http://' + LISTEN_IP + ':' + LISTEN_PORT);

/*Web コンテンツを開発するための Node.js 簡易 Web サーバーサンプル*/

//Web サーバーが Listen する IP アドレス

var LISTEN_IP = '127.0.0.1';

//Web サーバーが Listen するポート

var LISTEN_PORT = 8086;

//ファイル名が指定されない場合に返す既定のファイル名

var DEFAULT_FILE = "index.html";

var http = require('http'),

fs = require('fs');

//拡張子を抽出

function getExtension(fileName) {

var fileNameLength = fileName.length;

var dotPoint = fileName.indexOf('.', fileNameLength - 5);

var extn = fileName.substring(dotPoint + 1, fileNameLength);

return extn;

}

//content-type を指定

function getContentType(fileName) {

var extentsion = getExtension(fileName).toLowerCase();

var contentType = {

'html': 'text/html',

'htm' : 'text/htm',

'css' : 'text/css',

'js' : 'text/javaScript; charset=utf-8',

'json' : 'application/json; charset=utf-8',

'xml' : 'application/xml; charset=utf-8',

'jpeg' : 'image/jpeg',

'jpg' : 'image/jpg',

'gif' : 'image/gif',

'png' : 'image/png',

'mp3' : 'audio/mp3',

};

var contentType_value = contentType[extentsion];

if(contentType_value === undefined) {

contentType_value = 'text/plain';

}

return contentType_value;

}

//Web サーバーのロジック

var server = http.createServer();

server.on('request',

function(request, response){

console.log('Requested Url:' + request.url);

var requestedFile = request.url;

requestedFile = (requestedFile.slice(-1) === '/') ? requestedFile + DEFAULT_FILE : requestedFile;

console.log('Handle Url:' + requestedFile);

console.log('File Extention:' + getExtension( requestedFile));

console.log('Content-Type:' + getContentType( requestedFile));

fs.readFile('.' + requestedFile,'binary', function (err, data) {

if(err) {

fs.readFile('./404.html', 'UTF-8', function (err, data) {

response.writeHead(404, {'Content-Type': 'text/html'});

response.write(data);

response.end();

});

} else {

response.writeHead(200, {'Content-Type': getContentType(requestedFile)});

response.write(data, "binary");

response.end();

}

});

}

);

server.listen(LISTEN_PORT, LISTEN_IP);

console.log('Server running at http://' + LISTEN_IP + ':' + LISTEN_PORT);

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

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

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

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

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

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

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

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

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

例:


>cd C:¥Users¥Public¥Documents¥html

1	>cd C:¥Users¥Public¥Documents¥html


$cd  /Users/username/Documents/html

1	$cd /Users/username/Documents/html

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


>node app.js

1	>node app.js

これで完了です。


//Web サーバーが Listen する IP アドレス
var LISTEN_IP = '127.0.0.1'; //←
//Web サーバーが Listen する ポート
var LISTEN_PORT = 8086; //←

//Web サーバーが Listen する IP アドレス

var LISTEN_IP = '127.0.0.1'; //←

//Web サーバーが Listen するポート

var LISTEN_PORT = 8086; //←

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

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

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

配置するapp.jsの


var LISTEN_PORT = 8086; //←ここを任意の数字に変更

1	var LISTEN_PORT = 8086; //←ここを任意の数字に変更

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

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

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

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

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

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

是非ご利用ください。

参考サイト

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

参考図書

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

Author Profile

NINOMIYA

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

2024/11/15

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

2024/10/25

Gulpを使ったプロジェクトの基本設定とSass導入手順

2024/10/11

Difyを用いたチャットボットを作成してみた

2024/09/13

Cloudflare Workersの実践的サンプルの紹介

Company

Our Solutions

Support

News

Blog

カテゴリーから探す

年別から見る

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

方法

手順

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

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

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

参考サイト

参考図書

合わせて読みたい

2024/09/13

2024/08/30

2024/08/02

2024/07/19

2024/11/15

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/07/19

2024/11/15

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/07/19