Zenn
⛏️

Goで静的ファイルを読み込む方法

2022/09/17に公開
CSS
Go
HTML
tech

前回、フレームワークを使わずにGolangの機能のみで、簡易的なアプリケーションを作成しました。

今回は続きで、CSSやjsを適用したいので、CSSやJavaScriptなどの静的ファイルを読み込めるようにしたいと思います。前回のコードはこちら

以下、ディレクトリ、ファイルを追加します。

$ mkdir static
$ touch static/style.css
$ touch static/main.js

htmlで、CSSとJavaScriptを読み込みます。

view.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--css読み込み-->
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>読んだ書籍</h1>
<form action="/view/create" method="post">
    <div><input type="text" name="value"></div>
    <div><input type="submit" value="追加"></div>
</form>
<div>
    {{ range .Books }}
    <p>{{.}}</p>
    {{ end }}
</div>
<!--js読み込み-->
<script src="/static/main.js"></script>
</body>
</html>

CSSとjsファイルを追加します。CSSは、h1タグの文字をピンクにする。jsは、バックグランドカラーを白から徐々に青に変わるように記述しています。

style.css
h1 {
    color: deeppink;
}
main.js
document.body.animate(
    {
        background: ["#FFFFFF", "#3399CC"],
    },
    {
        fill: "forwards",
        duration: 3000
    }
);

作成した、CSSとjsを読み込めるように、サーバー側にもコードを追加していきます。

server.go
func main() {
	http.HandleFunc("/view", viewHandler)
	http.HandleFunc("/view/create", createHandler)
	// 追加
	http.Handle("/static/", http.StripPrefix("/static", http.FileServer(http.Dir("./static/"))))
	fmt.Println("Server Start Up........")
	log.Fatal(http.ListenAndServe("localhost:8080", nil))
}

ここで大事なのが、test1/test2/static、test1/staticという２つのリクエストどちらも対応させる必要があります。

http.StripPrefixメソッドを使って対応させることが可能となります。

http.FileServer(http.Dir("path"),pathにあるディレクトリをハンドラーとして返す。

http.StripPrefix("path", handler),pathより前を取り除いたpathをhandlerに渡す

http.Handle("path",handler),pathにリクエストが来たらhandlerを返す

http.StripPrefixメソッドで、あるpathから前を除外する。localhost:8080/test1/test2/static、localhost:8080/test1/staticも同じリクエストとして扱ってくれます。

サーバーを起動します。

 $ go run server.go
Server Start Up........

Webサーバーが立ち上がったのでlocalhost:8080/viewにアクセスします。

しっかり、反映されていますね！(jsの徐々に色が変わる部分は、画像ではわからないですね‥、バックグラウンドが最初は白でした笑）

Discussion