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

Question

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

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

那么任何人都可以帮我解决这个问题吗？因为我对这些整个 Web 开发的东西都是新手。 如果有人告诉我实现这一点需要哪些配置，那将会很有帮助。

package.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

我已按照post from 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> 添加到其他相似ip 所在的文件中。

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 配置是否正确，所以我通常会先用 Hello World 示例制作一个虚拟的 index.html。当我确认可以在浏览器中看到 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 文件。如果您使用环境文件，您可以在生产或发布环境文件中添加以下行（obv 已根据您的路径调整）：

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