create-react-app build 在 LAMP/XAMPP/WAMP 上部署

IT技术 apache reactjs react-router create-react-app yarnpkg
2021-04-09 02:06:22

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

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

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

我执行了构建命令

npm 运行构建

它正在生成文件夹中的所有staticindex.html文件build

我搬到这个build文件夹中的内容wwwwamp文件夹,并执行对URLhttp://localhost的只显示主页。下一页给出404 not found error

但是当我执行servenpm 命令module时,它运行良好http://localhost:5000

服务构建

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

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

4个回答

默认情况下,您的 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/

您可以在如何在 Apache Web 服务器上部署 React 应用程序中获得更多信息

也可以这样做“主页”:“your_web_application”
2021-06-01 02:06:22

在 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 后运行 build 命令

npm run build

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

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

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

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

示例 - 重命名 /react from

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

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

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

在 .

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

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