Denoで静的ファイルサーバーを3行で書く #JavaScript

Denoを使うと、静的ファイルサーバーを3行で書くことができます。

serve.ts

import { serve } from "https://deno.land/std@0.141.0/http/mod.ts";
import { serveDir } from "https://deno.land/std@0.141.0/http/file_server.ts";
serve((request) => serveDir(request));

ファイルに書き込む内容は以上です。
（tsconfigやpackage.jsonやeslintrcやprettierrcは不要です。）

サーバーの起動は以下のコマンドで行います。

deno run --allow-net=0.0.0.0:8000 --allow-read=. ./serve.ts

ブラウザから http://localhost:8000/serve.ts にアクセスすると、serve.tsのファイルが見えているはずです。

以上、Denoで静的ファイルサーバーを3行で書く方法でした。

オプションを設定する

これだけだと記事が締まらないので、オプションの設定方法を見ていきます。

特定のディレクトリ以下のファイルを静的ファイルとして配信する

オプションを指定しない場合、カレントディレクトリ以下のファイルが静的ファイルとして配信されます。
プロジェクト構成によっては、、./public/以下に静的ファイルが格納されているかもしれません。
そういう場合は、fsRootオプションにディレクトリを指定すると、そのディレクトリから静的ファイルを配信してくれます。

import { serve } from "https://deno.land/std@0.141.0/http/mod.ts";
import { serveDir } from "https://deno.land/std@0.141.0/http/file_server.ts";
serve((request) => serveDir(request, { fsRoot: "./public/" }));

特定のパスへのリクエストのみ静的ファイルを配信したい場合

https://example.com/static/のように、URLが/static/以下だった時のみ静的ファイルを配信したい場合もあります。
この時は、urlRootオプションを指定すると、指定したパス以下を静的ファイルとして配信してくれます。（例えばURLが/static/foo.htmlのときは./foo.htmlの内容が配信される）

更にこれをfsRootオプションと組み合わせることができます。

import { serve } from "https://deno.land/std@0.141.0/http/mod.ts";
import { serveDir } from "https://deno.land/std@0.141.0/http/file_server.ts";

serve((request) => {
  const { pathname } = new URL(request.url);
  if (pathname.startsWith("/static")) { // URLが"/static"始まりだった場合は
    return serveDir(request, {
      fsRoot: "public", // publicディレクトリ以下を静的ファイルとして配信
      urlRoot: "static",
    });
  }
  // それ以外の場合は、何らかのAPIをレスポンスする
  return Response.json({ data: "なんらかのAPI" });
});

ファイル一覧ページを表示する

URLがスラッシュで終わっている場合に画像のような「ファイル一覧ページ」を表示させることができます。

これをするにはshowDirListingオプションにtrueを設定します。

import { serve } from "https://deno.land/std@0.141.0/http/mod.ts";
import { serveDir } from "https://deno.land/std@0.141.0/http/file_server.ts";
serve((request) => serveDir(request, { showDirListing: true }));

その他のオプション

enableCors: CORSヘッダーを付けます。（trueにすると他のWebサイトからfetchなどでアクセスできます。）
quiet: デフォルトではアクセスのたびにログが表示されます。これを非表示にします。
etagAlgorithm: serveDir関数はレスポンスに自動でEtagを付けてくれるのですが、このEtagを算出するアルゴリズムを指定します。

まとめ

Denoを使うと静的ファイルサーバーが3行で書けます。

Denoではこのようなよく使うボイラープレートは一通り揃っているので、標準ライブラリや公式サンプル集を色々探してみるといいと思います。
最近ではdeno_blogという「マークダウンファイルを作成してblog関数を呼び出すだけでブログ構築できる」というツールも公式から公開されました。Denoさえあれば何でもできる感じにどんどんなっていって、便利ですね。