React + Nodejs環境で画像を表示したい

Question

React+Nodejs環境で画像表示したい

フロントにReact,バックにNodejsを用いる以下の構成(簡略化してます)のwebアプリで画像を表示したいと思っています。
├─ avatars
│ └─ hoge.png
│
├─ front-end
│ │
│ ├─ src
│ │ ├─ components
│ │ │ └─ Signup
│ │ │ └─ signup.jsx
│ │ │
│ │ │
│ │ ├─ pages
│ │ │ │
│ │ │ └─ HomePage
│ │ │ └─ home.jsx
│ │ │
│ │ │
│ │ ├─ App.js
│ │ ├─ index.js
│ │ └─ remportWebVitals.js
│ │
│ ├─ .gitignore
│ ├─ package-lock.json
│ └─ package.json
│
├─ routes
│ └─ Auth.js
│
├─ app.js
├─ package-lock.json
└─ package.json

発生している問題・エラーメッセージ

home.jsxで以下のように画像を表示させようとしたのですが、

<img src='/avatars/hoge.png' alt="" />;

http://localhost:3000/avatars/hoge.png 404 (Not Found)

と出てしまい、画像が表示されません。今回の場合どのようにパスを設定すれば目的の画像が表示されるのでしょうか？
ご存知の方いらっしゃいましたらご教授いただけると幸いです。

Comments

[miyabi-sun]

そもそもフロントエンド・バックエンドの区別が付いていないようなら、
WebサーバとはHTTP通信とはなんぞや？みたいな解説も必要になるんじゃないかなぁと思ってます。

これはReactの問題とは全く関係がありません。
フロントエンド側でやっている事は正しく、そのままでも問題ありません。

Node.jsで動かしているバックエンド側の問題となります。
恐らくapp.jsやpackage.jsonが該当していると考えられるので、問題ない範囲での追記をお願いします。
例えばExpress.jsを使っている等、Webサーバをどうやって動かしているのか環境を教えてください。

[rrrryorrrr]

miyabi-sun様
コメントいただきありがとうございます。
React.js, Express.js, Mongoose を用いており、npm run devで動かしています。
以下ルートディレクトリのpackage.jsonのscriptになります。
```
"scripts": {
"client": "cd front-end && npm start",
"server": "nodemon server",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"build": "cd front-end && npm install && npm run build && cd ../",
"start": "node app",
"install": "npm install && cd front-end && npm install & cd ../"
},
```

Answer 1

React.js, Express.js, Mongoose を用いており、npm run devで動かしています。

Expressはコードで指定したURLでしかファイルを配信しません。
勝手にディレクトリや画像ファイルを追加したからといって、
プログラマの要望を汲み取って勝手に配信してくれる訳ではありません。

逆に言うと「そのようにコードを記述すれば」ファイルを配信できるようになります。
今回はavatarsディレクトリに入っている画像ファイルを配信したいよという要望ですね。
こういう既に出来上がっている画像ファイル等は「静的ファイル」と呼びます。

静的ファイルの逆は「動的ファイル」です。
Node.jsやPHP等でHTTPリクエストを受け取ってからデータベース等の情報を引っ張ってきて、
可変のデータ(HTMLファイルやJSON)を作って返すものを指します。
(ファイルとして存在してないじゃん、動的コンテンツと呼ぶべき？まぁいいや)

Express自体に使うかどうか分からない機能をゴテゴテ入れまくると処理が増えて重くなります。
なので処理を削って高速にしたい事から必要最低限の機能しか実装していません。

でも静的ファイルを配信したいという需要は沢山あります。
Expressにはミドルウェアという考え方があり、
例えば「静的ファイルを配信したい人はこの機能を組み込めばすぐ使えますよ」という備えがあります。

参考サイト: Express での静的ファイルの提供 - Expressドキュメント

質問文のディレクトリ構造を見る限り、app.jsにWebサーバとしての機能があるんでしょうね。
app.jsはプロジェクトルートなので__dirname + '/avatars'で良いかな？
Expressの設定が記述されているならこの1行で解決するでしょう。

const express = require('express');

const app = express();

// listenより前にこれを挿し込む
app.use('/avatars', express.static(__dirname + '/avatars'));

app.listern(3000);

なお、ディレクトリ名がavatarsという所から想像するに
Twitterのように利用者が自分のアイコンを好き勝手にアップロードして使う感じになるのでは？
だったら環境変数で指定出来る方が良いですかね。

const express = require('express');

const app = express();

// listenより前にこれを挿し込む
app.use('/avatars', express.static(process.env.AVATARS || __dirname + '/avatars'));

app.listern(3000);

# 開発環境用
$ npm run dev

# 本番環境用はこんな感じ？
$ AVATARS=/path/to/directory npm run start

上記が改良案となります。

恐らくpackage.jsonに書かれたnpm-scriptsの難易度的に
先輩・上長が居ると思うのでどういう風に実装していくのか相談してみてください。

Comments

[rrrryorrrr]

いただいた回答で無事表示することができました。
勉強させていただきます、この度は誠にありがとうございました。