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

Posted 2023-02-16

【中文标题】create-react-app 构建部署在 LAMP/XAMPP/WAMP 上

【英文标题】：create-react-app build deploy on LAMP/XAMPP/WAMP

【发布时间】：2018-06-19 09:23:47

【问题描述】：

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

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

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

我执行了构建命令

npm 运行构建

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

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

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

服务构建

请帮我解决这个问题？

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

【参考方案1】：

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

或者，您可能想要使用 WAMP 根 子文件夹，例如'www/反应/'。 在这种情况下，将 homepage 键添加到您的 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

【讨论】：

也可以这样 "homepage": "your_web_application"

【参考方案2】：

在 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 后运行 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'>

【参考方案3】：

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

【参考方案4】：

在 .

上设置 basename 属性

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

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