【htmlファイルがブラウザに表示されない】Cannot GET /loginと表示される

Question

実現したいこと

作成したhtmlファイルをブラウザに表示させたいです。

〇環境
OS：Windows11
サーバー：ローカル
エディタ：VScode

〇現状
npm startは正常に実行できています。
curl http://localhost:3002も正常に実行できています。
ブラウザには「Cannot GET /login」のみが表示されています。

〇構成
コマンドを実行するファイル階層に下記ファイルを格納しています。
・login.html
・package-lock.json
・package.json
・server.js

発生している問題・分からないこと

解決策が分かりません。
何をどのようにすればhtmlファイルが表示されるようになるのか見当もつきません。

該当のソースコード

const express = require('express')
const app = express()
const port = 3002

app.get('/', (req, res) => {
  console.log(req.query);
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

自分の環境とは違うため、解決には至りませんでした。

どなたか、アドバイスよろしくお願いいたします！

補足

特になし

Comments

[Eggpan]

コードの内容がわからないと答えようがないと思います。
node.jsでしたら、URLに応じたファイルを読み込むようなコードを作成する必要があります。
https://developer.mozilla.org/ja/docs/Learn/Server-side/Node_server_without_framework

なんらかのフレームワークを導入した場合はそれ用のコードを書くことになります。

[narururu]

ご回答ありがとうございます。Eggpanさん☺

コードを記載しました。
ご確認よろしくお願い致します！

Answer 1

コードを見ましたところ、 app.get('/', しか定義していませんので、その他のURLは全てCannot GET <url>となります。

単純にファイルを送信するのであればres.sendFileを使います。

app.get('/login', (req, res) => {
  res.sendFile(__dirname + '/login.html');
})

ですが、このやり方を使うことはほとんどありません。
なぜならサーバ側の変数を使う必要がある場合、結局ejsなどを利用する必要がでてくるからです。
もし、サーバ側の変数を利用しないのであればただのhtmlだけのサイトで良いかと思います。

Expressを使うのがはじめてであれば、最初はとほほのExpress入門などが読みやすいかと思います。
https://www.tohoho-web.com/ex/express.html#basic-usage

より詳しいものになると、Expressの公式ドキュメントのAPIリファレンスを読み込む必要があります。
https://expressjs.com/ja/api.html

Comments

[narururu]

ご回答ありがとうございます！Eggpanさん☺

教えていただいたコードで解消されました。
また、参考ページまでご提示いただき、感謝です！
まだまだ不明点は多いので、別途質問することも多々あると思いますが、お手すきの際にご回答いただけますと助かります。
ありがとうございました！