Приложение Create-React + Laravel на одном сервере

Если вы используете Apache HTTPd, у вас есть два варианта.

Допустим, вы скопировали внешние и внутренние каталоги следующим образом:

Серверная часть (предположительно Laravel 5.x) под /var/www/yourappname/api/

Интерфейс под /var/www/yourappname/frontend/

Вы можете получить доступ к своему приложению, используя app.yourdomain.com. (Обычно я предпочитаю, чтобы www.yourdomain.com был отдельным сервером/экземпляром Apache из соображений безопасности и производительности).

<сильный>1. Два поддомена

Имейте два поддомена, указывающих на один и тот же IP-адрес, скажем, app.yourdomain.com для внешнего интерфейса и api.yourdomain.com для внутреннего интерфейса Laravel. Создайте два виртуальных хоста в конфигурации Apache и задокументируйте корень следующим образом.

Для api.yourdomain.com

/var/www/yourappname/api/public

Для app.yourdomain.com

/var/www/yourappname/frontend/

Ваш базовый URL-адрес серверной части, который будет включен во внешнее приложение, будет api.yourdomain.com/.

Преимущество: если вы хотите в будущем разделить внешний и внутренний интерфейсы на два разных экземпляра Apache или отдельные серверы, вы можете легко это сделать. Кроме того, внешний интерфейс представляет собой статический контент и, следовательно, может обслуживаться с использованием других недорогих вариантов, таких как сайты на основе S3.

Предупреждение: вам придется позаботиться о CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). Кроме того, вам потребуются два SSL-сертификата, мультидоменный сертификат или SSL-сертификат с подстановочным знаком.

Я предпочитаю этот вариант, и я использовал его в одной из своих установок с учетом будущей нагрузки.

<сильный>2. Один домен и псевдоним

Установить корень документа как

/var/www/yourappname/frontend

Добавьте псевдоним следующим образом (http://httpd.apache.org/docs/2.4/mod/mod_alias.html#alias)

Alias "/api/" "/var/www/yourappname/api/public/

Ваш внутренний базовый URL-адрес, который будет включен во внешнее приложение, будет app.yourdomain.com/api/.

(Я еще не проверил это на своей установке)

Преимущество: у вас есть один домен и вам нужен один SSL-сертификат.

Предостережение: все обращения будут относиться к одному и тому же сервису Apache, и, следовательно, сложно разделить нагрузку на запросы API с интенсивными вычислениями и статический контент.

Примечание. В любом случае я указывал на «общедоступный» каталог фреймворка Laravel, чтобы избежать раскрытия конфигурации и других каталогов Laravel внешнему миру.

Мне пришлось потратить немало времени на исправление проблем, с которыми я столкнулся при развертывании моего проекта с интерфейсом React и Laravel в качестве API. Надеюсь, это поможет кому-то, кто пытается развернуть аналогичный стек в рабочей среде.

Подводя итог, у меня были отдельные конфигурации для проектов react и laravel, каждый с разными портами прослушивания и разными location.

Поскольку я использовал Laravel в качестве своего API, я использовал /api в качестве конфигурации местоположения для laravel и / в качестве конфигурации местоположения для реакции.

Пожалуйста, найдите конфигурации nginx, которые я использовал для справки.

Реагировать:

server {
    listen     80;
    server_name <server_ip or hostname>;
    charset utf-8;
    root /var/www/html/react;
    index index.html index.htm;
    # Always serve index.html for any request
    location / {
        root /var/www/html/react;
        try_files $uri /index.html;
    }
    error_log /var/log/nginx/react-app-error.log;
    access_log /var/log/nginx/react-app-access.log;

}

Ларавель:

server {
    listen     90;
    server_name <server ip or hostname>;
    charset utf-8;
    root /var/www/html/laravel/public;
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php index.html index.htm;
    # Always serve index.html for any request
    location /api {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }

    error_log /var/log/nginx/laravel-app-error.log;
    access_log /var/log/nginx/laravel-app-access.log;

}

Я знаю, что этот вопрос возник некоторое время назад, но на случай, если кто-то наткнется на него в поисках ответов, теперь можно использовать Create React App в Laravel (без извлечения): https://github.com/mjsarfatti/create-react-app-laravel/

create-react-app-laravel по сути является ответвлением приложения Create React, которое работает в вашем проекте Laravel.

Вы можете увидеть https://github.com/mjsarfatti/create-react-app-laravel/wiki/ для руководства по установке и https://dev.to/mjsarfatti/introduction-cral-create-react-app-laravel-4n90 для объявления.