I know this comes up often, but I've tried the usual remedies:
"homepage": "/admin/v2" in the package.json<base href="%PUBLIC_URL%/"> in the index.html<BrowserRouter basename='/admin/v2'>These things work for my development environment, but not for production. I'm pretty sure the issue is in my nginx.conf for the microservice, that sits behind the ingress-nginx controller.
It is:
server {
listen 4001;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
}
Note: This is an example for my local dev cluster, but the issue is exactly the same regardless.
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: "nginx"
cert-manager.io/cluster-issuer: "letsencrypt-dev"
nginx.ingress.kubernetes.io/ssl-redirect: "true"
nginx.ingress.kubernetes.io/configuration-snippet: |
rewrite ^(/admin)$ $1/ permanent;
name: ingress-dev
namespace: dev
spec:
tls:
- hosts:
- localhost
secretName: tls-localhost-dev
rules:
- host: localhost
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: client-cluster-ip-service-dev
port:
number: 3000
- path: /admin
pathType: Prefix
backend:
service:
name: admin-cluster-ip-service-dev
port:
number: 4000
- path: /admin/v2
pathType: Prefix
backend:
service:
name: admin-v2-cluster-ip-service-dev
port:
number: 4001
- path: /api
pathType: Prefix
backend:
service:
name: api-cluster-ip-service-dev
port:
number: 5000Also, the package.json and index.html:
{
"name": "admin-v2",
"version": "0.1.0",
"private": true,
"homepage": "/admin/v2",
"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.1",
"@types/jest": "^26.0.20",
"@types/node": "^12.20.4",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"typescript": "^4.2.2",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "PORT=4001 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<base href="%PUBLIC_URL%/">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>At any rate, I'm pretty sure the issue lies in the nginx.conf so I'm continuing to mess with it, but thought I'd post to see if someone knows what the solution is.
Thanks!
EDIT: Not getting anywhere, but continuing to try. My Dockerfile would probably helpful as well:
FROM node:14-alpine as builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx
EXPOSE 4001
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/htmlAs you can see, all of the contents of /app/build get copied over to /usr/share/nginx/html. I have verified in the container that all the assets are there and in a subdirectory called: /static/ which is where ./css and ./js are.
Ok, figured it out... the problem was in the nginx.conf:
server {
listen 4001;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
rewrite ^/admin/v2/?(.*) /$1 break;
}
}