画像、CSS、JavaScriptを配信する

Step 1

assetsディレクトリを作る

画像、stylesheet、ブラウザ側 JavaScript を置く assets/ ディレクトリを作ります。

mkdir assets
touch assets/app.css
touch assets/hero.jpg

Step 2

ディレクトリを登録する

app.Assets には任意の Go fs.FS を渡せます。ローカル開発では os.DirFS("assets") が最小構成です。

package main

import (
    "os"
    "time"

    mb "github.com/YoshihideShirai/marionette/backend"
    mf "github.com/YoshihideShirai/marionette/frontend"
)

func main() {
    app := mb.New()

    app.Assets("/assets", os.DirFS("assets"),
        mb.WithAssetCache(24*time.Hour),
    )
    app.AddStylesheet(app.Asset("app.css"))

    app.Page("/", func(ctx *mb.Context) mf.Node {
        return mf.Container(mf.ContainerProps{
            MaxWidth: "3xl",
            Centered: true,
        },
            mf.Image(mf.ImageProps{
                Src:         ctx.Asset("hero.jpg"),
                Alt:         "Dashboard preview",
                Width:       1200,
                Height:      800,
                AspectRatio: "video",
                ObjectFit:   "cover",
            }),
        )
    })

    if err := app.Run("127.0.0.1:8080"); err != nil {
        panic(err)
    }
}

Step 3

asset URLを組み立てる

アプリ全体の stylesheet や script には app.Asset、ハンドラ内では ctx.Asset を使います。

• app.Asset("app.css") は /assets/app.css になります
• ctx.Asset("hero.jpg") は /assets/hero.jpg になります
• https:// の絶対 URL はそのまま返します。

Step 4

配布用にassetを埋め込む

単一バイナリとして配布したい場合は、Go の embed.FS と fs.Sub を使い、得られた filesystem を app.Assets に渡します。

package main

import (
    "embed"
    "io/fs"
    "time"

    mb "github.com/YoshihideShirai/marionette/backend"
)

//go:embed assets
var embeddedAssets embed.FS

func main() {
    app := mb.New()

    assets, err := fs.Sub(embeddedAssets, "assets")
    if err != nil {
        panic(err)
    }
    app.Assets("/assets", assets,
        mb.WithAssetCache(365*24*time.Hour),
        mb.WithAssetImmutable(),
    )

    // Register pages and actions here.
}

Step 5

ここで習得したこと

• app.Assets で静的ファイルを配信する
• app.Asset と ctx.Asset でURLを組み立てる
• embed.FS で配布しやすいバイナリにする

次は バックエンドとフロントエンドの通信 を学びます。