在 LAMP/XAMPP/WAMP 上部署创建-反应-应用程序构建

Question

如何在Apache WAMP/XAMPP服务器上部署构建？

我有一个用create-react-app创建的应用程序，我有两个关于这个应用程序的页面

当我执行yarn start或npm start时，它工作正常，并且所有页面都在URL导航或按钮单击上正确呈现

我执行了构建命令

npm 运行构建

它正在build文件夹中生成所有static和index.html文件。

我将此构建文件夹内容移动到wamp文件夹的www，并在仅显示主页http://localhost url 上执行。 下一页给出了404 not found error

但是当我执行 npm 命令的 serve 模块时，它可以正常工作http://localhost:5000

服务构建

请帮我如何解决这个问题？

我必须在 wamp 服务器上部署我的应用程序，所有这些都是静态页面，没有 rest api 内容

Answer 1

默认情况下，你的反应项目被构建为直接部署到你的服务器'www'(根(文件夹中。因此，您可以将项目"build"文件夹的内容复制到WAMP"www"文件夹中，然后在浏览器中转到 http://localhost/。将显示您的项目。

或者，您可能希望使用 WAMP 根子文件夹，例如 'www/react/'。在这种情况下，将主页密钥添加到您的 package.json 文件中：

"homepage": "http://localhost/react/",

然后再次生成项目：

npm run build

最后，将项目"build"文件夹的内容复制到"www/react/"。要显示您的项目，请访问 http://localhost/react/

您可能会在如何在 Apache Web 服务器上部署 React 应用程序

Answer 2

在 htdocs (xampp( 中创建一个名为 react 的文件夹。

在package.json文件中添加"主页"："./"(相对路径(或"主页"："http://localhost/react/"，(绝对路径(。

在应用程序.js 文件

<BrowserRouter basename='/react'>
  <Switch>
    <Route exact path="/">
      Hello
    </Route>
    <Route path="*" render={() => "404 Not found!"} />
  </Switch>
</BrowserRouter>

配置 package.json 和 App 后.js运行构建命令

npm run build

然后将所有文件从构建文件夹复制到 htdocs 中的反应文件夹。

并在htdocs的反应文件夹中创建一个.htaccess。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

如果您的子文件夹名称不同，请将/react 替换为您的文件夹名称。

示例 - 重命名/反应自

"homepage": "http://localhost/react/"  
<BrowserRouter basename='/react'>

自

"homepage": "http://localhost/your_folder_name/"
<BrowserRouter basename='/your_folder_name'>

Answer 3

您需要为构建配置主页。

Answer 4

在 上设置 basename 属性。

<Router basename={'/directory-name'}>
    <Route path='/' component={Home} />
</Router>

目录名称是 XAMPP HTDOCS 文件夹下的文件夹名称