简体   繁体   English

如何配置 --public-host 以在 nginx 反向代理后面运行 angular 通用应用程序?

[英]How to configure the --public-host to run angular universal app behind nginx reverse proxy?

I want to run a universal app with HMR and I am basing this question on the assumption its actually posssible.我想用 HMR 运行一个通用应用程序,我的这个问题是基于它实际上可能的假设。

I've set up and run a default "ng new" angular 8 application and works as expected.我已经设置并运行了一个默认的“ng new”angular 8 应用程序并按预期工作。 To run it behind a reverse proxy i am running with modified npm start要在反向代理后面运行它,我正在使用修改后的 npm start 运行

e.g. { "start": "ng serve --host 0.0.0.0 --port 3604 --disable-host-check --public-host //domain.com/spa/sockjs-node/" }

and I am using nginx to route domain.com/spa/sockjs-node/ to domain.com:3604/sockjs-node我正在使用 nginx 将 domain.com/spa/sockjs-node/ 路由到 domain.com:3604/sockjs-node

this works fine and I have HMR working behind the nginx reverse proxy.这工作正常,我让 HMR 在 nginx 反向代理后面工作。

I wish to run an angular universal app with HMR alongside but I cant figure how to set the --public-host //domain.com/universal/sockjs-node/ for the universal application as its obviously no longer using ng serve to run.我希望与 HMR 一起运行一个有角度的通用应用程序,但我无法弄清楚如何为通用应用程序设置 --public-host //domain.com/universal/sockjs-node/,因为它显然不再使用 ng serve 来运行. Without this set angular is not inserting the /universal/ section of path when searching for assets and sockets.如果没有此设置,则在搜索资产和套接字时不会插入路径的 /universal/ 部分。

So my question in this context is: How do i set the --public-host for an angular universal app?所以我在这种情况下的问题是:如何为有角度的通用应用程序设置 --public-host ?

thanks谢谢

works with following alterations to create-react-app default settings and nginx.对 create-react-app 默认设置和 nginx 进行以下更改。

index.html索引.html

add <base href="/ssr/"> in <head>

nginx.default.conf nginx.default.conf

server ...
{

    location ^~ /ssr/sockjs-node/ {
        proxy_pass http://0.0.0.0:3604/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 ^~ /ssr/ {
        proxy_pass http://0.0.0.0:3604/;
        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;
    }
}

server.ts服务器.ts

const PORT = process.env.PORT || 3604;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在Nginx代理后面配置weinre? - How to configure weinre behind Nginx proxy? 可在 nginx 反向代理后面的端口 3000 上访问 nodejs 应用程序 - nodejs app accessible on port 3000 behind nginx reverse proxy 配置 Nginx 为 Angular 的 Static 文件提供服务,并为 express 提供反向代理 - Configure Nginx to serve Static files of Angular and also reverse proxy for express 我应该如何配置nginx以在TCP服务器之前作为反向代理Websocket服务器运行? - How should I configure nginx to run as a reverse proxy websocket server in front of a tcp server? 如何跟踪 Nginx 反向代理后面的应用程序的上传进度? - How can I track upload progress from app behind Nginx reverse proxy? 如何将 Nginx 配置为反向代理来执行 this.network 模式? - How to configure Nginx as reverse proxy to do this network schema? nginx 反向代理 Angular Node app 混合内容 http 请求 - nginx reverse proxy Angular Node app mixed content http requests 无法将Nginx配置为WebSocket的反向代理 - Can't configure Nginx as Reverse Proxy for WebSocket 404 在 NGINX 反向代理后面的 Node.js 应用程序的 POST 和 GET 请求上 - 404 on POST and GET requests for Node.js app behind NGINX reverse proxy 如何将独立Jetty 9配置为节点应用程序的反向代理? - How to configure standalone Jetty 9 as a reverse proxy to a node app?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM