序章

この記事では、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という名前のプロジェクト用の新しいディレクトリを作成します。

  1. mkdir express-static-file-tutorial

新しいディレクトリに移動します。

  1. cd express-static-file-tutorial

デフォルトで新しいノードプロジェクトを初期化します。 これにより、依存関係にアクセスするためのpackage.jsonファイルが設定されます。

  1. npm init -y

エントリファイルindex.jsを作成します。 Expressサーバーを保存する場所は次のとおりです。

  1. touch index.js

Expressを依存関係としてインストールします。

  1. npm install express --save

package.json内で、startスクリプトを更新して、nodeindex.jsファイルを含めます。

package.json
{
  "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リクエストを実装します。

index.js
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ディレクトリを引数として渡します。

index.js
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プロジェクトを起動します。

  1. npm start
Server listening on port: 3000

Webブラウザーを開き、http://localhost:3000に移動します。 プロジェクトが表示されます。

Screenshot of the web page displaying a Hello World message and shark image.

結論

Expressは、静的ファイルを提供し、クライアント側ディレクトリ内のコンテンツを1行のコードでモジュール化するための組み込みミドルウェアを提供します。