fsモジュールでhtmlファイルを出力する際、javascriptファイルがうまく読み込めない。

html
1//index.html
2
3<!DOCTYPE html>
4<html lang="ja">
5<head>
6    <meta charset="UTF-8">
7    <title>Hello</title>
8</head>
9<body>
10    <script src="hello.js"></script>
11    <!-- <script>
12        console.log("Hello!!!");
13    </script> -->
14</body>
15</html>
16

javascript
1//hello.js
2console.log("Hello!!!");

Javascript
1//server.js
2"use strict";
3
4let app = require("http").createServer(handler),
5    fs = require("fs");
6
7function handler(req, res) {
8    fs.readFile(__dirname + "/index.html", "utf-8", function (err, data) {
9        if (err) {
10            res.writeHead(500);
11            return res.end("Error");
12        }
13        res.writeHead(200, { "Content-Type": "text/html" });
14        res.write(data);
15        res.end();
16    });
17}
18
19app.listen(5000);
20

上記のコードで、$ node server.js　を実行すると、一応ブラウザにindex.htmlは表示されるのですが、consoleにhello.js:1 Uncaught SyntaxError: Unexpected token '<'
と出力されます。
エラー内容は、「意図しない"<" いう記号がある」というものだと思うのですが、原因が不明です。
コメントアウト部分のように、htmlファイルに直接scriptを記述すると正常に動作します。

辛口回答も歓迎ですので、ご回答よろしくおねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

サーバーの仕組みを学習することをおすすめします。
Nodeサーバは、ApacheやNginxの様にデフォルトでWEBサーバとしてリクエストに対して適切なファイルを返却してくれるわけではありません。

現状記載されているNodeサーバは全てのリクエストに対してindex.htmlファイルの中身を返却しています。
htmlファイル内にhello.jsを読み込む記載をしたところでhello.jsが自動的に読み込まれはしません。Nodeサーバへhello.jsをリクエストしても返却されるのはindex.htmlの中身であり、jsファイルを処理するはずがhtmlファイルが記載されているので<!DOCTYPE html>の<の部分でエラーが発生しています。

以下に簡単なコードを記載しますが、これで全ての状況に対応できるわけではありません。
動作に応じて書き換えてください。

//server.js
"use strict";

let app = require("http").createServer(handler),
  fs = require("fs");

function handler(req, res) {
  fs.readFile(`${__dirname}/${urlToFilePath(req.url)}`, "utf-8", function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end("Error");
    }
    res.writeHead(200, { "Content-Type": "text/html" });
    res.write(data);
    res.end();
  });
}

function urlToFilePath(url) {
  if (url == "/") return "index.html";

  if (!url.includes(`.`)) return `${url}.html`;

  return url;
}

app.listen(5000);

投稿2021/08/28 01:52

編集2021/08/28 04:30