Help us understand the problem. What is going on with this article?

node.js express でWebサーバーを作り、ファイル/ディレクトリ一覧表示する

More than 1 year has passed since last update.

はじめに

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で保存です。

server01.js
'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ファイルを配置して動作を確認してください。

index.html
<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="utf-8">
<title>Hello world !</title>
</head><body>
Hello world !
</body></html>

http://localhost:8001/

あるいは

http://localhost:8001/index.html

でアクセスすると Hello world ! が表示されます。

ファイル一覧を表示できるWebサーバー

さて、上記のものではWebページとしてファイル一覧やフォルダ一覧がリストされないので、そういうWebサーバーを作ります。

webserverフォルダ内に、新しいモジュールをインストールします。

> npm install --save serve-index

次のファイルを、webserverフォルダに配置してください。

server02.js
'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

http://localhost:8002/

でアクセスすると index.html がリストアップされます。他のファイルやフォルダを配置すると一覧でみることもできます。

とりあえずこんな感じで、手軽にWebサーバーをローカルで作ることができます。
ご活用ください。

アンインストール方法

念のためにアンインストール方法も書いておきます。

webserverフォルダをカレントディレクトリにしたコマンドプロンプト上で次のコマンドを入力するとアンインストールされます。

> npm uninstall serve-index
> npm uninstall express
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした