资产在开发中提供，但不在生产中并得到“未捕获的语法错误：意外的令牌 '<'”

如何解决资产在开发中提供，但不在生产中并得到“未捕获的语法错误：意外的令牌 '<'”

我知道这种情况经常出现，但我已经尝试了常用的补救措施：

"homepage": "/admin/v2" 在 package.json
<base href="%PUBLIC_URL%/"> 在 index.html
<browserRouter basename='/admin/v2'>

这些东西适用于我的开发环境，但不适用于生产环境。我很确定问题出在我的微服务 Nginx.conf 中，它位于 ingress-Nginx 控制器后面。

是：

server {
  listen 4001;
  root /usr/share/Nginx/html;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

注意：这是我本地开发集群的示例，但无论如何问题都完全相同。

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: 5000

此外，package.json 和 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>

无论如何，我很确定问题出在 Nginx.conf 上，所以我会继续弄乱它，但我想我会发帖看看是否有人知道解决方案是什么。

谢谢！

编辑：无处可去，但继续尝试。我的 Dockerfile 也可能会有所帮助：

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/html

如您所见，/app/build 的所有内容都被复制到 /usr/share/Nginx/html。我已经在容器中验证了所有资产都在那里，并且在一个名为：/static/ 的子目录中，它是 ./css 和 ./js 所在的位置。

解决方法

好的，想通了……问题出在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;
  }
}