はじめに
JavaScript開発をしていくときに、ファイルを書いてサーバーに転送して動作確認をしている方もいるかもしれませんが、高速に開発するためにはすぐに動作確認をしたいので、ローカルWebサーバーが必要になってくるでしょう。
私はJavaScriptのフロントサイドのみの開発をしているので、あまり知らないのですが、PHPやRubyやPythonではローカルのWebサーバーを作成するのは非常に簡単なようですし、
Windows版ですが「簡単WEBサーバー」や「04WebServer」といったフリーソフトもあるようなので、それらを利用している方もいるとは思うのですが、
せっかく様々な分野に食い込んできているJavaScriptなので、WebサーバーもJavaScriptで作ってしまいましょう。
node.js と express を使えば、かなり楽にWebサーバーを立てることができます。
一応、全体を通して Window 環境で構築していきますが、おそらくMacやLinuxでもほとんど同じで環境構築できます。JavaScriptやnode.jsはマルチプラットホームなのでありがたいことです。
環境準備、express のインストール
node.js はインストールしておいてください。
node.jsの本家のページでインストーラがあるので、それで簡単にインストールできます。
インストールできたら、ファルダを作成してそこでコマンドプロンプトからコマンドを入力します。
> mkdir webserver website
> cd webserver
> npm init -y
> npm install --save express
これで、webserverフォルダ内にexpressがインストールされて準備が整いました。
webserverフォルダに、node_modulesフォルダや、package-lock.jsonファイル、package.jsonファイルができると思いますが、説明は省きます。
簡単なwebサーバー
次のファイルを webserver フォルダに配置してください。
UTF-8で保存です。
'use strict';
const express = require('express');
const app = express();
app.use(express.static('../website'));
app.listen(8001, ()=> {
console.log('Express Server 01');
});
これを、node.js で実行します。
> node server01.js
Express Server 01
表示がでて待機状態になります。
停止はCtrl+Cで行えます。
これで、websiteフォルダの内容をWebサーバーで見ることができるようになります。
websiteフォルダに次のindex.htmlファイルを配置して動作を確認してください。
<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="utf-8">
<title>Hello world !</title>
</head><body>
Hello world !
</body></html>
あるいは
でアクセスすると Hello world ! が表示されます。
ファイル一覧を表示できるWebサーバー
さて、上記のものではWebページとしてファイル一覧やフォルダ一覧がリストされないので、そういうWebサーバーを作ります。
webserverフォルダ内に、新しいモジュールをインストールします。
> npm install --save serve-index
次のファイルを、webserverフォルダに配置してください。
'use strict';
const express = require('express');
const app = express();
const rootPath = '../website';
app.use(express.static(rootPath, { index: false }));
//index.htmlを勝手に見に行かない指定
const serveIndex = require('serve-index');
app.use(serveIndex(rootPath, {
icons: true,
view: 'details'
}));
app.listen(8002, ()=> {
console.log('Express Server 02');
});
node.jsで実行します。
> node server02.js
Express Server 02
でアクセスすると index.html がリストアップされます。他のファイルやフォルダを配置すると一覧でみることもできます。
とりあえずこんな感じで、手軽にWebサーバーをローカルで作ることができます。
ご活用ください。
アンインストール方法
念のためにアンインストール方法も書いておきます。
webserverフォルダをカレントディレクトリにしたコマンドプロンプト上で次のコマンドを入力するとアンインストールされます。
> npm uninstall serve-index
> npm uninstall express