如何通过nginx和pm2正确代理带有React Router的服务器渲染应用程序

qpgpyjmq  于 2022-12-29  发布在  Nginx
关注(0)|答案(1)|浏览(211)

大家好,我正尝试使用带有React Router的服务器渲染在AWS EC2示例上部署一个测试应用程序,根据this tutorial,服务器渲染组件使用nginx代理到localhost:PORT,如下所示
nginx配置:

server{ listen 80 ; listen [::]:80;

server_name myservername.com;

location / { proxy_pass http://localhost:PORT$request_uri;
            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; }

}

PM2:
简单跑步

pm2 start /location --name AppName

我可以响应我的应用程序,但只能响应后端部分,如果我尝试访问前端,所有路径似乎都被重定向到React Router的404处理程序,但如果我使用命令启动应用程序

node server.js

这一切工作正常,但当然不是这样做的,因为一旦命令行被杀死,那么进程也被杀死。webpack构建生产代码后,它会在公共文件夹中创建一个build.js,并创建一个server.js,据我所知,server.js处理相应的显示或响应内容。我通过控制台记录路径,认为代理之后的路径可能不同,但它没有返回我请求的路径,还发现pm2可能使用

pm2 serve /path/bundle.js port

所以我用了和后端相同的端口,我知道这不起作用,但是我想试一下。API路径,但由于其服务器呈现不起作用,加上当使用pm2但使用相同的nginx配置文件但从命令行运行服务器时,前端和所有css或html调用返回404的事实工程告诉我,nginx配置文件是好的,但也许pm2是可能的罪魁祸首,如果有人能帮我找出我错过了什么,我会很感激。

f87krz0w

f87krz0w1#

大家好,我终于弄明白了,所以pm2无法命中一些路由,因为捆绑包前端位于不同的文件夹中,它也是静态的,所以修复是调整您的nginx配置如下所示

server{ listen 80 ; listen [::]:80;

server_name myservername.com;

location / { proxy_pass http://localhost:PORT$request_uri;
            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 /bundle.js{
root /path/;
index bundle.js;
}

它现在服务于“无法访问”的文件

相关问题