Node.jsのHTMLファイルでJSファイルが読み込めなかった話

公開日:

2022 / 05 / 08

はじめに

今回は、Node.js で簡易的なサーバーを立てて、ブラウザで Hello World をしようとしたら、JavaScript ファイルを読み込む部分で躓いたので解決法を備忘録的に残します。前提として、expressは使用してません。

参考にしたサイト

https://www.naka-sys.okinawa/nodejs-html-include/

概要

Node.js で簡易的な web サーバーを立てて、ブラウザで URL を叩いて、HTML ファイルの表示と JS ファイルの表示をしようとしたが、できず。正確には、HTML はブラウザで読み込めるが JS のファイルが読み込めないずっと、 Uncaught SyntaxError: Unexpected token ‘<‘ のエラーが出ていた。非常に謎。

該当部分のコード

index.js

var http = require('http');
var fs = require('fs');

const port = 3000;

var server = http.createServer();

server.on('request', (req, res) => {
  fs.readFile('./index.html', 'UTF-8', (error, data) => {
    res.writeHead(200, { 'Content-Type': 'text/html' }); // HTMLファイル読み込み
    res.write(data); // 中身をレスポンス
    res.end();
  });
});

server.listen(port); // 3000番ポートでlisten

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>sample</title>
  </head>
  <body>
    <h1>Hello World!!!</h1>
    <script src="./app.js"></script>
  </body>
</html>

原因

リクエストを listen している部分でリクエストの url を表示してみる。すると

/
/app.js

/ がリクエストされた後に、/app.jsがリクエストされている。/ はルーティングされているが、/app.jsはルーティングされていないのが原因っぽい？

解決法

index.js

var http = require('http');
var fs = require('fs');

const port = 3000;

var server = http.createServer();

server.on('request', (req, res) => {
  let url = req.url;
  if (url === '/') {
    fs.readFile('./index.html', 'UTF-8', (error, data) => {
      res.writeHead(200, { 'Content-Type': 'text/html' });
      res.write(data);
      res.end();
    });
  } else if (url === '/app.js')
    fs.readFile('./app.js', 'UTF-8', (error, data) => {
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      res.write(data);
      res.end();
    });
});

server.listen(port);

/app.jsも同じようにルーティングの処理を追加してあげると、結果に無事 JS ファイルを読み込めた。

最後に

今までは HTML ファイルに script タグで読み込めば OK！みたいなノリだったが、あれはサーバーサイドで自動的に全てルーティングがされていたということなのだろうか。サーバーサイドを触ってみて、今まで意識してなかった部分でマジかよってなることが多い。

では、Bye