如何服务React [英] How to serve React

问题描述

我有一个简单的React应用程序，我想从我的Go服务器后端提供服务.我听说此过程类似于提供静态html文件，但似乎无法正常工作.

I have a simple React application I would like to serve from my Go server back end. I hear the process is similar to serving a static html file, but I just can't seem to get it to work.

当我尝试在浏览器上查看该应用程序时，它显示此页面无法正常工作"，并且本地主机已重定向了太多次"

When I try to view the app on the browser it says "This page isn't working" and that "localhost has redirected too many times"

这是我在本地运行服务器以及尝试处理React应用程序的代码

Here is the code where I am running the server locally as well as trying to handle the react application

func main() {

r := mux.NewRouter()

// handle app
buildHandler := http.FileServer(http.Dir("./client/build/index.html"))
r.PathPrefix("/").Handler(buildHandler)

staticHandler := http.StripPrefix("/static/", http.FileServer(http.Dir("./client/build/static")))
r.PathPrefix("/static/").Handler(staticHandler)

r.HandleFunc("/", index).Methods("GET")

srv := &http.Server{
    Handler:      r,
    Addr:         "127.0.0.1:8080",
    WriteTimeout: 15 * time.Second,
    ReadTimeout:  15 * time.Second,
}

// serve
fmt.Println("Server started on PORT 8080")
log.Fatal(srv.ListenAndServe())


}

这是索引路由的代码

func index(w http.ResponseWriter, r *http.Request) {
    // not sure if this is necessary
    http.ServeFile(w, r, "index.html")
}

我相信解决方案很简单，而且我很可能在某个地方犯了一个小错误.

I believe the solution is simple and that I am most likely making a small error somewhere.

推荐答案

在您的情况下，仅需要构建处理程序.它必须指向目录而不是文件.除路由外，其他处理程序已过时.

In your case only build handler is needed. It must point to directory not a file. Rest of the handlers are obsolete except the case of routing.

package main

import (
    "fmt"
    "github.com/gorilla/mux"
    "log"
    "net/http"
    "time"
)

func main() {

    r := mux.NewRouter()

    r.HandleFunc("/route1", index).Methods("GET")
    r.HandleFunc("/route2", index).Methods("GET")
    buildHandler := http.FileServer(http.Dir("client/build"))
    r.PathPrefix("/").Handler(buildHandler)

    srv := &http.Server{
        Handler:      r,
        Addr:         "127.0.0.1:8080",
        WriteTimeout: 15 * time.Second,
        ReadTimeout:  15 * time.Second,
    }

    fmt.Println("Server started on PORT 8080")
    log.Fatal(srv.ListenAndServe())

}

func index(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "client/build/index.html")
}

只有标准库才能实现同样的效果.

The same can be achieved with the standard library only.

package main

import (
    "fmt"
    "log"
    "net/http"
    "time"
)

func main() {

    r := http.NewServeMux()

    r.HandleFunc("/route1", index)
    r.HandleFunc("/route2", index)
    buildHandler := http.FileServer(http.Dir("client/build"))
    r.Handle("/", buildHandler)

    srv := &http.Server{
        Handler:      r,
        Addr:         "127.0.0.1:8080",
        WriteTimeout: 15 * time.Second,
        ReadTimeout:  15 * time.Second,
    }

    fmt.Println("Server started on PORT 8080")
    log.Fatal(srv.ListenAndServe())

}

func index(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "client/build/index.html")
}

这篇关于如何服务React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！