Assets being served in development, but not production and getting "Uncaught SyntaxError: Unexpected token '<'"

Question

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

"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)$ / 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 所以我继续搞砸它，但我想 post 看看是否有人知道什么解决方案是。

谢谢！

编辑：没有取得任何进展，但继续尝试。我的 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 所在的位置。

Answer 1

好的，明白了...问题出在 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/?(.*) / break;
  }
}

Assets being served in development, but not production and getting "Uncaught SyntaxError: Unexpected token '<'"

Assets being served in development, but not production and getting "Uncaught SyntaxError: Unexpected token '<'"

nginx

reactjs

kubernetes

create-react-app

nginx-ingress