Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?
@suzakutakumi3

備忘録 Goでginを使う時に、cssやjsのファイルが読み込めない問題の解決

書いた理由

go言語でginを使っていたら、htmlからjsが読み込めない問題が発生したので、忘れないようにメモっておきます。また、ginを使わない場合でも同様の操作が必要らしいです。
cssの読み込みも同様にやるので、省略します。

ディレクトリについて

githubに今回のコードはおいてあります。
correct.goが正常に動作するプログラムで、incorrect.goが正常に動作しないプログラムです。

./
├── correct.go
├── incorrect.go
└── src
    ├── index.html
    └── js
        └── main.js

htmlとjs

ボタンを押すと、alertでPushed!!と出るだけの簡単なプログラムです。

index.html
<html>
  <head>
    <title>gin-js</title>
    <script defer="defer" src="./js/main.js" ></script>
  </head>
  <body>
      <button id="btn">Push!!</button>
  </body>
</html>

main.js
document.getElementById("btn").onclick=function(){
    alert("Pushed!!")
}

失敗するプログラム

/に接続すると、index.htmlが表示されるいたって簡単なプログラムです。

incorrect.go
package main

import "github.com/gin-gonic/gin"

func main() {
    router := gin.Default()
    router.LoadHTMLGlob("src/*.html")
    router.GET("/", func(ctx *gin.Context) {
        ctx.HTML(200, "index.html", gin.H{})
    })
    router.Run()
}

実行すると/js/main.jsにGETリクエストをして、404が返ってきています。
image.png

成功するプログラム

correct.go
package main

import "github.com/gin-gonic/gin"

func main() {
    router := gin.Default()
    router.Static("/js", "src/js/") // ここを追加するだけ!
    // router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所")
    router.LoadHTMLGlob("src/*.html")
    router.GET("/", func(ctx *gin.Context) {
        ctx.HTML(200, "index.html", gin.H{})
    })
    router.Run()
}

実行すると/js/main.jsにGETリクエストをして、200が返ってきて成功しています!
image.png

静的なファイルにはこのメソッドを使用するらしいです。(詳しくは自分で調べて...)
router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所")

最後に

調べても全然出てこなく、30分ぐらいかかったので備忘録&周知のために記事を書きました。
誰かの役に立ったら幸いです。

今回のリポジトリ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?