javascript - 将 React 应用程序作为 nginx 中的子路径提供服务

Question

有一个 React 应用程序在本地的 0.0.0.0:5000 上提供服务。我还有一个域名example.com。

我想要做的是将 example.com/app 目录代理到 0.0.0.0:5000。

我尝试了以下方法。

location /app  {
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $host;
    proxy_redirect     off;
    proxy_set_header   Host $host;
    rewrite /app/(.*) /$1 break;
    proxy_pass http://0.0.0.0:5000/app;

}

但是在控制台中错误显示如下

Loading failed for the <script> with source “http://localhost/static/js/bundle.js”. app:45:1
Loading failed for the <script> with source “http://localhost/static/js/0.chunk.js”. app:45:1
Loading failed for the <script> with source “http://localhost/static/js/main.chunk.js”.

我还尝试将 homepage: './app 添加到 package.json

如何修复它？

Answer 1

nginx 配置对我来说看起来没问题，但您需要更新 webpack 配置以及 React 应用程序中的路由器配置，以便在特定路径上为应用程序提供服务。

我不能相信以下要点，但它涵盖了您应该需要的所有情况:

https://gist.github.com/codepunkt/ae82a0f3b9deb93908dc1f3d5bbc8da2

(请注意，您的基本路径应以“/”开头，例如“/app”)