运行 SPA 在不同的路线上

Question

所以我使用 Gorilla/Mux 在 Go 中设置了我的 SPA，但我想运行它在不同的路由上，这样我就可以将我的两个 Kubernetes 服务连接在一起（2 个不同的 SPA）。 难道我必须将我的 kubernetes 服务更改为 /stock？

我的一个服务运行在常规路径“/”上，我想添加第二个服务，这样当用户输入“https://URL/stock”时，我的第二个 SPA 是服务（想要第二个水疗中心运行 on /stock）

我知道一种方法就是将我的代码和诸如此类的东西合并到我的第一个服务中，但我想知道我是否可以这样做？

main.go

type spaHandler struct {
    staticPath string
    indexPath  string
}

func (h spaHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    path, err := filepath.Abs(r.URL.Path)
    if err != nil {
        http.Error(w, err.Error(), http.StatusBadRequest)
        return
    }

    path = filepath.Join(h.staticPath, r.URL.Path)

    _, err = os.Stat(path)
    if os.IsNotExist(err) {
        http.ServeFile(w, r, filepath.Join(h.staticPath, h.indexPath))
        return
    } else if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    http.FileServer(http.Dir(h.staticPath)).ServeHTTP(w, r)
}


func main() {
    router := mux.NewRouter().StrictSlash(true)
    //Serve Other Routes Above PathPrefix
    router.HandleFunc("/api/findStock", findStock)
    spa := spaHandler{staticPath: "./stock/build", indexPath: "index.html"}
    router.PathPrefix("/").Handler(spa) <------ any way to serve on /stock???

    svr := &http.Server{
        Handler: router,
        Addr:    ":8080",
        WriteTimeout: 15 * time.Second,
        ReadTimeout:  15 * time.Second,
    }

    log.Fatal(svr.ListenAndServe())
}

App.js

class App extends Component {
  render(){
    return (
        <Router>
          <div>
            <section>
              <NavBar/>
              <Switch>
                <Route exact path='/'  component={Home}/>
              </Switch>
            </section>
          </div>
        </Router>
    );
  }
}

export default App;

我知道我可以在 App.js 中更改到 /stock 的路径，但是当我到达 localhost:8080/ 时，它仍然显示我的导航栏

已更新

ingress.yaml

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/from-to-www-redirect: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /
  name: ingress
spec:
  rules:
   - host: www.url.com
     http:
       paths:
         - backend:
             serviceName: service1
             servicePort: 80
           path: /
         - backend:
             serviceName: stockService
             servicePort: 80
           path: /stock

所以当我转到 /stock 端点时，我得到

由于 MIME 类型（“text/plain”）不匹配（X-Content-Type-选项：nosniff)

我认为这是因为我的 Stock Service 默认路径设置为 / 在 main.go 中，所以它试图从那里提供文件，但在网络上我试图从 /stock

新 UPDATE/FIX

main.go

func main() {
    router := mux.NewRouter()
    //Serve Other Routes Above PathPrefix
    router.HandleFunc("/api/findStock", findStock)
    spa := spaHandler{staticPath: "./stock/build", indexPath: "index.html"}
    router.PathPrefix("/stock").Handler(http.StripPrefix("/stock", spa)) <-- UPDATED

    svr := &http.Server{
        Handler:      router,
        Addr:         ":8080",
        WriteTimeout: 15 * time.Second,
        ReadTimeout:  15 * time.Second,
    }

    log.Fatal(svr.ListenAndServe())
}

App.js

class App extends Component {
  render(){
    return (
        <Router>
          <div>
            <section>
              <NavBar/>
              <Switch>
                <Route exact path='/stock'  component={Home}/>
              </Switch>
            </section>
          </div>
        </Router>
    );
  }
}

export default App;

package.json

{
  "homepage": "stock", <---- This was newly added to the top of my file
  "name": "stock",
  "version": "0.1.0",
}

我仍在使用入口访问我的第二个服务

Answer 1

虽然可行，但如果您使用的是 Kubernetes，那么按照您的方式进行操作似乎很麻烦。为什么不使用 2 Kubernetes services and then connect to them through an Ingress controller like Nginx？例如：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: minimal-ingress
spec:
  rules:
  - http:
      paths:
      - path: /stock
        pathType: Exact
        backend:
          service:
            name: stock-service
            port:
              number: 80
      - path: /
        pathType: Prefix
        backend:
          service:
            name: first-service
            port:
              number: 80

✌️

Answer 2

所以我实际上在做了很多研究之后自己找到了一个不同的修复方法。我运行在使用基于名称的虚拟主机时遇到了麻烦/有两个不同的入口类。

我决定修改我的 React 应用程序根目录（之前不知道我可以这样做）

package.json

{
"homepage": "stock",
}

我还在 App.js 中从 /stock

提供了我的主页组件

并且改变了我的 main.go

router.PathPrefix("/stock").Handler(http.StripPrefix("/stock", spa))

更新后的代码将在上面进行更改

运行 SPA 在不同的路线上

Run SPA on a different Route

go

single-page-application

reactjs

gorilla

kubernetes