teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

深夜のノリで書いた回答が言葉足らずだったので肉付け

2021/08/26 04:16

投稿

miyabi-sun
miyabi-sun

スコア21461

answer CHANGED
@@ -1,11 +1,30 @@
1
1
  > React.js, Express.js, Mongoose を用いており、npm run devで動かしています。
2
2
 
3
- Expressは記述したURLでしかファイルを配信しません。
3
+ Expressはコードで指定したURLでしかファイルを配信しません。
4
+ 勝手にディレクトリや画像ファイルを追加したからといって、
4
- 当然静的ファイルなんて配信してくれる訳ではありません。
5
+ プログラマの要望を汲み取っ勝手に配信してくれる訳ではありません。
5
6
 
7
+ 逆に言うと「そのようにコードを記述すれば」ファイルを配信できるようになります。
8
+ 今回はavatarsディレクトリに入っている画像ファイルを配信したいよという要望ですね。
9
+ こういう既に出来上がっている画像ファイル等は「静的ファイル」と呼びます。
10
+
11
+ 静的ファイルの逆は「動的ファイル」です。
12
+ Node.jsやPHP等でHTTPリクエストを受け取ってからデータベース等の情報を引っ張ってきて、
13
+ 可変のデータ(HTMLファイルやJSON)を作って返すものを指します。
14
+ (ファイルとして存在してないじゃん、動的コンテンツと呼ぶべき?まぁいいや)
15
+
16
+ Express自体に使うかどうか分からない機能をゴテゴテ入れまくると処理が増えて重くなります。
17
+ なので処理を削って高速にしたい事から必要最低限の機能しか実装していません。
18
+
19
+ でも静的ファイルを配信したいという需要は沢山あります。
20
+ Expressにはミドルウェアという考え方があり、
21
+ 例えば「静的ファイルを配信したい人はこの機能を組み込めばすぐ使えますよ」という備えがあります。
22
+
6
23
  参考サイト: [Express での静的ファイルの提供 - Expressドキュメント](http://expressjs.com/ja/starter/static-files.html#express-%E3%81%A7%E3%81%AE%E9%9D%99%E7%9A%84%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%8F%90%E4%BE%9B)
7
24
 
25
+ 質問文のディレクトリ構造を見る限り、app.jsにWebサーバとしての機能があるんでしょうね。
26
+ app.jsはプロジェクトルートなので`__dirname + '/avatars'`で良いかな?
8
- app.jsにExpressの設定が記述されているならこれを追加てください
27
+ Expressの設定が記述されているならこの1行で解決するでょう
9
28
 
10
29
  ```js
11
30
  const express = require('express');
@@ -41,6 +60,7 @@
41
60
  $ AVATARS=/path/to/directory npm run start
42
61
  ```
43
62
 
44
- こんなこで
63
+ 上記が改良案なります。
64
+
45
65
  恐らくpackage.jsonに書かれたnpm-scriptsの難易度的に
46
66
  先輩・上長が居ると思うのでどういう風に実装していくのか相談してみてください。