お金をかけずにサーバーの勉強をしよう - Node.js + Express でWEBサーバープログラム作成 -

Node.jsを使って WEBサーバープログラムを作ってみましょう。

「Node.jsインストール」で Ubuntu Serverにサーバーサイドの JavaScript実行環境を作りました。

ここでは Node.jsが得意とする軽量の WEBサーバープログラムを作ってみます。

Node.jsが提供するライブラリだけでもその機能を有していますが、1から全て作るよりは既に出回っているフレームワークを使った方が断然楽ですので、ここでは有名所のうち IBM製の Expressを使ってみます。

以下が Expressのサイトです。
Express

１．環境

以下のセットでやります。
全て 2024年5月28日時点での最新版になります。

Ubuntu Server 24.04
Node.js 20.13.1 (LTSの最新版)
Express 4.19.2

２．インストール

上の Expressのサイトに行ってもらうとトップページにいきなり

npm install express --save

と導入コマンドがズバリ書いてあるのですが、いきなりこれをカレントディレクトリで実行しますと、モジュールを格納するディレクトリ[node_modules]を作ってしまいますので、これは行わないで下さい。

代りに express-generatorという「開発用ディレクトリ階層＆初期ファイルの雛形作成ツール」とでも呼ぶべきものがありますので、それをインストールします。

Expressのホームページの一番上のメニューから、[Getting Started] - [Express generator] を選んで下さい。
Express インストール方法

しますとこのような導入コマンドがズバリ書いてあるのですが、まだちょっと待って頂きたい。(またか)

npm install -g express-generator

npm install コマンドの -g オプションは「グローバル」オプションと言って、このサーバーにインストールした Node.jsを使うユーザーが共通に使うモジュールを入れる場合に使います。

私がここでご紹介している Node.jsのインストールは snapパッケージ導入の形をとっているため、[/snap/node/current/lib/node_modules]ディレクトリがその場所になるのですが、書き込みには root権限が必要です。

subro@UbuntuServer2404-1:~$ ls -ld /snap/node/current/lib/node_modules
drwxr-xr-x 4 root root 54  5月 10 00:43 /snap/node/current/lib/node_modules

なので、sudoコマンドを使いましょう。

subro@UbuntuServer 2404-1:~$ sudo npm install -g express-generator
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)

added 10 packages in 3s
npm notice
npm notice New minor version of npm available! 10.5.2 -> 10.8.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.0
npm notice Run npm install -g npm@10.8.0 to update!
npm notice

mkdirpモジュールの Ver.0.5.1が Deprecated(非推奨)だとか、npmコマンドをアップデートしろとか言われています。
(このアップデートの速さが Node.jsの強みでもあり、「いちいちキャッチアップしてらんね〜」という弱みでもあります)

npmコマンドをアップデートします。

subro@UbuntuServer 2404-1:~$ sudo npm install npm
added 1 package in 4s

24 packages are looking for funding
  run `npm fund` for details

アップデートできました。
今 24個のパッケージが寄付を募っているようです。

3．プロジェクト作成

express-generatorの導入により expressコマンドにて念願の開発プロジェクトの雛形を作れるようになったのですが、カレントディレクトリの直下にプロジェクト名のディクトリが作成されますので、大丈夫なディレクトリに移動しておいて下さい。

私は [/home/subro/work] ディレクトリを作って、そこに移動しました。

[subrotest]プロジェクトを作成します。

subro@UbuntuServer2404-1:~/work$ express --view=ejs subrotest

   create : subrotest/
   create : subrotest/public/
   create : subrotest/public/javascripts/
   create : subrotest/public/images/
   create : subrotest/public/stylesheets/
   create : subrotest/public/stylesheets/style.css
   create : subrotest/routes/
   create : subrotest/routes/index.js
   create : subrotest/routes/users.js
   create : subrotest/views/
   create : subrotest/views/error.ejs
   create : subrotest/views/index.ejs
   create : subrotest/app.js
   create : subrotest/package.json
   create : subrotest/bin/
   create : subrotest/bin/www

   change directory:
     $ cd subrotest

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=subrotest:* npm start

--view=ejs というオプションは、WEB画面のテンプレートエンジンに ejs を使うことを意味しています。
ejsを使うのは私の趣味で、デフォルトは Jadeです。

下の方に 3つのコマンドが書かれていますので、それをやりましょう。

[subrotest]プロジェクトディレクトリに移ります。

subro@UbuntuServer2404:~/work$ cd subrotest

移動しました。

必要なモジュールをダウンロードします。
これは -g オプションを付けていないので、このディレクトリの下に [node_modules]ディレクトリが作成されます。

subro@UbuntuServer2404-1:~/work/subrotest$ npm install
added 54 packages, and audited 55 packages in 2s

4 vulnerabilities (3 high, 1 critical)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

ダウンロードできましたが、最新版で固めても 4つの脆弱性(うち 1つは致命的)があると言っていますねぇ…。

対応しましょう。
(と言いつつ、私もこれをやっちまって良いのかよく分からんのですが…)

subro@UbuntuServer2404-1:~/work/subrotest$ npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating ejs to 3.1.10, which is a SemVer major change.
npm WARN audit Updating express to 4.19.2, which is outside your stated dependency range.

added 58 packages, changed 14 packages, and audited 113 packages in 3s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

「found 0 vulnerabilities」と書いてあるので良いのではないかと。

プロジェクトを実行します。

subro@UbuntuServer2404-1:~/work/subrotest$ DEBUG=subrotest:* npm start

> subrotest@0.0.0 start
> node ./bin/www

  subrotest:server Listening on port 3000 +0ms

これで待機状態となりました。

[3000/tcp] で待ち受けているようなので、WEBブラウザでアクセスしてみましょう。
私の環境だと [http://UbuntuServer2404-1:3000] です。

express-generator により作成された雛形のトップページが表示されました。
＼(^o^)／
Express 雛形画面

＝＝＝＝＝＝＝＝＝＝
プロジェクト内の JavaScriptファイルを Visual Studio Codeなどでガリガリ書いていけば、お好みの WEBアプリケーションを作れるはずです。
(これでやっと開発の取っ掛かりに辿り着いた…ということです)

Q. この後はどうすればいいの？

Ａ. 書籍などでの自己学習をお願いします！

Expressを専門に扱った日本語書籍はなかなかなく、私が知ってるのはこれくらい。