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 [email protected]
この時点で、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>
このコードはメッセージを表示します:res.sendFile() Works!
。
注:このチュートリアルでは、スタイリングに BootstrapCDN を使用しますが、必須ではありません。
変更を保存します。 次に、ターミナルウィンドウを再度開き、サーバーを再実行します。
node server.js
サーバーが稼働している状態で、Webブラウザでhttp://localhost:8080
にアクセスします。
アプリケーションはres.sendFile()
を使用してHTMLファイルを提供するようになりました。
結論
この記事では、res.sendFile()
の使用方法を学びました。
Express4.0ルーターの使用方法およびExpressでURLとPOSTパラメーターを取得する方法を学習してください。