web-dev-qa-db-ja.com

エクスプレス:sendFileを使用してCSSと一緒にHTMLを送信する方法?

var app = require('express')();

app.get('/', function(req, res) {
  res.sendFile(__dirname + "/" + "index.html");
});
<link rel="stylesheet" href="style.css">

上記のnode.jsコードを使用して、htmlファイルを送信しました。 htmlファイルをフォーマットするには、別のcssファイル(style.css)を送信する必要があります。
私の質問は、sendFile()を使用してこれら2つのファイル(index.htmlとstyle.css)の両方を送信し、それらをクライアント側で統合するにはどうすればよいですか?

15
neolicd

ブラウザはstyle.css単独で、それをルートとして提供できます:

app.get('/style.css', function(req, res) {
  res.sendFile(__dirname + "/" + "style.css");
});

ただし、ファイルを追加するとすぐに非常に面倒になります。 Expressは、静的ファイルを提供する組み込みの方法を提供します。

https://expressjs.com/en/starter/static-files.html

const express = require("express");
const app = express();
app.use(express.static(__dirname));

index.htmlは、サーバーコードと同じディレクトリにあり、静的なファイルとしてサーバーコードを提供しますが、これは望ましくありません。

代わりに、index.html、CSS、画像、スクリプトなどをpublicという名前のサブディレクトリに追加し、以下を使用します。

app.use(express.static("public"));

これを行うと、Expressはindex.html自動的に削除され、app.get("/" 同様に。

32
Explosion Pills