メインコンテンツへスキップ

initStaticResourceMiddleware(options)

initStaticResourceMiddlewareは、インストール済みの他のblockletから静的アセットを配信するために設計された、強力なExpressミドルウェアです。これにより、アプリケーションは、ファイルシステム上の正確な場所を知らなくても、依存するコンポーネントから画像、スタイルシ

initStaticResourceMiddlewareは、インストール済みの他のblockletから静的アセットを配信するために設計された、強力なExpressミドルウェアです。これにより、アプリケーションは、ファイルシステム上の正確な場所を知らなくても、依存するコンポーネントから画像、スタイルシート、フォントなどの共有リソースにアクセスできるようになります。

このミドルウェアは、指定されたリソースタイプに一致するインストール済みのblockletのディレクトリをスキャンし、利用可能なファイルのインメモリマップを作成することで機能します。リクエストが来た際には、このマップで効率的にファイルを検索し、配信します。

仕組み

以下に、プロセスの概要を示します：

使用方法

このミドルウェアを使用するには、インポートしてExpressアプリケーションに追加します。どのリソースタイプを検索するかを設定する必要があります。

server.js

javascript
import express from 'express';
import { initStaticResourceMiddleware } from '@blocklet/uploader-server';

const app = express();

// 'imgpack'タイプのリソースを配信するためにミドルウェアを初期化
// それを提供するインストール済みの任意のblockletから
app.use(
  initStaticResourceMiddleware({
    express,
    resourceTypes: ['imgpack'], // 文字列を使用したシンプルな設定
  })
);

app.listen(3000, () => {
  console.log('サーバーはhttp://localhost:3000で実行中です');
});

この例では、他のインストール済みblockletのblocklet.ymlにimgpackタイプのリソースのエントリがある場合、そのリソースのディレクトリ内のすべてのファイルが配信されます。例えば、/example.pngへのリクエストは、そのblockletからexample.pngファイルを配信します。

オプション

initStaticResourceMiddleware関数は、以下のプロパティを持つ設定オブジェクトを受け入れます：

OptionTypeDescription
expressobject必須。Expressアプリケーションのインスタンス。
resourceTypes(string | ResourceType)[]必須。スキャンするリソースタイプを定義する配列。詳細は後述のResourceTypeオブジェクトを参照してください。
optionsobjectオプション。内部のserve-staticハンドラに渡される設定オブジェクト。一般的なプロパティには、キャッシュヘッダーを制御するためのmaxAge（例：'365d'）やimmutable（例：true）が含まれます。
skipRunningCheckbooleanオプション。trueの場合、ミドルウェアはインストール済みだが現在実行されていないblockletもスキャンします。デフォルトはfalseです。

ResourceTypeオブジェクト

より詳細な制御を行うには、resourceTypesオプションに単純な文字列の代わりにオブジェクトの配列を指定できます。各オブジェクトは以下のプロパティを持つことができます：

PropertyTypeDescription
typestring必須。リソースタイプの名前。依存するblockletのblocklet.ymlで定義されたタイプと一致する必要があります。
didstring必須。リソースを提供するblockletコンポーネントのDID。標準のMedia KitにはImageBinDidを使用できます。
folderstring | string[]オプション。スキャン対象となるリソースディレクトリ内の特定のサブフォルダ、またはサブフォルダの配列。デフォルトはリソースディレクトリのルート（''）です。
whiteliststring[]オプション。含めるファイル拡張子の配列（例：['.png', '.jpg']）。指定した場合、これらの拡張子を持つファイルのみが配信されます。
blackliststring[]オプション。除外するファイル拡張子の配列（例：['.md', '.txt']）。
setHeaders(res, path, stat) => voidオプション。配信されるファイルにカスタムレスポンスヘッダーを設定するための関数。
immutablebooleanオプション。この特定のリソースタイプに対してトップレベルのoptions.immutableを上書きし、Cache-Controlヘッダーを制御します。
maxAgestringオプション。この特定のリソースタイプに対してトップレベルのoptions.maxAgeを上書きします。

高度な例

この例では、特定のルールを持つ2つの異なるタイプのリソースを配信する、より複雑な設定を示します。

server.js

javascript
import express from 'express';
import { initStaticResourceMiddleware } from '@blocklet/uploader-server';
import { ImageBinDid } from '@blocklet/uploader-server/constants';

const app = express();

app.use(
  initStaticResourceMiddleware({
    express,
    skipRunningCheck: true,
    resourceTypes: [
      {
        type: 'imgpack',
        did: ImageBinDid,
        folder: 'public/images',
        whitelist: ['.png', '.jpg', '.gif'],
      },
      {
        type: 'theme-assets',
        did: 'z2q...someThemeBlockletDid', // 特定のテーマblockletのDID
        folder: ['css', 'fonts'],
        blacklist: ['.map'],
      },
    ],
    options: {
      maxAge: '7d', // デフォルトのキャッシュは7日間
    },
  })
);

app.listen(3000);

この設定は、以下の処理を行います：

  1. Media Kit（ImageBinDid）によって提供されるimgpackリソースをスキャンしますが、public/imagesサブフォルダ内のみを対象とし、.png、.jpg、.gifファイルのみを配信します。
  2. 特定のDIDを持つblockletからtheme-assetsリソースをスキャンし、cssとfontsの両方のサブフォルダを検索し、ソースマップ（.map）ファイルを無視します。
  3. 一致したすべてのファイルに対して、デフォルトのCache-Controlのmax-ageを7日間に設定します。

自動更新

このミドルウェアは動的な環境向けに設計されています。blockletのライフサイクルイベントを自動的にリッスンします。コンポーネントが追加、削除、開始、停止、または更新されると、ミドルウェアは自動的に再スキャンして内部のリソースマップを更新するため、アプリケーションを再起動する必要はありません。

次に、アプリケーションの再起動を必要とせずに、リアルタイムで更新可能なディレクトリからファイルを配信する方法を学びます。

initDynamicResourceMiddleware(options)

リアルタイムのファイル監視をサポートし、指定されたディレクトリから動的リソースを配信するためのAPIリファレンス。

続きを読む