Windows10にNodejsをインストールして自分だけのWEBサーバーを作る

2019年1月6日 17:58

はじめに

自分のWindwos10パソコンで、自分だけのWEBサーバーを作る方法を紹介します。※WEBサーバーはNodejsを使います。

概要

・Nodejsのインストール手順を紹介します。
・Nodejsがインストールされたか確認する方法を紹介します。
・自分だけがアクセスできるWEBサイトの作り方を紹介します。
・作ったWEBサイトに実際にアクセスしてみます。
・作ったWEBサイトで出題アプリを動かす方法を紹介します。
・出題アプリのWEBサイトにアクセスしてみます。

自分だけのWEBサーバーの作り方

1. WEBサーバーを作るために使用するNodejsのインストーラーをダウンロードします。
Nodejsのインストーラーがあるサイト（https://nodejs.org/en/download/）にアクセスし、Windows Installer をクリックするとダウンロードが始まります。

2. ダウンロードしたmsiファイルをダブルクリックします。

3. インストーラの画面が表示されたら、Nextをクリックします。

4. 使用許諾契約に問題なければ、承諾しNextをクリックします。

5. Nodejsをインストールするパスを設定しNextをクリックします。（こだわりがなければ、パスの変更は不要です）

6. インストールするコンポーネントを選択します。
よくわからなければ、なにも変更せずNextをクリックします。

7. Install をクリックし、インストールを開始します。

8. もし、↓の画面から何も進まなければ、Widowsのタスクバーを確認します。

9. Widowsのタスクバーを確認し、↓このようなマークが点滅していたら、クリックします。

10. このような画面が表示されたら、はいをクリックします。そうすると、Nodejsのインストールが開始されます。

11. このような画面が表示されたらインストール成功です。

Nodejsがインストールされたか確認する方法

Windows PowerShell という、WIndows付属のアプリを起動します。
1. Windows マークをクリックします。

2. PowerShellを起動します。
Windows マークをクリックしメニューが表示された状態で、キーボードを使い、powershell とタイプすると、Windows PowerShell が表示されます。表示された、PowerShell をクリックすると、PowerShell が起動します。

3. 起動したPowerShellで、node --version と入力し実行します（Enter(エンター)キーをたたきます）。バージョンが表示されればＯＫです。（表示される数値が異なる場合があります）

4. 次に、npm --version を実行します。
バージョンが表示されればＯＫです。

WEBサイトを作ってみる

1. WEBサイトを作る場所を用意します。
例えば、C:\Users\hoge\Data\に nodejs-test というフォルダを作成します。

2. PowerShellを起動します。

3. PowerShellで以下のコマンドを実行し、手順 1 で作成したフォルダの下に移動します。

cd C:\Users\hoge\Data\nodejs-test

4. 初期設定を行うため、以下のコマンドを実行します。コマンドは対話式で入力が求められますが、今回はすべて何も入力せずに Enter キーで進めます。

npm init

PowerShellの実行内容は↓のようになります。

PS C:\Users\hoge\Data\nodejs-test> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nodejs-test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\hoge\Data\nodejs-test\package.json:

{
  "name": "nodejs-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes)
PS C:\Users\hoge\Data\nodejs-test>

5. Express をインストールします。

npm install express --save

実行内容は以下のようになります。

PS C:\Users\hoge\Data\nodejs-test> npm install express --save
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN nodejs-test@1.0.0 No description
npm WARN nodejs-test@1.0.0 No repository field.

+ express@4.16.4
added 48 packages from 36 contributors and audited 121 packages in 2.885s
found 0 vulnerabilities

PS C:\Users\hoge\Data\nodejs-test>

この時点で、このようにいくつかファイルが作成されています。

（あと、2つファイルを用意すれば完成です。）

6. app.js ファイルを作成します。
テキストエディタで作成し、拡張しを .js に変更します。
↓ app.jsの中身

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

7. hello.html を作成します。
hello.html がアクセスするWEBサイトになります。
↓ hello.html の中身

<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
こんにちは Nodejs
</body>
</html>

全ての準備が完了すると、手順1で作成した nodejs-test フォルダの下は、このようになっています。

作成したサイトにアクセスしてみる

1. PowerShell を起動します。

2. PowerShellで以下のコマンドを実行します。
手順 1 で作成したフォルダの下に移動します。

cd C:\Users\hoge\Data\nodejs-test

3. WEBサービスを開始するため、以下のコマンドを実行します。

node .\app.js

「Expressサーバーポートが・・・」と表示されればＯＫです。

WEBサイトにアクセスしてみる

1. NodejsをインストールしたWindows でWEBブラウザを起動し、以下のURLにアクセスします。

http://localhost:3000/hello.html

2. このように、WEBサイトが表示されれば成功です。

出題アプリのサイトを作ってみる

もう少し凝ったWEBサイトを動かしてみます。私が作成したWEBサイトです。選択形式の試験を受けるWEBサイトを作ります。作るといっても、ダウンロードしたファイルをhello.html と同じフォルダに置くだけです。

以下のサイトからファイルを取得し、hello.html と同じところに配置します。

1. 上記サイトを開きClone or download をクリックし、Download ZIP でダウンロードします。

2. ダウンロードしたファイルを右クリックし「すべて展開」で、ファイルを展開します。

3. 展開したファイルをhello.htmlと同じところにコピーします。以下のようになれば準備完了です。

出題アプリを動かしてみる

Nodejs をインストールしたWindowsでブラウザを開き以下サイトにアクセスします。

http://localhost:3000/mondai.html

上手く動作すれば、音読で問題を読み、正しい選択をすると正解ですと言います。間違えると不正解ですと言います。

トラブルシュート

トラブル：node .\app.js コマンドを実行したらエラーになる。

PS C:\Users\hoge\Data\nodejs-test> node .\app.js
internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'express'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\Users\hoge\Data\nodejs-test\app.js:1:77)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

エラーの対処について
Express をインストールしていない可能性があります。npm install express --save を実行しインストールを試してみてください。
Express をインストールしてもエラーが発生する場合は、すでに node ./app.js を実行している可能性があります。

さいごに

一度作り方を覚えると何かと便利と思います。

こんな弱小ブログでもサポートしてくれる人がいることに感謝です。