從 Apache 反向代理到 Nginx docker running ReactJS with Router

Question

目前，我有一台運行 Apache 的服務器，它也被配置為充當反向代理。 在同一台服務器上，我有一個 Nginx docker 運行一個帶有路由器的 ReactJS 應用程序的 ReactJS 網站。 目標是建立一個從 apache 服務器到 nginx docker 的反向代理，以便人們訪問在所述 Nginx docker 容器上運行的 React 應用程序。

這是我的 apache2 配置：

<VirtualHost *:80>
        ServerName example.com
        ServerAlias www.example.com

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        ProxyPreserveHost On

        ProxyPass /foo http://localhost:10080
        ProxyPassReverse /foo http://localhost:10080
</VirtualHost>

這是用於啟動 Nginx Docker 的 docker-compose.yml

version: "3"
services:
  www:
    image: nginx
    container_name: react-www
    volumes:
      - ./react-app/build:/usr/share/nginx/html
    ports:
      - 10080:80
      - 10443:443
    networks:
      - www

networks:
  www:
    driver: bridge

最后，這是 Nginx default.conf 文件

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

通過http://example.com:10080直接訪問 React 應用程序工作正常，但如果有人要訪問http://example.com/foo ，它將被代理到http://localhost :10080/foo並導致返回空白頁，因為不存在/foo路由。

到目前為止我嘗試過的導致 404 或空白頁的事情：

• 通過刪除 Apache 中的/foo部分重寫了 URI。
• 在 /usr/share/nginx/html 中添加了一個 foo 目錄。
• 通過刪除 Nginx 中的/foo重寫 URI，然后代理給自己。
• 將 React 路由器的基本名稱設置為/foo 。

在這一點上，我意識到我對 URI 如何交互的理解是有限的，所以如果有人能夠指出我正確的方向，我將不勝感激。 盡管我使用 Apache 作為反向代理這一事實是我無法控制的，但如果有人認為我在做一些非常愚蠢或低效的事情，我願意接受替代方案的建議。

感謝所有花時間閱讀本文的人。 如果有人能幫助我，我將不勝感激！

Answer 1

您應該考慮使用 Apache 為您的 React 應用程序提供服務，這樣您就不需要同時運行 2 個 Web 服務器。

Apache mod_rewrite 可用於為 React Router 重寫 URL。

這是一個很棒的教程，介紹如何配置 Apache 以使用 JavaScript 路由。 https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-configure-apache-for-reactjs-and-angularjs/

這是關於 mod_rewrite 的 Apache 文檔。 https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html

當然，您也可以使用 Nginx 來提供 React，並讓 Nginx 進行代理。