Windows10にNodejsをインストールして自分だけのWEBサーバーを作る
はじめに
自分の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(エンター)キーをたたきます)。バージョンが表示されればOKです。(表示される数値が異なる場合があります)
4. 次に、npm --version を実行します。
バージョンが表示されればOKです。
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サーバーポートが・・・」と表示されればOKです。
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 を実行している可能性があります。
さいごに
一度作り方を覚えると何かと便利と思います。
こんな弱小ブログでもサポートしてくれる人がいることに感謝です。