序章
この記事では、Expressで静的ファイルを提供する方法を学習します。 Node.jsフレームワークであるExpressは、サーバー内のデータを容易にし、画像、HTML、CSS、JavaScriptなどの静的ファイルをクライアント側でレンダリングすることを含みます。
Expressを初めて使用する場合は、 Expressの概要をチェックして、基本を理解してください。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsを理解することをお勧めしますが、必須ではありません。 Node.jsの詳細については、Node.jsシリーズのコーディング方法をご覧ください。
- ExpressはNode.jsフレームワークであるため、次の手順を実行する前に、Node.jsからNode.jsがインストールされていることを確認してください。
ステップ1—Expressを設定する
まず、ターミナルで次のコマンドを実行します。
express-static-file-tutorial
という名前のプロジェクト用の新しいディレクトリを作成します。
- mkdir express-static-file-tutorial
新しいディレクトリに移動します。
- cd express-static-file-tutorial
デフォルトで新しいノードプロジェクトを初期化します。 これにより、依存関係にアクセスするためのpackage.json
ファイルが設定されます。
- npm init -y
エントリファイルindex.js
を作成します。 Expressサーバーを保存する場所は次のとおりです。
- touch index.js
Expressを依存関係としてインストールします。
- npm install express --save
package.json
内で、start
スクリプトを更新して、node
とindex.js
ファイルを含めます。
{
"name": "express-static-file-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "Paul Halliday",
"license": "MIT"
}
これにより、端末でnpm start
コマンドを使用して、Expressサーバーを起動できるようになります。
ステップ2—ファイルの構造化
クライアント側にファイルを保存するには、public
ディレクトリを作成し、画像とともにindex.html
ファイルを含めます。 ファイル構造は次のようになります。
express-static-file-tutorial
|- index.js
|- public
|- shark.png
|- index.html
ファイルが設定されたので、Expressサーバーを起動しましょう。
ステップ3—Expressサーバーを作成する
index.js
ファイルで、Expressインスタンスでrequireし、GET
リクエストを実装します。
const express = require('express');
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));
次に、静的ファイルを処理するようにExpressに指示しましょう。
ステップ4—静的ファイルを提供する
Expressには、静的ファイルを提供するための組み込みメソッドが用意されています。
app.use(express.static('public'));
app.use()
を呼び出すと、Expressにミドルウェアを使用するように指示します。 ミドルウェアは、Expressがリクエストをapp.get('/')
ルートなどのルーティング機能に送信する前に通過させる関数です。 express.static()
は、要求された静的ファイルを見つけて返します。 express.static()
に渡す引数は、Expressでファイルを提供するディレクトリの名前です。 ここでは、public
ディレクトリです。
index.js
で、静的ファイルをPORT
変数の下に提供します。 public
ディレクトリを引数として渡します。
const express = require('express');
const app = express();
const PORT = 3000;
app.use(express.static('public'));
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));
Expressサーバーを設定したら、クライアント側に焦点を当てましょう。
ステップ5—Webページを構築する
public
ディレクトリのindex.html
ファイルに移動します。 ファイルに本文要素と画像要素を入力します。
[label index.html]
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<img src="shark.png" alt="shark">
</body>
</html>
shark.png
への画像要素のソースに注意してください。 Expressを介してpublic
ディレクトリを提供したので、画像ソースの値としてファイル名を追加できます。
ステップ6—プロジェクトの実行
ターミナルで、Expressプロジェクトを起動します。
- npm start
Server listening on port: 3000
Webブラウザーを開き、http://localhost:3000
に移動します。 プロジェクトが表示されます。
結論
Expressは、静的ファイルを提供し、クライアント側ディレクトリ内のコンテンツを1行のコードでモジュール化するための組み込みミドルウェアを提供します。