Question

我已经使用create-react-app并使用nginx将React应用反向代理到域/路径形式的URL，从而创建了一个React SPA。我的目的是从单个域中挂起多个React组件。

例如

mysite.com/app1 mysite.com/app2 等等

我已经在env中设置了PUBLIC_URL，希望访问mysite.com/app1可以路由到我的React应用程序。目前不适用于仅具有以下mod的全新create-react-app。

.env文件

PORT=3123
PUBLIC_URL='/app1/'

nginx.conf

    location ^~ /app1/sockjs-node {
        proxy_pass http://0.0.0.0:3123/sockjs-node;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location ^~ /app1/ {
        proxy_pass http://0.0.0.0:3123/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

浏览器输出是白色屏幕，并显示以下错误：

bundle.js:1 Uncaught SyntaxError: Unexpected token '<'
0.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
main.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

也许我过于简单或乐观，但我希望设置.env PUBLIC_URL会将路径/ app1 /附加到所有URL，但无法正常工作。

任何帮助，见解或建议都值得赞赏。

谢谢

Answer 1

在nginx.conf中修复了此问题。所有资产和套接字都有正确的路径。

location ^~ /app1/sockjs-node {
    proxy_pass http://0.0.0.0:3123/app1/sockjs-node;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}
location ^~ /app1/ {
    proxy_pass http://0.0.0.0:3123/app1/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

开发模式下的create-react-app：设置PUBLIC_URL环境变量会导致错误

1 个答案: