如何使用 Golang (Go) 和 gorilla/mux 服务 NextJs 前端？

Question

我关注 this example 使用 Golang 和本机 net/http 包为 NextJs 前端单页应用程序提供服务：

import (
    "embed"
    "io/fs"
    "log"
    "net/http"
    "runtime/pprof"
)

//go:embed nextjs/dist
//go:embed nextjs/dist/_next
//go:embed nextjs/dist/_next/static/chunks/pages/*.js
//go:embed nextjs/dist/_next/static/*/*.js
var nextFS embed.FS

func main() {
    // Root at the `dist` folder generated by the Next.js app.
    distFS, err := fs.Sub(nextFS, "nextjs/dist")
    if err != nil {
        log.Fatal(err)
    }

    // The static Next.js app will be served under `/`.
    http.Handle("/", http.FileServer(http.FS(distFS)))
    // The API will be served under `/api`.
    http.HandleFunc("/api", handleAPI)

    // Start HTTP server at :8080.
    log.Println("Starting HTTP server at http://localhost:8080 ...")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

并且有效。现在我想使用 gorilla/mux 而不是原生的 net/http 包。所以现在我的 main 函数看起来像这样：

func main() {

    // Root at the `dist` folder generated by the Next.js app.
    distFS, err := fs.Sub(nextFS, "nextjs/dist")
    if err != nil {
        log.Fatal(err)
    }

    r := mux.NewRouter()
    r.Handle("/", http.FileServer(http.FS(distFS)))

    srv := &http.Server{
        Handler: r,
        Addr:    "0.0.0.0:8080",
        // Good practice: enforce timeouts for servers you create!
        WriteTimeout: 15 * time.Second,
        ReadTimeout:  15 * time.Second,
    }

    log.Fatal(srv.ListenAndServe())
}

当我在浏览器中导航到 localhost:8080 时，这适用于为 index.html file 提供服务，但该页面没有样式、没有图像，也没有 JavaScript.

我尝试使用 gorilla/mux 中的说明来为 SPA 提供服务，但是对于此 Next.js 应用程序，它找不到文件并且浏览器会因连接重置错误而出错。

我还需要做什么才能使 CSS、JavaScript 和图像在加载页面时可用？

Answer 1

请试试

    r.PathPrefix("/").Handler(http.FileServer(http.FS(distFS)))

gorilla/mux 将 Handle 函数的第一个参数解释为模板：https://pkg.go.dev/github.com/gorilla/mux#Route.Path.

请注意添加路由的顺序：当两条路由匹配相同的路径时，先添加的路由优先。

如何使用 Golang (Go) 和 gorilla/mux 服务 NextJs 前端？

How to serve a NextJs frontend using Golang (Go) and gorilla/mux?

go

gorilla

next.js