在同一台服務器上創建-react-app + Laravel

Question

• 我開發了一個Laravel支持的 RESTful API。
• 我想通過使用create-react-app UI 工具包創建的ReactJS應用程序來使用它。

前端和后端兩種不同的技術，到目前為止都很好。

問題（反過來，這是最常見的情況）是前端和后端都必須從同一個域（或服務器/文件結構）提供服務。

使兩個項目在同一服務器中共存的最佳方法是什么？

編輯：這里的主要問題是 Laravel Mix 和任何 Laravel 前端功能都不能使用，因為 create-react-app 堆棧。 它強加的規則使得在不首先彈出應用程序的情況下進行集成非常困難，從維護的角度來看這是不推薦的。

Answer 1

如果您使用的是 Apache HTTPd，您有兩個選擇。

假設您已按如下方式復制了前端和后端目錄：

/var/www/yourappname/api/下的后端（假設為 Laravel 5.x）

/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 框架的“public”目錄，以避免將 Laravel 的配置和其他目錄暴露給外界。

Answer 2

我不得不花費大量時間來解決在使用 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;

}

Answer 3

我知道這是前一段時間的問題，但如果有人在尋找答案時偶然發現了這個問題，現在可以在 Laravel 中使用 Create React App（無需彈出）： https : //github.com/mjsarfatti/create-反應-應用-laravel/

create-react-app-laravel本質上是在 Laravel 項目中運行的 Create React App 的一個分支。

您可以查看https://github.com/mjsarfatti/create-react-app-laravel/wiki/獲取安裝指南，以及https://dev.to/mjsarfatti/introducing-cral-create-react-app-laravel -4n90為公告。