フロントエンドのローカルテスト用にサーバーを立てる

フロントエンド

概要

フロントエンドの開発で ローカルの index.html などを開いて動作確認などしていると、 chrome のセキュリティの関係でエラーが出ることが多くうまくデバッグできないことが多い。
そのようなときに簡単にサーバーを立てて動作確認する方法です。

express

node.js の webアプリケーションフレームワーク

Express - Node.js Web アプリケーション・フレームワーク

github.com

使い方

express のインストール

$ npm init
$ npm install -g express

サーバー構成

ディレクトリ構造

root
 |-- app.js
 |-- dist
      |-- index.html

※ 今回の構成では root/dist/index.html のテストをしたい

サーバー設定

app.js に設定を記述する。

例

var express = require('express');
var app = express();
  
app.use(express.static('dist'));
  
var port = 3000;
app.listen(port,function(){
    console.log("Expressサーバーがポート%dで起動しました。モード:%s",port,app.settings.env)
});

サーバー起動

$ node app.js

localhost:3000/ にアクセスすることでローカルの index.htmlを確認することができる。