Question

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

我有一个使用create-react-app创建的应用，我在此应用中有两个页面

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

我执行了构建命令

npm run build

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

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

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

上工作正常

服务构建

请帮我解决此问题？

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

Answer 1

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

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

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

然后再次构建您的项目：

npm run build

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

您可能会在 How to deploy a React App on Apache web server

Answer 2

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

在package.json文件中添加“主页”：“ ./”（用于相对路径）或“主页”：“ 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'>

Answer 3

在上设置basename属性。

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

目录名称是xampp htdocs文件夹下的文件夹名称

Answer 4

您需要为构建配置主页。

在LAMP / XAMPP / WAMP上创建 - react-app构建部署

4 个答案: