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

Question

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

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

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

上正确呈现

我执行了构建命令

npm run build

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

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

但是当我执行 npm 命令的 serve 模块时，它在 http://localhost:5000

上工作正常

serve build

请帮我解决这个问题？

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

Answer 1

您需要为您的构建配置主页。

Answer 2

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

或者，您可能想要使用 WAMP 根 子文件夹 ，例如'www/react/'。在这种情况下，向您的 package.json 文件添加一个 homepage 键：

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

然后再次构建您的项目：

npm run build

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

您可以在

Answer 3

在 .

上设置 basename 属性

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

directory-name 是你的 xampp htdocs 文件夹下的文件夹名称

Answer 4

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

在 package.json 文件中添加 "homepage": "./"（相对路径）或 "homepage": "http://localhost/react/"（绝对路径）。

在 App.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

然后将 build 文件夹中的所有文件复制到 htdocs 中的 react 文件夹。

并在 htdocs 的 react 文件夹中创建一个 .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'>

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

create-react-app build deploy on LAMP/XAMPP/WAMP

apache

reactjs

react-router

create-react-app

yarnpkg