K
Q

Question

Anyway to serve /static from a prefixed URL (e.g. /client/static) with npm start?

1/20/2020

I've been working on this for a while and can't seem to get anywhere.

Basically, I have an ingress controller for a microservice that has a URL of:

- path: /client/?(.*)
  backend:
    serviceName: client-cluster-ip-service
    servicePort: 3000

However, when I navigate to 192.168.64.4/client (this is the minikube ip) I don't see anything because the URL npm start is using for the static files is /static. I need to change it to /client/static.

Is that possible?

I know that homepage: "/client" is not an option since that is just for production. This is in CRA so I'd like to avoid ejecting it.

EDIT:

Added my current ingress.yaml:

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$1
  name: ingress-service
  namespace: default
spec:
  rules:
    - http:
        paths:
          - path: /client/?(.*)
            backend:
              serviceName: client-cluster-ip-service
              servicePort: 3000
          - path: /api/?(.*)
            backend:
              serviceName: server-cluster-ip-service
              servicePort: 5000

The /api route works fine because Django has a built in way of handling prefixed paths. Without doing this, it will not serve static files properly particularly for the admin portal:

FORCED_SCRIPT_NAME = '/api'
STATIC_URL = '/api/static/'

ReactJS, apparently does not in development. You can manually navigate to /client/static/js/bungle.js and see the .js there. So somehow /client needs to be prefixed to the /static/ path.

I did try changing the following:

nginx.ingress.kubernetes.io/rewrite-target: /$2

This created some odd behavior.

On the /client, still the same issue, but can't find the /static files at any location (e.g., /client/static, /static, etc.)
On the /api, can't get it to serve anything with, or without, FORCE_SCRIPT_NAME. The ingress is getting into the Django, but says it can't match any of the routes, which is incredibly strange.

-- eox.dev

create-react-app

docker

kubernetes

nginx-ingress

reactjs

1 Answer

1/21/2020

Use the rewrite annotations in your ingress definition, I think that in your case it would be something like this:

annotations:
  nginx.ingress.kubernetes.io/rewrite-target: /$2

The $2 gets replaces with the capture (.*) of the match, then if you try to access /client/static the resulting rewrite would be /static ... this should work in theory, give it a try! If this didn't work let me know to try to figure out why

Here is a similar definition for my resources as well, not exactly as your case, but I am using the rewrite and it is working here.

apiVersion: v1
kind: Ingress
metadata:
  name: proxy-ingress
  namespace: repoflow-s3-proxy-demo
annotations:
  nginx.ingress.kubernetes.io/rewrite-target: /resources.repoflow.com/resources/$2
  nginx.ingress.kubernetes.io/upstream-vhost: s3.amazonaws.com
spec:
  rules:
  - host: s3-proxy.repoflow.com
    http:
      paths:
        - path: /resources(/|$)(.*)
          backend:
            serviceName: resources-external-service
            servicePort: 80

-- Victor Jimenez

Source: StackOverflow

KQ

Anyway to serve /static from a prefixed URL (e.g. /client/static) with npm start?

Similar Questions

1 Answer

K
Q