BrowsersyncのrewriteRulesを使用してSSI環境を作る

久しぶりにSSIを使う必要がありBrowsersyncでできるようなのでやり方をメモ。
browsersync-ssiを使う方法がよく出てるけど、今回はBrowsersyncのrewriteRulesというオプションで実現する方法を紹介。

npmパッケージのインストール

必要なパッケージは下記の3つ。

1
npm i -D browsersync fs path

js側の設定

ここではserver.jsという名前でファイルを作成し、下記のような設定をする。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path');
const fs = require('fs');
const browserSync = require('browser-sync');

browserSync.init({
server: './',
rewriteRules: [
{
match: /<!--#include virtual="(.+?)" -->/g,
fn: function(req, res, match, filename) {
const filePath = path.join(__dirname, filename);
if (!fs.existsSync(filePath)) {
return `<span style="color: red">${filePath} could not be found</span>`;
}
return fs.readFileSync(filePath);
}
}
]
});

実行

1
node server.js