ExpressでJSファイルと画像が読み込めない場合

トラブル内容

Expressで、

GET ソースコード.js net::ERR_ABORTED 404 (Not Found)

というエラーが出て、JSファイルを読み込めなくて苦労したので、解決法を書きます。

参考にしたサイトはこちら

stackoverflow.com

解決法

Expressで画像などの静的ファイルを扱うには、express.static関数を使ってあげる必要があります。

使うファイルを一か所にまとめて、「このフォルダに入ってるやつ全部使うよ」と教えてあげる感じです。

1．JSや画像を一つのフォルダにまとめます

例：

./images | -- cat.png
               | -- dog.png

2．index.js(app.js)にapp.use("/images", express.static('./images/'));を追加

3．サーバを再起動して、localhostで接続しなおします

これで、静的ファイルを読み込めるようになります。