browserSyncのrewriteRulesでSSI

WEBサーバで、SSI（Server Side Include）というのを使えるようにすると
この書式で、外部データをHTMLの一部として読み込めます。

<!--#include virtual="ssi/header.html" -->

npmパッケージでおなじみのbrowserSyncでSSIを使うときは、browsersync-ssiという、browserSyncのmoduleで拡張機能としてSSIを実現する追加パッケージが有名です。

…が、設定してみると
/はじまりのアドレスの際、表示させたいファイルを指定する serverのindexが効かなくなったので
moduleではなくrewriteRulesでSSIを再現してみました。

browserSyncのinitで設定

const browserSync = require('browser-sync');
const fs = require('fs');

const dest = `htdocs`;

browserSync.init({
    port: 8080,
    weinre: {
      port: 9090,
    },
    ui: false,
    open: 'external',
    notify: false,
    server: {
      baseDir: `${dest}`,
      index: [`_index.html`, `index.html`],
    },
    rewriteRules: [
      {
        match: /<!--#include virtual="(.+)" -->/g,
        fn: (req, res, match, filename) =>
          fs.statSync(`${dest}${filename}`) ? fs.readFileSync(`${dest}${filename}`, 'utf-8') : '',
      },
    ],
  });

ファイル操作ライブラリのmpmパッケージ、fsも使うので
requireで読み込んでおきます。

処理は、rewriteRulesのmatchでHTML内に埋まっているincludeの書式を探し出し
読み込みたい外部ファイルの存在を確認できたら、内容を取得して表示させる流れになっています。

fs.statSync … ファイルを確認
fs.readFileSync … 内容を取得

browserSyncのinitで設定

関連記事