Apache 代理到 reactjs 页面

Question

我有 2 个网站 php 和 reactjs

1. php 站点运行在 http://localhost
2. 在 http://localhost:3000 上运行的反应站点

当用户访问 URL http://localhost/funds 时，我想访问 http://localhost:3000/funds 页面。 我尝试使用 apache 代理，但它显示空白反应站点作为图像，路径上缺少 css。 任何其他实现这一目标的建议，谢谢。

ProxyPass /funds http://localhost:3000/funds
ProxyPassReverse /funds http://localhost:3000/funds

Answer 1

Github上的码头化演示

解决方案

1. Apache服务器必须配置为加载ProxyPass模块。

从问题中不清楚是否相应地设置了LoadModule 。

# httpd.conf
# proxy_http_module should be loaded before use
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
# rewrite is necessary for an SPA web app. this will be explained below.
LoadModule rewrite_module modules/mod_rewrite.so

2. Apache 服务器必须配置为将每个请求重定向（重写）到 index.html

React 应用程序是一个 javascript 应用程序，它在单个页面（又名 SPA）上运行，通常在主机的/index.html上。 除了服务器端呈现的 React 应用程序之外，任何通过 React 路由器库（ig react-router-dom ）实现的 React 应用程序路径都只是虚拟的。 这些路径仅存在于 javascript 代码中，反向代理服务器无法理解。

要使 SPA 路径正常工作，每个请求都应使用子路径重定向到/index.html 。 这就是重写。 让我用一种更简单的方式来说明这一点。

✅ this request succeeds because it is redirected to index.html by default config
request to / -> /index.html
❌ automatically redirected to path/index.html and it fails because the file does not exist
request to /path -> /path/index.html

--- with rewrite setting ---

✅ this works
request to / -> /index.html
✅ this also works, because it reaches /index.html first
request to /path -> /index.html/#/path

# httpd.conf

# reverse proxying
# service name should be used for docker-compose, but it is not necessary to do the same.
# the host name can be ignored.
ProxyPass "/" "http://react-frontend:3000/"
ProxyPassReverse "/" "http://react-frontend:3000/"

# rewrite for SPA app
<IfModule mod_rewrite>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

我在 github 上的工作演示适用于http://localhost:8080/funds和http://localhost:8080 。 这里的 dockerized 解决方案是将端口 80 转发到 8080，但如果需要，可以将其设置为使用端口 80。

还是想不通是什么问题！

尝试检查Apache 日志文件。 如果反向代理 SPA 应用程序的基础知识很好理解，只需阅读日志就可以轻松解决大多数问题。

编辑：一起提供 React 应用程序和 PHP（或其他任何东西）。

不能在子路径中提供 React 应用程序。 React 的 javascript 代码基本上假定它来自根路径 ( / )。 如果它是从其他子路径（例如/funds ）提供的，它将无法到达其他必要的资源，例如.css, .js ...等。

失败过程：

1. 在/subpath/index.html反应引导索引页
2. 在不修改设置的情况下，它会尝试从/ /favicon.ico所有资源/styles.css /bundle.js
3. 请求失败，因为它们存在于/subpath/bundle.js ， subpath/styles.css等等...

除非使用特定于环境的设置，否则这不容易解决。 本地环境和生产环境之间的差异会使以后的事情变得更加复杂。

解决方案 2：使用子域

在这种情况下最好的解决方案是使用子域。 应用程序根本不需要更改，因为它们都是从根路径提供的。 但是，它需要修改主机文件才能从本地计算机运行。

假设我想使用sample.test作为域。

• php 将在sample.test中提供
• React 应用程序将在react.sample.test中提供服务

# hosts file
127.0.0.1   sample.test
127.0.0.1   react.sample.test

# httpd.conf

# Custom Reverse Proxy /w subdomains

# this setting is no more needed.
# ProxyPass "/react" "http://react-frontend:3000/"
# ProxyPassReverse "/react" "http://react-frontend:3000/"
# ProxyPass "/" "http://php-frontend:80/"
# ProxyPassReverse "/" "http://php-frontend:80/"

# resolve to different service by subdomain.
<VirtualHost *:80>
ServerName react.sample.test
RewriteEngine On
ProxyPass "/" "http://react-frontend:3000/"
ProxyPassReverse "/" "http://react-frontend:3000/"
<Directory "/">
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . /index.html [L]
</Directory>
</VirtualHost>

<VirtualHost *:80>
ServerName sample.test
ProxyPass "/" "http://php-frontend:80/"
ProxyPassReverse "/" "http://php-frontend:80/"
</VirtualHost>

我已经更新了 Github 来源。 尝试运行 dockerized 演示。