Как интегрировать интерфейс с реагированием и отдельный бэкэнд API REST php

Question

Я создал сайт. Передняя и задняя часть полностью отделены друг от друга. Внешний интерфейс - это REACT.JS, а задний - сервис REST API, написанный на php с slim 3. Весь обмен данными между внешним интерфейсом и внутренним интерфейсом осуществляется через JSON с реагирующими потребляющими маршрутами API, а также маршруты защищены JWT.

Когда я развертываю приложение в рабочей среде, я не могу понять, как я могу обслуживать точку входа в мой интерфейс REACT с моего сервера, на котором работает тонкий сервер 3 REST. Я понимаю, что если бы это был типичный MVC, я мог бы отображать представления с помощью шаблонизатора, такого как Twig.

После создания моего интерфейса REACT весь список компонентов компилируется в один ресурс JavaScript, который, по сути, выступает в качестве точки входа в интерфейс.

1. Есть ли способ, которым я могу взять этот окончательно скомпилированный ресурс JS и представить его браузеру по маршруту API (например, '/'), чтобы можно было предоставить запись для внешнего интерфейса моего приложения?
2. Если нет, то что мне делать с этим скомпилированным ресурсом JS?

Answer 1

Множество моих приложений - это веб-интерфейс responsejs и бэкэнд php. Я звоню в сервис через fetch или axios

У меня есть файл конфигурации констант URL-адреса API.

Например: 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, и все вызовы на сервер должны работать нормально,

Answer 2

Если вы хотите иметь полностью разрозненную архитектуру, корневая конечная точка должна указывать на ваш HTML (переписать сервер при необходимости), который затем загрузит агрегированный файл ReactJS из "/build/app.min.js". Ваш 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