如何在一个服务器上部署带有PHP后端的React应用

91次阅读
没有评论

问题描述

在将React应用与PHP集成时遇到了困难。他有一个可用的React应用,但不知道如何与PHP一起部署。通常情况下(如果应用只是前端),他会将构建文件夹上传到服务器上,但现在他有PHP文件,不知道应该把它们放在哪里。
他希望PHP文件也能放在构建目录中,这样他就可以将它们与js文件一起放在服务器上。问题是他不知道如何实现这一点。他尝试将php文件夹放在/src目录下,但编译器(使用create-react-app)忽略了它。将其放在/public目录下可以工作,但他不确定是否是正确的位置。
大多数教程建议为客户端和服务器创建单独的文件夹。这在本地工作得很好,但他不知道如何部署。他认为如果将服务器和客户端文件夹都放在Apache托管的服务器上,会导致一些不必要的问题。首先,他正在推送未编译的源代码,这是非常不必要的,因为他只会使用构建后的代码。其次,要访问主页,他必须转到something.com/client/build/index.html。第二个问题可以通过htaccess文件解决,但这似乎很混乱,他更希望将所有内容放在构建目录中(特别是因为后端并不复杂)。
您对此有何看法?您认为将php文件放在哪里并如何部署它们最好?您是否了解任何可以更好地解释这个主题的资源?因为我在互联网上找不到任何好的指南。提前感谢您,并对问题的长度表示抱歉,我只是试图尽量解释清楚。

解决方案

请注意以下操作注意版本差异及修改前做好备份。

解决方案1

在将React应用与PHP后端部署到同一服务器上时,可以将PHP文件放在React应用的构建目录中。这样可以将所有文件放在同一个位置,方便部署和维护。
以下是一种可能的解决方案:
1. 在React应用的根目录下创建一个名为php的文件夹。
2. 将所有PHP文件放入php文件夹中。
3. 在React应用的构建脚本中添加一个步骤,将php文件夹复制到构建目录中。
– 如果您使用的是create-react-app,可以在package.json文件中的scripts部分找到构建脚本。在构建脚本中添加以下命令:
json
"build": "react-scripts build && cp -R php build/"

这将在构建React应用之后,将php文件夹复制到构建目录中。
4. 运行构建脚本以生成构建文件。
– 在终端中运行以下命令:
bash
npm run build

5. 构建完成后,将构建文件夹中的所有文件上传到服务器上。
– 您可以使用FTP工具或其他文件传输工具将构建文件夹中的所有文件上传到服务器上。
6. 在服务器上配置Apache或其他Web服务器以将请求路由到React应用的入口文件。
– 您可以使用.htaccess文件或服务器配置文件来配置路由规则。以下是一个.htaccess文件的示例:
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

这将确保所有请求都被重定向到React应用的入口文件。
7. 配置服务器以解析PHP文件。
– 您需要确保服务器已配置为解析PHP文件。具体的配置方法取决于您使用的服务器软件和操作系统。

解决方案2

如果您担心将未编译的源代码上传到服务器上,您可以在部署之前先编译React应用,并将构建文件夹上传到服务器上。这样可以避免将源代码上传到服务器上,并且只需上传构建后的代码。
以下是一种可能的解决方案:
1. 在React应用的根目录下运行以下命令,以生成构建文件夹:
bash
npm run build

这将使用create-react-app的构建脚本生成构建文件夹。
2. 构建完成后,将构建文件夹中的所有文件上传到服务器上。
– 您可以使用FTP工具或其他文件传输工具将构建文件夹中的所有文件上传到服务器上。
3. 在服务器上配置Apache或其他Web服务器以将请求路由到React应用的入口文件。
– 您可以使用.htaccess文件或服务器配置文件来配置路由规则。请参考解决方案1中的步骤6和步骤7。
4. 在服务器上配置PHP解析器以解析PHP文件。
– 您需要确保服务器已配置为解析PHP文件。具体的配置方法取决于您使用的服务器软件和操作系统。

解决方案3

如果您希望将客户端和服务器分开部署,可以将React应用和PHP后端部署到不同的服务器上。这样可以更好地隔离前端和后端,并提供更好的可扩展性和维护性。
以下是一种可能的解决方案:
1. 将React应用部署到一个服务器上,将PHP后端部署到另一个服务器上。
– 您可以使用不同的域名或子域名来区分两个服务器。例如,将React应用部署到app.example.com,将PHP后端部署到api.example.com
2. 在React应用中使用API来与PHP后端进行通信。
– 您可以使用Axios或其他HTTP客户端库来发送请求和接收响应。在React应用中,您可以使用相对URL来发送请求,例如/api/users,这将自动路由到PHP后端。
3. 在PHP后端服务器上配置Apache或其他Web服务器以解析PHP文件。
– 您需要确保服务器已配置为解析PHP文件。具体的配置方法取决于您使用的服务器软件和操作系统。
4. 在React应用中配置API URL以与PHP后端进行通信。
– 您可以在React应用的配置文件中设置API URL,或者使用环境变量来动态设置API URL。

以上是几种可能的解决方案,您可以根据您的需求和偏好选择其中之一。希望这些解决方案能帮助您成功部署带有PHP后端的React应用。如果您需要更多关于此主题的资源,您可以参考以下链接:
create-react-app官方文档
React官方文档
PHP官方文档
Apache官方文档
Stack Overflow上的相关问题和答案

希望这些资源能为您提供更多关于如何部署带有PHP后端的React应用的指导。祝您成功!

正文完