🔥

lumeで作成したサイトにBasic認証をかける

2023/11/19に公開

TypeScript

Deno

lume

tech

静的サイトジェネレータとしてDeno製のlumeを利用しています。
Deno製なので設定ファイル数が少なく高速に動作するので重宝しています。
今回はlumeでBasic認証をかける方法を記録いたします。

環境

macOS 13.5.2
deno 1.38.2

準備

以下でlumeプロジェクトを用意します。
- ※用意済みであれば次のステップに進みます。

# ディレクトリ作成&移動
mkdir hoge
cd hoge

# lumeプロジェクト作成
deno run -Ar https://deno.land/x/lume/init.ts

# indexページ作成
touch index.md
echo "# こんにちは" > index.md

# 開発サーバー起動
# localhost:3000で確認
deno task serve

サーバー設定

lumeにはデフォルトとは別にサーバー設定をカスタマイズすることが可能です。
まずルートディレクトリにserver.tsファイルを作成します。

touch server.ts

中身を以下にします。

import Server from "https:/deno.land/x/lume/core/server.ts";

const PORT = 8000;
const server = new Server({
  port: 8000,
  root: `${Deno.cwd()}/_site`,
});

server.start();

console.log(`Listening on http://localhost:${PORT}`);

編集後、以下のコマンドで起動して別ポートで表示できることを確認します。
- ※こちらはホットリロードはしないので、開発時はdeno task serveを利用するのが便利です。

deno run --allow-net --allow-read server.ts

次にBasic認証の設定を追加します。
lumeではBasic認証はmiddlewareとして実装されているので、こちらを利用します。
server.tsの中身を以下に変更します。

import Server from "https:/deno.land/x/lume/core/server.ts";

// 追記
import basicAuth from "https:/deno.land/x/lume/middlewares/basic_auth.ts";
import "https://deno.land/std@0.207.0/dotenv/load.ts";

const PORT = 8000;
const server = new Server({
  port: 8000,
  root: `${Deno.cwd()}/_site`,
});

// 追記
const username = Deno.env.get("USERNAME") ?? "";
const password = Deno.env.get("PASSWORD") ?? "";
if (!username && !password) {
  throw new Error("not env USERNAME or PASSWORD");
}

// 追記
server.use(basicAuth({
  users: {
    [username]: password,
  },
}));

server.start();

console.log(`Listening on http://localhost:${PORT}`);

変更後、環境変数設定として.envファイルを作成します。
- ※開発時は.envファイル、本番にあげるときは対象のホスティングサービス(例: Deno Deploy)の環境変数を利用するようにしましょう。

touch .env

中身を以下にします。

USERNAME=user1
PASSWORD=hogehoge

編集後、再度以下のコマンドで起動してBasic認証がかかっていることを確認します。

deno run --allow-net --allow-read --allow-env server.ts

以上です。

lumeで作成したサイトにBasic認証をかける

環境

準備

サーバー設定

参考

Discussion