Express環境でnode_modulesのファイルが参照できなくて困った話

困った時の備忘です。Expressの仕様を理解していなくて、1時間ぐらい詰みました。。。

詰んだ点

npmでライブラリをインストールして、利用するhtmlファイルからファイルを呼び出しても利用することができない。

node_modulesのディレクトリ内には、該当するフォルダ/ファイルが存在。

絶対パスで指定しても、参照不可になり、開発者ツールのネットワークタブで確認すると読み込みが404になっている。

原因

Expressの仕様

特定のライブラリやファイルにクライアントサイドからアクセスする必要がある場合は、Expressの静的ファイルサービング機能を使う必要があった。

対策

server.js(app.js)に以下一文を追加、htmlの参照記述を変更した後にサーバーを再起動。

server.js

app.use('/scripts', express.static(__dirname + '/node_modules/{該当ライブラリまでのフォルダパス}'));

以下が宣言されている前提です。
const express = require('express');
const app = express();

htmlファイル

<script type="text/javascript" src="/scripts/{利用したいファイル名}"></script>

ChatGPTによる解説

この構文は、Node.jsのExpressフレームワークで使用され、特定のディレクトリから静的ファイルを提供するためのものです。
構文の各部分を詳しく説明します：
app.use(...): これはExpressのミドルウェア関数をアプリケーションに追加するためのメソッドです。ミドルウェアは、リクエストが最終的なルートハンドラに到達する前に実行される関数で、リクエストの処理、レスポンスの送信、または次のミドルウェア関数の呼び出しを行います。
'/scripts': この部分はミドルウェアが適用されるURLのパスを指定します。つまり、この例では、クライアントが http://yourserver.com/scripts のようなURLにアクセスしたときに、このミドルウェアが動作します。
express.static(...): これはExpressが提供する組み込みの静的ファイルサービングミドルウェアです。これを使用すると、HTML、CSS、JavaScript、画像ファイルなどの静的ファイルをウェブサーバーから直接提供できます。
__dirname + '/path/to/your/scripts': ここでは、静的ファイルが置かれているディレクトリのパスを指定します。__dirname は、現在実行中のスクリプトが存在するディレクトリの絶対パスを表し、それに対して相対パスを追加しています。
要約すると、app.use('/scripts', express.static(__dirname + '/path/to/your/scripts')); という構文は、Expressサーバーに指示して、'/path/to/your/scripts' ディレクトリ内のファイルを、URLパス '/scripts' 経由で提供するようにします。
例えば、このディレクトリ内に example.js というファイルがある場合、クライアントは http://yourserver.com/scripts/example.js でこのファイルにアクセスできるようになります。
ChatGPT4