Run SPA on a different Route

Viewed 403

So I've set up my SPA in Go using Gorilla/Mux but I want to run it on different routes so I can connect two of my Kubernetes services together (2 different SPAs). could it be that I have to change my kubernetes service to /stock instead?

My one service runs on the regular path "/" and I want to add a second service so that when the user types in "https://URL/stock" my second SPA is served (want 2nd spa to run on /stock)

I know one way would just be to merge my code and whatnot into my first service, but I was wondering if I could do it this way?

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;

I know I can change the path to /stock in App.js but when I got to localhost:8080/ it still shows my navbar on it

UPDATED

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

So when I go to the /stock endpoint, I'm getting

The resource from "www.url.com//static/css/2.d9ad5f5c.chunk.css" was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff)

I assume this is because my Stock Service default path is set to / in main.go so it's trying to serve files from there, but on the web I'm trying to access it from /stock

NEW 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",
}

I'm still using ingress to access my second service

2 Answers

Although doable, if you are using Kubernetes it seems hacky to do it the way you are doing it. Why not use 2 Kubernetes services and then connect to them through an Ingress controller like Nginx? For example:

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

✌️

So I actually found a different fix myself after doing a lot of research. I was running into trouble using Name Based Virtual hosting/ having two different ingress classes.

I decided to modify my react app root directory (didn't know I could do that before)

package.json

{
"homepage": "stock",
}

I also served my Home component in my App.js from /stock

and the changed my main.go

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

Updated code will be changed above

Related