Reactjs basename和主页未按预期工作，无法为开发中的/静态/文件提供服务

不确定这是Kubernetes、

ingress nginx

还是ReactJS（

create react app

）问题

项目结构

new-app/
  client/
    src/
      App.js
      index.js
      Test.js
    package.json
  k8s/
    client.yaml
    ingress.yaml
  server/
  skaffold.yaml

// App.js

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';

import Test from './Test';

const App = () => {
  return (
    <BrowserRouter
      basename='/client'>
        <>
          <Route exact path='/' component={Test} />
        </>
    </BrowserRouter>

  );
}

export default App;

问题

new-app/
  client/
    src/
      App.js
      index.js
      Test.js
    package.json
  k8s/
    client.yaml
    ingress.yaml
  server/
  skaffold.yaml

// App.js

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';

import Test from './Test';

const App = () => {
  return (
    <BrowserRouter
      basename='/client'>
        <>
          <Route exact path='/' component={Test} />
        </>
    </BrowserRouter>

  );
}

export default App;

• 当使用Skaffold启动集群时，ReactJS前端应该以

  192.168.64.5/客户端运行

• 导航到

  192.168.64.5/client

  并进入空白屏幕
• 开发人员控制台显示：

基本上，它试图从

/static

提供静态文件，但我需要它们来自

/client/static

支持的解决方案

# Dockerfile.dev

FROM node:alpine
EXPOSE 3000
WORKDIR '/app'
COPY ./client/package.json ./
RUN npm install
COPY ./client .
CMD ["npm", "run", "start"]

假设这是一个问题，解决方案如下：

• 在

  package.json中设置
  homepage

• 在

  react路由器dom中设置
  basename

• 跟随

在我的情况下似乎没有一个起作用。仍然显示试图从

/static

而不是

/client/static

提供服务的资产

ReactJS应用程序代码

new-app/
  client/
    src/
      App.js
      index.js
      Test.js
    package.json
  k8s/
    client.yaml
    ingress.yaml
  server/
  skaffold.yaml

// App.js

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';

import Test from './Test';

const App = () => {
  return (
    <BrowserRouter
      basename='/client'>
        <>
          <Route exact path='/' component={Test} />
        </>
    </BrowserRouter>

  );
}

export default App;

Kubernetes/Skaffold和Docker舱单

# Dockerfile.dev

FROM node:alpine
EXPOSE 3000
WORKDIR '/app'
COPY ./client/package.json ./
RUN npm install
COPY ./client .
CMD ["npm", "run", "start"]

那么我做错了什么

编辑：

但我应该注意到，在这样做时，事情运行良好：

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

回购演示该问题：

createreact应用程序假定您的应用程序托管在服务web服务器的根目录或package.json（主页）中指定的子路径上。通常，createreact应用程序会忽略主机名。您可以使用此变量强制将资产逐字引用到您提供的URL（包括主机名）。这在使用CDN托管应用程序时可能特别有用

有三种方法可以解决此问题：

将您的basename添加到webpack输出->publicPath（如果您拒绝创建react应用程序项目，并且您已经可以访问webpack配置文件）

将PUBLIC_URL=“/client”添加到.env.production文件中

将homepage属性添加到package.json文件中，如下所示：

{
...
主页：“/client”
...
}

参考：

https://create-react-app.dev/docs/advanced-configuration/

显然，这在开发环境中的CRA中目前是不可能的：

---

当前，要在production env中使用CRA（或craco）创建不同的主页，您需要设置

# .env.production
PUBLIC_URL="/client" 

在文件.env.production（或.env.development，如果根路径在dev中不同）中，然后更改路由器的基本名称：

<BrowserRouter basename={process.env.PUBLIC_URL}>
  ...
</BrowserRouter>

...

我正在使用

create react app

所以除非我

npm eject

，否则不能访问

webpack.config.js

。我已经更新了我的答案，并写信告诉你如何解决这个问题。好的，我遵循了这些步骤以及其他一些步骤，仍然得到了相同的结果：资产来自

/static

，而不是

/client/static

。您实现了哪一个？另一种解决方案是将PUBLIC_URL=“/client”添加到.env文件而不是.env.production文件中，因为此env变量仅在生产模式下使用，而.env或.env.production应该可以正常工作。我尝试了2）和3）。我也在

.env

中尝试了

PUBLIC\u URL=“/client”

和同样的方法。此时，我正在尝试使用

npm start

并跳过整个

skaffold

和Kubernetes事件。