如何在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。(不知何故，我跳过了这最后一句话，但它最终还是工作得很好)

<目录/var/www/>选项索引FollowSymLinks AllowOverride All需要全部授予

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 dev的时候，我并不确定我的VirtualHost配置是否正确，所以我通常首先做的是创建一个虚拟的index.html，比如Hello World example。当我确认能够在浏览器中看到Hello World时(这意味着我得到了正确的VirtualHost配置)，我将build文件夹的内容转储到虚拟index.html所在的位置。

Answer 2

我的解决方案是：

Apache:

我正在运行一个带有多个React-Apps的Apache Server，这些React-Apps可以通过别名访问，例如/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]

React路由器> 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或路由器的任何地方，您可以这样修改您的代码：

 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