LogoMark.png

Node.js/Framework の変更点


#author("2019-11-26T20:12:30+09:00","default:inoue.ko","inoue.ko")
*Node.js|Framework
~


**Express でWebサーバー
https://expressjs.com/ja/
npm には様々なパッケージが存在しますが、Expressは 定番Webフレームワークです。以下、静的サイトを表示するWebサーバーの事例です。ターミナルからお試し下さい。

***準備
-適当な場所に webserver フォルダを作って下さい。
-ターミナルでそこへ移動します。
 $ cd /Users/XXXX/webserver
~

***プロジェクトの初期化 > package.json の生成
 $ npm init
 
 package name: (webserver)
 version: (1.0.0)
 description:
 entry point: (index.js)
 test command:
 git repository:
 keywords:
 author:
 license: (ISC)
 About to write to /webserver/package.json:
 
 {
   "name": "webserver",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "koichi inoue",
   "license": "ISC"
 }
 
 Is this ok? (yes) yes
以上で、カレントディレクトリに package.json が生成されます。
~

***Expressのインストール
 $ npm install express
このコマンドで、カレントディレクトリに node_modules フォルダができて、関連のファイルが入ります。
~

***server.js を書いてカレントに保存
静的なファイルをホスティングするコードは以下のとおり、簡単です。
 const express = require("express");
 const app = express();
 const port=8000;
 app.use(express.static('./'));
 app.listen(port, ()=> {
   console.log('Server running on port:'+port);
 });
~

***サンプルページの投入
カレントディレクトリに適当な index.html を投入して下さい。
~


***起動と動作確認
-package.json に起動コード(以下の "start":・・の一行のみ)を追加
  :
 "scripts": {
   "start":"node server.js",
   "test": "echo \"Error: no test specified\" && exit 1"
 },
  :
-npmコマンドで起動
 $ npm start
 Server running on port:8000

-ブラウザでアクセス
 http://localhost:8000 にアクセス
''付記'':ディレクトリ内に置いた sample.html にアクセスするには・・
 http://localhost:8000/sample.html でアクセス可能です。

-終了方法等は前述の事例と同様です。
 [CTRL]+[C]

~
~


**Express でWebサーバー|Files
前節の説明内容に沿って作成したパッケージを以下に置いています。Node.js と npm がインストール済みの環境であれば、以下の手順でお試しいただけます。

https://github.com/koichi-inoue/NodeJS_WebServer


-1) 緑のボタン [Download.zip] でまるごとダウンロードして解凍します。
以下の4つのファイルがあります。
--package.json:npmプロジェクトの管理情報(依存関係の明記)
--package-lock.json:package.jsonに記載の各依存先のリスト
--server.js:サーバーのプログラム
--index.html:配信されるHTMLのサンプル(自由に変更して構いません)

-2) 展開したフォルダを適当な場所に置いて、ターミナルから当該ディレクトリに移動して下さい。

-3)   必要なパッケージをインストールします。
 $ npm install
この操作で、package.json の記述にしたがって、パッケージが当該ディレクトリにインストールされます。結果、当該ディレクトリには node-modules フォルダができて、Expressの関連ファイルが入ります。

-4) パッケージを起動します。
 $ npm start
すなわち、スクリプトにしたがって node server.js が実行されます。

-5) 以下のように表示されて、サーバーが動きます。
 nodejs_webserver@1.0.0 start / [ path to ] /NodeJS_WebServer
 node server.js
 
 Server running on port:8000

-6) ブラウザから以下にアクセスすると、サンプルとして置かれている index.html が表示されます。
 http://localhost:8000

-7) ターミナルから、以下の操作でサーバーは停止します。
 [CTRL]+[C]

~
~