DNET_Express

Express

• 戻る
  • JavaScriptの該当節
  • Node.js

概要

Node.js向けの高速で最小限の Web フレームワーク

インストール

以下でインストール。

npm install express --save

素描

HTMLを返す。

サーバを設定（HTML）

• 直下にserverディレクトリを作成
• その直下にserver.jsファイルを作成

var express = require('express');
var app = express();

//ポートの指定
app.set('port', process.env.PORT || 5000);

//ルートパスの指定
var clientPath = __dirname.replace("/server", "/client");
app.use('/', express.static(clientPath));

// URLがNOT FOUNDの際の処理
//redirect NOT FOUND page
//app.use(function(req, res, next){
//  res.status(404);
//  res.sendFile(clientPath + '/404.html');
//});

//エラーが発生した場合の指定
app.use(function(err, req, res, next) {
    console.log(err.stack);
    res.status(500).send(err.message);
});

//指定したポートでリクエスト待機状態にする
app.listen(app.get('port'), function () {
    console.log('server listening on port :' + app.get('port'));
});

コンテンツの配置（HTML）

コンテンツを配置する。

server/hoge.html

サーバを実行（HTML）

以下でサーバを実行。

node server/server.js
server listening on port :5000

サーバにアクセス（HTML）

以下でサーバにアクセス。

http://localhost:5000/hoge.html

JSONを返す。

サーバを設定（JSON）

• 直下にserverディレクトリを作成
• その直下にserver.jsファイルを作成

// expressモジュールをロードし、インスタンス化してappに代入。
var express = require("express");
var app = express();

// CORSを許可する
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

// listen()メソッドを実行して5000番ポートで待ち受け。
var server = app.listen(5000, function(){
    console.log("Node.js is listening to PORT:" + server.address().port);
});

// *.json
// http://localhost:5000/hoge1.json
app.get("/hoge1.json", function(req, res, next){
    var fs = require('fs');
    var json = JSON.parse(fs.readFileSync('./server/hoge1.json', 'utf8'));
    res.json(json);
});
// http://localhost:5000/hoge2.json
app.get("/hoge2.json", function(req, res, next){
    var fs = require('fs');
    var json = JSON.parse(fs.readFileSync('./server/hoge2.json', 'utf8'));
    res.json(json);
});

コンテンツの配置（JSON）

コンテンツを配置する。

server/hoge1.json
server/hoge2.json

サーバを実行（JSON）

以下でサーバを実行。

node server/server.js
server listening on port :5000

サーバにアクセス（JSON）

以下でサーバにアクセス。

http://localhost:5000/hoge1.json
http://localhost:5000/hoge2.json

Express Generator

もうチョットちゃんとしたserver.js実装が欲しい...。
...とソコで、「Express Generator」が使える。

概要（Express Generator）

• Node.js のWeb/APサーバー機能を提供するExpressアプリの雛形を作成してくれる。
• Expressにはアドオンでフレームワーク機能を追加していく。

参考（Express Generator）

• express-generatorを利用する[express][node.js]
  https://noumenon-th.net/programming/2018/12/22/express-generator01/

• Qiita

  • Express Generator を使った Node.js + Express.js の環境構築手順
    https://qiita.com/tsuyoshioshima/items/7a553c25f222333b9503
  • node初心者がexpress-generatorで吐き出されたapp.jsを読んでみる
    https://qiita.com/mito_log/items/735f7079f99ec78ea7e6

参考

• JavaScriptの記事一覧
  https://noumenon-th.net/programming/javascript/
  • express-generatorを利用する[express][node.js]
  • EJSテンプレートエンジンを利用する[Express]
  • クエリーパラメーターによる送信[express][query]
  • express-sessionでセッションを利用する[Express][node.js]
  • express-validatorでバリデーションを行う[node.js]
  • mysqlを利用する[express][node.js]

移行メモ

• 概要のリンクは同ページ内に存在しないアンカ（#q9fc6e24。 元 Wiki の「JavaScript」ページ側のアンカ）を指していたため、 移行済みの Node.js に張り替えた。
• 「HTMLを返す。」の例は、clientPath に client ディレクトリを指定しているのに コンテンツの配置が server/hoge.html になっている（元 Wiki の記載どおり）。
• 同名の見出し（「サーバを設定」「コンテンツの配置」「サーバを実行」 「サーバにアクセス」「概要」「参考」）が複数あり GitHub Wiki で アンカが衝突するため、括弧で文脈を補って一意にした。

---

Tags: 移行, Express, Node.js, JavaScript, Webフレームワーク, CORS, Express Generator