如何在 Apache 服务器上部署和托管 React 应用程序

Question

我通过使用“React js”作为前端和“Node js”作为后端创建了一个仪表板。 现在项目已经完成，我需要在Apache服务器上部署和托管这个项目。 我尝试通过运行“npm run build”然后将构建文件夹的所有文件复制到服务器，但仍然没有运行。

Error: The requested URL /Dashboard was not found on this server

那么有人可以帮我解决这个问题吗？ 因为我对这些整个 Web 开发的东西都不熟悉。 如果有人告诉我实现这一点所需的配置是什么，这将很有帮助。

包.json

{
  "name": "eclaims",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "alert-node": "^1.2.4",
    "await": "^0.2.6",
    "axios": "^0.18.0",
    "browser-history": "^1.0.1",
    "canvasjs": "^1.8.1",
    "chart.js": "^2.8.0",
    "cors": "^2.8.5",
    "express-redirect": "^1.2.2",
    "history": "^4.9.0",
    "http-serve": "^1.0.1",
    "mdbreact": "^4.14.0",
    "oracledb": "^3.1.2",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "react": "^16.8.6",
    "react-background-image-loader": "0.0.5",
    "react-bootstrap": "^0.32.4",
    "react-canvas-js": "^1.0.1",
    "react-chartjs-2": "^2.7.6",
    "react-dom": "^16.8.6",
    "react-dropdown": "^1.6.4",
    "react-dropdown-button": "^1.0.11",
    "react-native": "^0.59.8",
    "react-router": "^5.0.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^4.3.1",
    "react-router-redirect": "^1.0.1",
    "react-scripts": "2.1.8",
    "react-select": "^2.4.3",
    "reactstrap": "^8.0.0",
    "redirect": "^0.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

我还尝试通过创建“.htaccess”文件：

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

但仍然没有运气。

Answer 1

我遵循了 Reddit这篇文章中的某些步骤，我可以证明这可以使 SPA 在具有正确路由的 Apache Web 服务器中运行。

报价：

1）在位于etc/apache2/的apache2.conf中，我将AllowOverride为All 。 我还在文件中添加了 Servername localhost。 （不知何故我跳过了最后一句话，但最后还是很好用）

 <Directory /var/www/> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory>

2) 在/etc/cloud/templates的hosts.debian.tmpl文件中，我将127.0.0.1 <yourdomain.com>添加到其他 ips 所在的文件中。

 127.0.0.1 yourdomain.com

3）我运行sudo a2enmod rewrite 。 然后我通过service apache2 restart重新启动了 apache 服务器。 这将打开 mod_rewrite。

最后在我的项目文件夹/var/www/html ，在我的index.html文件旁边，我创建了一个.htaccess文件并添加了以下内容：

 RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule ^.*$ / [L,QSA]

假设您已经运行npm run build然后将build文件夹中的所有内容复制到您的公共目录，这应该可以工作。

当我第一次开始 Web 开发时，我并不确定我是否正确地设置了 VirtualHost，所以我通常首先做一个虚拟的 index.html，比如，Hello World 示例。 当我确认我可以在浏览器中看到 Hello World 时（这意味着我正确设置了 VirtualHost 配置），我将build文件夹的内容转储到虚拟 index.html 所在的位置。

Answer 2

我的解决方案：

阿帕奇：

我正在运行一个带有多个 React-Apps 的 Apache 服务器，可以通过别名访问，例如/abc/app/或xyz/app/ 。 对于这些路径，我调整了虚拟主机配置中的<Directory>...</Directory>区域：

<VirtualHost *:443>
RewriteEngine On

    Alias /abc/app "/var/www/abc"
    Alias /xyz/app "/var/www/xyz"

    <Directory "/var/www/abc">
      Options Indexes FollowSymLinks
      AllowOverride All
      Require all granted
     </Directory>


    <Directory "/var/www/xyz">
      Options Indexes FollowSymLinks
      AllowOverride All
      Require all granted
     </Directory>

    [...]

</VirtualHost *:443>

此外，我根据React Docs将以下内容添加到/var/www/abc/.htaccess ：

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

反应路由器> 4：

但最重要的是我调整了我的package.json和.env文件。 如果您使用环境文件，您可以将以下几行（根据您的路径调整）添加到您的生产或发布环境文件中：

PUBLIC_URL=https://link.to.your.page/abc/app/
REACT_APP_ROOT_PATH=/abc/app

不要重命名 PUBLIC_URL。 你可以在 REACT_APP_ 之后改变一切

从 package.json 中删除homepage行

或者，如果您不使用.env文件，您可以像这样调整 package.json 中的homepage行：

 "homepage":"link.to.your.page/abc/app/"

在你的index.js ，或者你使用 BrowserRouter 或 Router 的任何地方，你可以像这样修改你的代码：

 let PATH = process.env.REACT_APP_ROOT_PATH // Or, if you prefer it hard coded "/abc/app"
 <BrowserRouter basename={PATH} > <App/> </BrowserRouter>

Answer 3

React 适用于前端。 我猜你想说，apache 和 nodeJs