如何集成一个反应前端和一个单独的 php REST API 后端

Question

我已经建立了一个网站。前端和后端完全分开。前端都是 REACT.JS，后端是一个用 slim 3 编写的 php REST API 服务。前端和后端之间的整个通信是通过 JSON 与 react 消费 API 路由进行的，并且这些路由受 JWT 保护。

当我将应用程序部署到生产环境时，我不知道如何从运行 slim 3 REST 后端的服务器为我的 REACT 前端提供入口点。我知道如果是典型的 MVC，我可以通过 Twig 等模板引擎渲染视图。

在构建我的 REACT 前端之后，整个组件列表被编译为一个 JavaScript 资源，该资源基本上充当前端的入口点。

1. 有没有一种方法可以让我获取这个最终编译的 JS 资源并通过 API 路由（例如：'/'）将其呈现给浏览器，以便可以向我的应用前端提供一个条目？
2. 如果不是，那我该如何处理这个编译好的 JS 资源呢？

Answer 1

如果你想要一个完全分离的架构，根端点应该指向你的 HTML（如果需要，服务器重写），然后它将从“/build/app.min.js”加载 ReactJS 聚合文件。然后你的 API 应该暴露给“/api”端点。

这是我推荐的服务器架构

/www
    /public (server should point "^\/(?!api\/)" (anything that does not start by "/api/") requests here, index as index.html)
        /index.html
        /build
            /app.js
            /app.min.js
        /assets
    /api (server should point "^\/api/" (anything that begins by "/api/") requests here, rewriting to point to the index.php file)
        /index.php
        /vendor
            /slim

Answer 2

我的很多应用都是 reactjs 前端和 php 后端。我通过 fetch 或 axios 调用服务

我有一个 API url 常量配置文件。

例如：api-paths.js

export const GET_USERS = "http://somesite.com/api/get-users/"

在反应组件中，我这样做。

import { GET_USERS } from './api-paths.js';

在

ComponentDidMount() {
   fetch(GET_USERS, ....... );
}

关于您的问题，请进行生产构建（npm run build，如果使用 create-react-app）并部署所有前端文件以及 php 文件，并且所有对服务器的调用都应该可以正常工作，