ExpressでHTMLファイルを配信する方法

getdocs

2年前

序章

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、およびexpressv4.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ファイルを作成し、コードエディタで開きます。

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()を追加します。

server.js

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ファイルを作成し、コードエディタで開きます。

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>