Express（Node.js）でPublic外のcssやjsファイルを読み込む方法が分かりません。

Question

###前提
・express-generatorを使用しています。
・ディレクトリ構造↓

.
├── app.js
├── package.json
├── public
│   ├── js
│       └── index.js
│   └── css
│       └── index.css
├── admin
│   ├── js
│       └── admin.js
│   └── css
│       └── admin.css
├── routes
│   └── index.js
│   └── admin.js
└── views
    ├── index.pug
    └── admin.pug

・わたくしミドルウェアの分野ちんぷんかんぷんでございます。
###実現したいこと
adminページを開いた際にadminディレクトリにあるcssとjsを読み込みたい
app.jsとroutes/admin.jsには「'/admin'にpostしたらadmin.pugをレンダリングしていわゆる管理ページを開く」(パスワード認証は便宜上省略)というコードを書いています。

以前までadminのjsファイルがpublicディレクトリ内にあり、「これってセキュリティ的にどうなの？」ということでadminディレクトリに移しました。

ですが、静的ファイルをapp.jsで設定したら

script(type='text/javascript' src='js/index.js')

といった感じでなぜか知らないけどパスがpublicの直下にいるような感覚で書けるということを仕組みをしらないまま使っていた私は、静的ファイル外のファイルへのアクセス方法を知りません。

どなたかいい方法教えてください～～。。

Answer 1

丁寧に解説してくださった方がいましたが、私の質問が的確でないようで少し誤解を招いてしまったのか、単純に私の理解力不足なのか直接な解決には結び付きませんでした。面目ない・・・。

奇跡的に知人の書いたコードにそのような記述があり、それを参考にして一応解決したのでここに書いておきます

###app.js(サーバーサイド)

var index  = require('./routes/index');
app.use('/', index);

###routes/admin.js(サーバーサイド)

var express = require('express');
var router = express.Router();
var path = require('path');

router.get(/^/admin/, function(req, res, next){

        res.sendFile( path.resolve('./' + req.url) );

});

###views/admin.pug(クライアントサイド)

link(href="/admin/css/manage.css" rel='stylesheet')
script(type='text/javascript' src='/admin/js/admin.js')

---

• 「/admin/~~~」という記述をpug(htmlでも同様)書くとGETメソッドでアクセスして「res.sendFile」でそのファイルを返すんですねぇ～という超半端な理解でとりあえず解決しました。
• path.resolveを使うとnode_moduleが存在するディレクトリを基準とした相対パスで書けるというのが私にとっては重要なカギでした。
• もっといい方法がある、ここ間違ってるという箇所あればご指摘お願いします。

Answer 2

node.jsで建てたサーバー内にある画像にアクセスする方法

まず、これが基本です。

---

adminのjsファイルがpublicディレクトリ内にあり、「これってセキュリティ的にどうなの？」ということでadminディレクトリに移しました。

それは守るべき情報の重さや重要度で設計するべきことです。
そもそも、このadmin.jsとはどんなスクリプトファイルでしょう。
DBのテーブル構成やログインパス等のクリティカルな情報をバンバン載せたスクリプトファイルなのですか？

そうではなくAjax通信を行うコードしか書かれておらず、
ログインにはCookieによるセッションやトークンの仕組みが必要で
万が一漏れたとしても第三者からのアクセスは弾く仕組みになっているのであればあまりシビアに考える必要はありません。

堅牢に作るなら、せっかくのマイクロサービス的な長所を活かせるNode.jsなので、
管理者用のサイトはプロジェクト自体を分離して、別サーバとして8080や30000等のポートでやり取りするといった案もあります。

従って、まず貴方が行うべきことはadmin.jsファイルをpublicディレクトリに設置した人にヒアリングすることです。

---

どなたかいい方法教えてください～～。。

利用者用(80番ポート)と管理者用(8080番ポート)で分けるのが簡単、わかりやすく、効果も高いのでオススメです。
DB周りの記述が二重になるのでどうやってコピペを防ぐかの設計がエンジニアの腕の見せどころになるかと思います。

既存のまま作るならエンドポイントが1個増える形になるでしょう。
Express 4.x APIあたりを見ながら頑張って実装してください。

var fs = require('fs');
var express = require('express');
var app = express();
app.use(express.static('public'));

app.get('/admin/admin.js', (req, res) => {
  // 管理者用画面と同じパスワード認証ロジックを利用する。
  // クッキーのセッションあたりの確認になるか？
  res.sendFile(`${__dirname}/admin/admin.js`);
});

---

【おまけ】なんとか同じサーバで上手く共用させられないか

エンドポイントで縛る方法があります。
middlewareがぴったりなので、辛いでしょうが解説しますので頑張って読んでください。
app.use([path,] callback [, callback...])

Expressに於けるミドルウェアは、req, res, nextの順番で引数を要求する関数を指します。

var express = require('express');
var app = express();
app.use(function (req, res, next) {
  // リクエストのパスが一致しなかったら勝手に400番エラー返すようにしよう
  if (req.params.pass === 'my_password') {
    // 認証出来たリクエストは次へ
    next();
  } else {
    // 認証失敗したリクエストは400エラー返して殺す
    res.status(499).end('リクエストは失敗です。');
    // nextを実行しなければ自動的にそこで止まる
  }
});

これをかっこよく別ファイルに移動するとmiddlewareになります。

// app.js
var express = require('express');
var my_auth = require('./my_auth.js');
var app = express();
app.use(my_auth);

// my_auth.js
module.exports = function (req, res, next) {
  if (req.params.pass === 'my_password') {
    next();
  } else {
    res.status(499).end('リクエストは失敗です。');
  }
}

次、app.useは第一引数に文字列を設定出来ます。
admin配下にだけ適用したければ下記のように記載すれば済むでしょう。

app.use('/admin(/*)?', my_auth);

このようにadmin配下は認証機能を仕込んでおけば、publicディレクトリ配下にadmin/index.jsみたいなファイルが設置してあっても認証が必要になりそうです。

useは上に指定した順番で適用されていくので、
express.staticより前に書けば認証で守れたかと思います（未確認なので検証してみてください）