nodeで簡易サーバを簡単に立てる

宣伝

　みなさん、おはこんばんちは。みっきぃです。こちらの記事は以下のアドベントカレンダーの企画の一つです。

adventar.orgよろしければ他の記事もご覧ください。

鯖を立てたい

　さて、今回の記事ですが、node.jsを使って静的なファイルを配信する簡単なWebサーバを立てる方法の紹介です。

　Webアプリなどを開発する際、基本的にはローカル上のファイルを直接ブラウザで開くことでアプリのビューを確認することができます。しかし、XHRやfetchを用いてAjaxを使用するアプリを作成する場合は、それらの振る舞いを確認するためにサーバを介してアプリの挙動を確認する必要があります。

　「簡易サーバ構築」と言うと、Pythonの「SimpleHTTPServer」などが有名ですが、今回はnode.jsの「static-server」を使用し、上記の課題の解決に当たりたいと思います。

導入から実行まで

　早速導入していきましょう。まず当然ですが今回のサーバを実行するためにはnode.jsとnpmが必要になります。

Node.js

node.jsを導入していない場合は先にそちらを導入しましょう。

　node.jsとnpmの準備が整ったら、ターミナルを起動し、以下のコマンドを入力しましょう。

$ npm install -g static-server

※$はプロンプトです

上記のコマンドを実行すると、node.jsのグローバル環境に「static-server」がインストールされます。導入は以上です。簡単！

　続いて実際にサーバを実行して挙動を確認してみましょう。今回は以下のサンプルスクリプトを実行します。

・index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>static server test</title>
</head>
<body>
 <script>
 window.addEventListener("load", _ => {
fetch("./data.json")
 .then(res => res.json())
 .then(json => console.log(json));
 }); 
 </script>
</body>
</html>

・data.json

{
"name": "mickey",
"sex": "male",
"age": 21
}

・スクリプトを実行

f:id:singing-programmer:20171221235631p:plain

・localhost:9080/へアクセスした結果(Firefox 57.0.2 Windows x64)

f:id:singing-programmer:20171221235646p:plain

やりました！　たったこれだけの操作でWebサーバを立てられました。

終わりに

　node.jsは今回のような至極簡単なサーバの立ち上げから、本格的なサーバサイドスクリプトの実行、果てはデスクトップアプリやスマートフォンアプリの開発基盤にまで及んでいる、今アツい技術の一つです。これをきっかけにnode.jsの世界に触れて見てはいかがでしょうか？