Node.js+Express.js – 画像やJavaScriptなど静的ファイルにアクセスする方法

初めてExpress.jsで作成したこのアプリで、Expressのejsファイルからjsなど静的ファイルへのアクセス方法ではまったので、備忘録として記録しておきます。

以下のような構成を元に説明します。

sampleprj
├index.js
│
├─public
│  └─js
│  └samplejs.js
│
└─views
  └view1.ejs

publicフォルダを静的ファイルのフォルダとして設定

/* index.js */
const express = require("express");
const app = express();

const PORT = 8081;
const server = app.listen(PORT, function(){
  console.log(`Server listening on port ${PORT}...`);
});

app.set('view engine', 'ejs');
app.use(express.static('public')); // ここでpublicフォルダを指定
app.get("/view1", function(req, res, next) {
    res.render("view1", {});
});

ejsファイルからjsファイルを読み込む

<!-- view1.ejs -->
<head>
  <script src="/js/samplejs.js"></script>
</head>

public フォルダ内に、例えば sampleimg.jpg という画像ファイルが格納されている場合、ブラウザで以下のURLにアクセスすると、その画像ファイルが表示されます。

http://xxx.xxx.xxx.xxx:8081/sampleimg.jpg

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です