HerokuでにWebアプリのファイルをアップした時、画像が読み込めない問題が起こりました。仕様上、「public」ディレクトリに画像などの静的ファイルを入れないといけないようです。
静的ファイルが読み込めない？
自作のWebアプリをアップデートしました。ページ数も増え、画像などの依存ファイルも増えました。
これをHerokuにアップしてみます。
アップにはGitを使い、コミットは問題なく行われたようです。
しかし、Webアプリにアクセスしてみると、アップしたファイルが404エラーとなってしまい、画像などが読み込めない問題が起こりました。
「public」ディレクトリ内に格納
Herokuの仕様で「public」ディレクトリ内のファイルしか、静的ファイルにアクセスできないようです。
私の場合、node.jsのサーバーファイルと、同じ階層にWebアプリのHTMLや画像格納フォルダを作っていました。
Webアプリに使う静的ファイルを、新規作成した「public」ディレクトリに移動します。
階層の変更は簡単
静的ファイルを「public」ディレクトリに格納したことで、階層が変わりました。
1階層深くなっています。
階層の変更は、サーバー起動ファイル（index.js）を編集すれば解決できます。※expressを使っている時の例です。
|
1 2 3 4 5 6 7 8 9 10 |
const express = require("express"); const app = express(); const http = require("http").createServer(app); const io = require("socket.io")(http); const PORT = process.env.PORT || 5000; app.get("/", (req, res)=>{ res.sendFile(__dirname + "/public/index.html"); }); app.use(express.static('public')); |
publicがルートになり、階層変更前と同じように読み込めるようになりました。
以上、備忘録を兼ね、記録します。