Question

我通过使用“ React js”（前端）和“ Node js”（后端）来创建仪表板。现在项目已完成，我需要在Apache服务器上部署并托管该项目。我尝试过运行“ npm run build”，然后将build文件夹的所有文件复制到服务器，但仍未运行。

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

那么有人可以帮我这个忙吗？因为我是这些网站开发新手。如果有人告诉我实现此目标所需的配置，将会很有帮助。

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）在apache2.conf中的etc/apache2/中，我将AllowOverride变成了All。我还在文件中添加了服务器名localhost。（我不知何故跳过了最后一句话，但最后还是很好用）

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

2）在hosts.debian.tmpl中找到的/etc/cloud/templates文件中，我在文件中添加了127.0.0.1 <yourdomain.com>相似之处。

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所在的位置。 / p>

希望现在对您的帮助与对我一样多！

Answer 2

我的解决方案：

Apache：

我正在运行一个带有多个React-App的Apache服务器，可以通过Aliases进行访问，例如/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

如何在Apache服务器上部署和托管React App

3 个答案: