GoサーバーでReactを配信

今回は簡易的にReactのビルドした静的コンテンツを配信する手順を紹介します。

GoとReactの入ったプロジェクトの作り方は前回の記事を参考にしてください!
Bun + Go の開発コンテナ

Reactのプロジェクトをビルドする

今回のプロジェクトでは下記のようなディレクトリ構造です。

root
├── back(Goサーバー)
└── front(Reactプロジェクト)

GoサーバでReactのプロジェクトを配信するには静的コンテンツである必要があります。
なのでReactプロジェクトはビルドできる状態にする必要があります。
そして、GoサーバにGetメソッドでコンテンツを取得するという手順です。
ビルドコマンド(bun) -> bun run build

Goサーバーを作る

問題なくReact側がビルド出来たら配信するためのGoサーバーを構築します。
下記コードはfrontディレクトリのdist(静的コンテンツ)を配信するためだけのコードです。
※ルーティングするのにchiパッケージのルータを使用するのでインストールしてください。
chiルータの使い方

package main

import (
	"github.com/go-chi/chi/v5"
	"net/http"
	"os"

	"log"
	"path/filepath"
)

func main() {
	router := chi.NewRouter()
	router.Get("/*", func(w http.ResponseWriter, r *http.Request) {
		path := filepath.Join("./../front/dist", r.URL.Path)
		_, err := os.Stat(path)
		if os.IsNotExist(err) || r.URL.Path == "/" {
			http.ServeFile(w, r, "./../front/dist/index.html")
		} else {
			http.FileServer(http.Dir("./../front/dist")).ServeHTTP(w, r)
		}
	})
	log.Println("server start ...")
	http.ListenAndServe(":8080", router)
}

これで完成です。
go run main.goを実行後 http://localhsot:8080 にアクセスすることで配信されているのが確認できるのではないでしょうか?
このルーティングではReactプロジェクト内のページ遷移のルーティングにもしっかりindex.htmlをサーブするのでおすすめです。
chiルータを使うことで同一のサーバ内でもサブルータを立ててapiや別の処理を追加することができます。
それについては次回の記事で紹介したいと思います。
ありがとうございました。