如何在Apache服务器上部署和托管React App [英] How to deploy and host react app on Apache server

问题描述

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

I have created a dashboard by using "React js" for Frontend and "Node js" for Backend. Now the project is completed, I need to deploy and host this project on Apache server. I have tried by running the "npm run build" then copying all the files of build folder to the server but still its not running.

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

那么有人可以帮我这个忙吗?因为我是这些网站开发新手.如果有人告诉我实现此目的需要什么配置，这将大有帮助.

So can anyone help me out with this ? Because I am new to these whole web development stuff. If anyone tell me what are the configurations needed to make this happen, it will be helpful a lot.

package.json

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"文件:

I also tried by creating the ".htaccess" file:

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

但仍然没有运气.

推荐答案

我已经按照此来自Reddit的帖子，我可以证明此方法可以使SPA通过正确的路由在Apache Web服务器中运行.

I've followed certain steps from this post from Reddit and I can attest this works for making SPAs run in Apache web server with proper routing.

引用:

1)在 etc/apache2/中的 apache2.conf 中，我将 AllowOverride 更改为 All .我还在文件中添加了服务器名localhost.(我不知何故跳过了最后一句话，但最后还是很好用)

1) In the apache2.conf located in etc/apache2/ I turned AllowOverride to All. I also added Servername localhost in the file. (I somehow skipped this last sentence, but still it worked fine in the end)

<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所在的文件.

2) In the hosts.debian.tmpl file found in /etc/cloud/templates I added 127.0.0.1 <yourdomain.com> to the file where the other ips of the similiarity are.

127.0.0.1 yourdomain.com

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

3) I ran sudo a2enmod rewrite. Then I restarted the apache server via service apache2 restart. This turns on mod_rewrite.

几乎在我的项目文件夹/var/www/html 中，连同我的 index.html 文件一起，我创建了一个 .htaccess 文件并添加以下内容:

Lastly inside of my project folder /var/www/html , along side my index.html file I created a .htaccess file and added in the following:

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

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

Assuming you've run npm run build and then copied all the contents inside the build folder to your public directory, this should work.

当我第一次开始Web开发时，我真的不确定我是否正确配置了VirtualHost，因此通常要做的是首先创建一个虚拟的index.html，例如Hello World示例.当我确认可以在浏览器中看到Hello World时(这意味着我正确配置了VirtualHost)，我将 build 文件夹的内容转储到虚拟index.html的位置.是.

When I first started web dev, I wasn't really sure I made the VirtualHost config right, so what I usually did was first to make a dummy index.html with, say, Hello World example. When I've confirmed that I'm able to see Hello World in the browser (which means I got the VirtualHost config right), I dump the contents of the build folder to where the dummy index.html was.

这篇关于如何在Apache服务器上部署和托管React App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！