WindowsでNode.jsから仮想環境作って動かす

※コチラの記事はブログからのほぼ転載です。

インストール



ざっくり動かすまでの方法書くと、『本家』から、Windowsのbitの合ってるものをDLして、インストールで完了。

余談だが『nullivex/nodist』を使うとバージョン管理に便利らしい。

解りやすい説明サイトがあったから、ここ参照したらいいと思います。

Windows上でNode.jsを実行してHello worldをブラウザに表示する方法 - Qiita

Node.js使ってみる

コマンドプロンプトとかコマンド実行できるもの(以下:コマンド)を使っていく。

node -v

これが上手く動かなかった場合、パスが通っていない可能性がある。

通していない場合、使うとき(※windowsの場合の例)

cd C:\Program Files\nodejs\node.exe D:\aaa\ex.js

としたくなるが、起動しなくて、node.jsのディレクトリまで1回移動してから命令しなくてはいけない。

つまりこうなる。

cd C:\Program Files\nodejs\

node.exe D:\aaa\ex.js

めんどくさいので、パス通すことをオススメする。

サーバーを構築して動かす

サーバを試しに動かすのに、最適だった、本家でも使っていた『node_chat』は、もはや過去の産物だから使えぬ。

諦めて別の方法でサーバを動かしていく。

WEBサーバー起動で、単純な表示させてみる

『hello.js』作る。仮にポートは900とした。

const http = require('http');

const PORT = 900;
const server = http.createServer((req, res)=>{
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!!');
});
server.listen(PORT);
console.log(`Server running at http://localhost:${PORT}/`);

作ったらコマンドから

node hello.js

するとブラウザから、下記のどれでもアクセス出来る。

localhostは近年ブラウザに嫌われてるから、個人的にオススメしたくない。

他の仮想環境起動してようが、Apache起動してようが、関係ない。

ただ他のとこから、Node.jsで使用しているポート(今回の場合は900)だけは、使わないように注意する。

一応書くと、PORTの設定を80にするなら、URLにポートの指定は不要。

動かし方はこれでOK。

WEBサーバー起動して、外部ファイルを読み込ませてみよう

読み込ませるファイルは下記の状態。


  • 読み込むファイルは『/test/index.html』

  • index.htmlと同じ階層に『js.js』『css.css』『hk.png』を置き、index.html内で使用

  • ポートは900

ファイルの位置関係はこんな感じ。


./処理.js
./test/index.html
./test/js.js
./test/css.css
./test/hk.png

外部ファイル読み込み1:単純ファイル名指定

『load.js』とした。

const http = require("http");

const PORT = 900;
const fs = require("fs");

const server = http.createServer((req, res) => {
fs.readFile("./test/index.html", function(err, data) {
res.writeHead(200, { "Content-Type": "text/html" });
res.end(data, "utf-8");
});
});
server.listen(PORT);
console.log(`Server running at http://localhost:${PORT}/`);

そしてコマンドで呼び出す ※以下同様

node load.js

読み込み対象ファイルがない場合、真っ白画面が表示される。

createServerでwriteHeadされているので、何も内容のないhtmlページがあるのだから、Not Findにはならない。

外部ファイル読み込み2:参照ファイルも読み込ませる

読み込み対象のCSSとかJSが読まれていない。階層違うからね。

不満なので、読み込むように処理を変更させる。

『app.js』とした。

Node.jsで書いたWebサーバでJSやCSSを読み込む - Qiita』を基本にしてるが、1個1個全て設定はメンドウ。

file-typeモジュール使えるとこは、使うことにした。

npm install --save file-type

file-typeモジュール対象外であれば『undefined』を返してくる。

const http = require("http");

const fs = require("fs");
const PORT = 900;
const filetype = require("file-type");
// ファイル保存場所
const dirpath = "./test";
//const dirpath = __dirname + "/test";

const server = http.createServer(function(req, res) {
var url = req.url; // リクエストからURL取得
if (url == "/") {
// ディレクトリのみ指定の場合は『index.html』固定
url = "/index.html";
}
var path = dirpath + url; //リクエストURLを相対パスへ変換
console.log(path);

var tmp = path.split("."); //『.』区切りで配列にする
var ext = tmp[tmp.length - 1]; // tmp配列の最後の要素(拡張子)を取得
try {
var buf = fs.readFileSync(path); // encoding指定しなければBuffer取得
} catch (error) {
console.log('not find!');
return false;
}
var type = filetype(buf);
console.log(type);

// 拡張子判定
switch (ext) {
case "js": // .js = JavaScript
fs.readFile(path, function(err, data) {
res.writeHead(200, { "Content-Type": "text/javascript" });
res.end(data, "utf-8");
});
break;
case "css": // .css = StyleSheet
fs.readFile(path, function(err, data) {
res.writeHead(200, { "Content-Type": "text/css" });
res.end(data, "utf-8");
});
break;
case "html": // .html = html
fs.readFile(path, function(err, data) {
res.writeHead(200, { "Content-Type": "text/html" });
res.end(data, "utf-8");
});
break;
default:
// 他はfiletypeの自動判定
fs.readFile(path, function(err, data) {
res.writeHead(200, { "Content-Type": type.mime });
res.end(data);
});
break;
}
});
server.listen(PORT);
console.log(`Server running at http://localhost:${PORT}/`);

読み込み対象ファイルがない場合、その旨メッセージ出すようにした。

じゃないとnode.jsが強制終了しちゃうから…

readFileSyncはエンコードを指定すれば、Bufferでなくファイル内容を読める。

var file = fs.readFileSync(path,{encoding: "utf-8"});

ファイルが無ければ止まるから注意。

外部ファイル読み込み3:Expressモジュールを使う

先に書いた本家が使ってたchatで、Expressモジュール使ってみる。

Expressモジュール使おうと思ったら、標準で入ってなかったので、入れる必要がある。

npm install --save express

因みにアンインストール時は

npm uninstall express --save

今回は『exp.js』とする。

const express = require("express");

const app = express();
const PORT = 900;

const server = app.listen(PORT, function(){
var host = server.address().address;
var port = server.address().port;
console.log('Server running at http://%s:%s', host, port);
});

// 同ディレクトリ内と判断する
app.use(express.static("test")); // 相対
// app.use(express.static(__dirname + '/test')); // 絶対

app.get()と戦っていたが、ファイルがあって、処理をさせるでもなければ、不要だった。

シンプルだし、早い。

ファイルがない場合は、

Cannot GET /index.html


と見つからなかったファイル情報が表示される。

まとめ

モジュールって便利っすね!