質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.25%

  • JavaScript

    11752questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    1289questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Express

    147questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 62

nullpurge

score 16

前提

・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の直下にいるような感覚で書けるということを仕組みをしらないまま使っていた私は、静的ファイル外のファイルへのアクセス方法を知りません。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

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

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

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が存在するディレクトリを基準とした相対パスで書けるというのが私にとっては重要なカギでした。
  • もっといい方法がある、ここ間違ってるという箇所あればご指摘お願いします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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より前に書けば認証で守れたかと思います(未確認なので検証してみてください)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.25%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11752questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    1289questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Express

    147questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。