Go言語コワクナイ第2話 - バックエンドプログラマのメモ置き場

〜echoでHTMLファイルを表示してWebサイトを作ってみよう〜

前回のあらすじ

main.goに

e := echo.New()
e.GET("/", func(ctx echo.Context) {
    return ctx.JSON(200, "Hello, World!")
})

port := ":1323"
e.Logger.Fatal(e.Start(port))

と書くだけで簡単にサーバーを起動することができました。

今回は前回使用したコードを使ってHTMLファイルを表示してみましょう。

今回使うもの

Go言語
echo
HTML
CSS

準備

まずHTMLファイルとCSSファイルを用意しましょう

$ mkdir assets
$ mkdir assets/css
$ mkdir public

assets/cssにcommon.cssを作成します

.text-red {
  color: red;
}

publicにindex.htmlを作成します。

<html>
  <head>
    <link rel="stylesheet" href="css/common.css" type="text/css">
  </head>
  <body>
    <h1>Hello, World!</h1>
    <div>
      <p>こんにちわ、<span class="text-red">世界</span></p>
    </div>
  </body>
</html>

class text-redがついた'世界'が赤くなるような指定ですね次にmain.goを編集していきましょう。

前回書いた

e.GET("/", func(ctx echo.Context) {
    return ctx.JSON(200, "Hello, World!")
})

を

e.Static("/", "assets")
e.File("/", "public/index.html")

に書き換えるだけです

書き換え後のmain()はこのようになります

func main() {
    e := echo.New()
    
    e.Static("/", assets)
    e.File("/", "public/index.html")
    
    port := ":1323"
    e.Logger.Fatal(e.Start(port))
}

では環境を起動してみましょう。