Expressを使用してHTMLを提供する方法


  1. Expressのインストール: まず、Expressをインストールする必要があります。以下のコマンドを使用して、プロジェクトディレクトリ内でExpressをインストールします。
npm install express
  1. Expressアプリケーションのセットアップ: Expressアプリケーションをセットアップするには、以下のような基本的なコードを使用します。
const express = require('express');
const app = express();
// 静的ファイルの提供
app.use(express.static('public'));
// HTMLの提供
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});
// サーバーの起動
app.listen(3000, () => {
  console.log('サーバーがポート3000で起動しました。');
});

上記のコードでは、publicディレクトリ内の静的ファイル(CSS、JavaScriptなど)を提供するためにexpress.staticミドルウェアを使用しています。また、ルートパス('/')にアクセスした場合にindex.htmlファイルを提供するためにapp.getメソッドを使用しています。

  1. 追加のHTMLファイルの提供: 複数のHTMLファイルを提供したい場合は、以下のようにapp.getメソッドを追加します。
app.get('/about', (req, res) => {
  res.sendFile(__dirname + '/public/about.html');
});
app.get('/contact', (req, res) => {
  res.sendFile(__dirname + '/public/contact.html');
});

上記の例では、/aboutパスにアクセスした場合にabout.htmlを提供し、/contactパスにアクセスした場合にcontact.htmlを提供します。