ExpressでHTMLファイルを配信する方法
序章
Node.jsおよびExpressアプリケーションでは、 res.sendFile()を使用してファイルを配信できます。 Expressを使用してHTMLファイルを配信すると、静的ページを提供するためのソリューションが必要な場合に役立ちます。
注: Express 4.8.0より前では、res.sendfile()
がサポートされていました。 この小文字バージョンのres.sendFile()
は、その後非推奨になりました。
この記事では、res.sendFile()
の使用方法を学習します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
このチュートリアルは、ノードv16.0.0、npm
v7.11.1、およびexpress
v4.17.1で検証されました。
ステップ1-プロジェクトの設定
まず、ターミナルウィンドウを開き、新しいプロジェクトディレクトリを作成します。
- mkdir express-sendfile-example
次に、新しく作成されたディレクトリに移動します。
- cd express-sendfile-example
この時点で、新しいnpmプロジェクトを初期化できます。
- npm init -y
次に、express
パッケージをインストールする必要があります。
- npm install express@4.17.1
この時点で、Expressを使用する準備ができた新しいプロジェクトができました。
新しいserver.js
ファイルを作成し、コードエディタで開きます。
const express = require('express');
const app = express();
const port = process.env.PORT || 8080;
// sendFile will go here
app.listen(port);
console.log('Server started at http://localhost:' + port);
ターミナルウィンドウに戻り、アプリケーションを実行します。
- node server.js
プロジェクトが期待どおりに機能していることを確認したら、res.sendFile()
を使用できます。
ステップ2–res.sendFile()
を使用する
コードエディタでserver.js
に再度アクセスし、 path 、 .get()、およびres.sendFile()
を追加します。
const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 8080;
// sendFile will go here
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, '/index.html'));
});
app.listen(port);
console.log('Server started at http://localhost:' + port);
サーバーにリクエストが送信されると、index.html
ファイルが提供されます。
新しいindex.html
ファイルを作成し、コードエディタで開きます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body { padding-top: 50px; }
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>res.sendFile() Works!</h1>
</div>
</div>
</body>
</html>
このコードはメッセージを表示します:res.sendFile() Works!
。
注:このチュートリアルでは、スタイリングに BootstrapCDN を使用しますが、必須ではありません。
変更を保存します。 次に、ターミナルウィンドウを再度開き、サーバーを再実行します。
- node server.js
サーバーが稼働している状態で、Webブラウザでhttp://localhost:8080
にアクセスします。
アプリケーションはres.sendFile()
を使用してHTMLファイルを提供するようになりました。
結論
この記事では、res.sendFile()
の使用方法を学びました。
Express4.0ルーターの使用方法およびExpressでURLとPOSTパラメーターを取得する方法を学習してください。