こんにちは。KOUKIです。
とある企業で、Go言語を使ったWebアプリケーションの開発に携わっています。
前回、簡易Webアプリのテンプレートを紹介させていただきましたが、その発展編です。
Staticファイル(JavaScript, CSS)の配信処理をテンプレートに追加しました。
<目次>
前回
簡易Webアプリのテンプレート
ワークスペース
説明のため、ワークスペースだけ以下に示します。コードの内容は、前回の記事を参考にしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
mkdir webapp cd webapp # webappは自由に変更すること go mod init webapp mkdir -p cmd/web mkdir -p internal/handlers mkdir html touch cmd/web/main.go touch cmd/web/routes.go touch html/home.jet touch internal/handlers/handlers.go # 今回新しく追加する mkdir static touch static/scripts.js touch static/css.js |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$ tree . webapp ├── cmd │ └── web │ ├── main.go │ └── routes.go ├── go.mod ├── go.sum ├── html │ └── home.jet ├── internal │ └── handlers │ └── handlers.go └── static ├── scripts.js └── style.css |
Webサーバーの作成には、bmizerany/patモジュールを使用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// cmd/web/routes.go package main import ( "net/http" "webapp/internal/handlers" "github.com/bmizerany/pat" ) func routes() http.Handler { mux := pat.New() mux.Get("/", http.HandlerFunc(handlers.Home)) return mux } |
Staticファイル配信設定
Staticファイルの配信設定をします。とは言っても、それほど難しくありません。
cmd/web/routes.goファイルに、以下の処理を追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
package main import ( "net/http" "webapp/internal/handlers" "github.com/bmizerany/pat" ) func routes() http.Handler { mux := pat.New() mux.Get("/", http.HandlerFunc(handlers.Home)) // fileサーバーの設定 // ローカルのstaticフォルダを参照する fileServer := http.FileServer(http.Dir("./static/")) // http://localhost:8080/staticでファイルを配信できるようにする mux.Get("/static/", http.StripPrefix("/static", fileServer)) return mux } |
この設定で、Staticファイルを配信できるようになりました。
home.jetに、CSSとJSを読み込む処理を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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"> <title>Home</title> </head> <body> <h1>Home Page</h1> <!-- js読み込み --> <script src="/static/scripts.js"></script> </body> </html> |
scripts.jsに、次の処理を実装しましょう。
|
1 |
alert("JSが読み込まれたよ!") |
style.cssには、次のスタイルを実装します。
|
1 2 3 |
h1 { color: orange; } |
Webサーバーを起動してください。
|
1 2 |
$ go run cmd/web/*.go 2021/03/28 16:39:54 Starting web server on port 8080 |
「http://localhost:8080」にアクセスして、Staticファイルが読み込まれたか確認します。
OKですね。
おわりに
Go言語の基本機能だけでWebアプリケーションが作れそうですよね。VueJSやReactも使いたいところですが、このテンプレートがあれば簡単なので、しばらく使い続けたいと思います^^
それでは、また!
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。