【Elysia/Bun】静的プラグイン(Static Plugin)について

Last updated at 2023-12-27Posted at 2023-12-27

ここまで、起動用の index.ts ページにHTMLもCSSも全部まるっと書いてきましたが、例えば、Express などで言うところの「app.use(express.static('public'));」みたいな機能は、Bun にも Elysia にもあります。

ディレクトリ構成

例えば、 Elysia で次のようなディレクトリがあるときに、、、

.hoge/
├─ src/
│    └─ index.ts // 起動用ファイル
├─ public/
│    ├─ tako.png 
│    └─ piyo/ 
│        └─ ika.png

tako.png

ika.png

※画像はいらすとやさん

まず、static プラグインをインストールして、

$ bun add @elysiajs/static

次のように index.ts 書き直して、、、、

index.ts

import { Elysia } from 'elysia'
import { staticPlugin } from '@elysiajs/static'

new Elysia()
    .use(staticPlugin()) //ここで適用する
    .listen(9015)

起動し、、

$ bun --hot ./src/index.ts

イカさんの方は、/public/piyo/ika.png なのでこうなります。

まぁ、今回も作ったものを pm2 start "bun dev" してあげておきます。まぁ期間限定になるとは思いますが、参考までにどうぞ。タコはこちら。http://74.226.208.203:9015/public/tako.png

まぁ、ルーティングのことなど考えずに /public 配下に置いたディレクトリとファイルのパス通りにアクセスできるわけで簡単ですね。

しかも、文字通り静的ファイルですから、動的生成のための待ち時間なしの生成済みで速いし、検索エンジンも普通に読めてSEO的にも優れてるわけです。

特に凝ったもの以外のサイト構成はこれで良いのかなとは思いますね。

詳細はここにあります。

本家を読めば、今回の「public」という名前はデフォルト値だとかいろいろ説明があります。

Elysia > Static Plugin

github elysiajs/elysia-static

あと、Bunの staticの方はまたの機会に(^^)/

待ちきれない方のために、Bun の static の説明はこちら。

Bun > Build an HTTP server using StricJS and Bun