使用 nginx、socket.io 和 nodejs 在 raspberry pi 上托管 Angular 应用程序

Question

我找不到使这项工作起作用的配置。我想通过 nginx（也已经尝试过 apache）在 raspberry pi 上托管一个 angular 应用程序（棋盘游戏）和一个 nodejs 服务器（与棋盘游戏通信）。我开始觉得这不是 nginx 配置的问题，而是我缺少一些基本的东西。

工作：

运行 Angular 应用程序（通过 ng serve）和 nodejs 服务器（通过 ts-node ./src/app.ts) 本地
运行 Angular 应用程序（通过 ng serve）本地和树莓派上的 nodejs 服务器

不工作

通过 nginx 托管 angular 应用程序（将 dist 文件夹的内容（由 ng build --prod 生成）放入 var/www/html）和运行树莓派上的 nodejs 服务器 -->导致 Error during WebSocket handshake: Unexpected response code: 400

代码

节点服务器

const Express = require('express')();
const Http = require('http').Server(Express);
const Socketio = require('socket.io')(Http);

Http.listen(3333, () => {
  console.log('Listening at :3333...');
});

Angular 应用客户端

import { SocketIoConfig, SocketIoModule } from 'ngx-socket-io';

const config: SocketIoConfig = { url: 'http://192.xxx.xxx.xx:3333', options: { transports: ['websocket'] } };

@NgModule({
  imports: [CommonModule, SocketIoModule.forRoot(config)],
  exports: [SocketIoModule]
})
export class DataAccessModule {}

nginx 配置

    server {
        location ~* \.io {
            proxy_pass http://localhost:3333;
            proxy_redirect off;

            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            add_header X-location contains-io always;
        }
    }

编辑：如果我删除我添加的 nginx 配置，我会得到相同的结果。有没有办法测试配置是否被使用？

我发现的其他一些奇怪的事情是，当通过 ng serve 在覆盆子然后去 localhost:4200

Answer 1

您最好使用 ng build 而不是 ng serve，并将您的 Nginx 指向您的 dest 文件夹，如下所示：

    location / {
            root   /var/www/angular-deploy; // move your dest into here
            index  index.html index.htm;
        }

您可以read this了解更多详情，希望对您有所帮助

Answer 2

原来我唯一需要的是动态域名，而不是本地主机或静态 ip。

因此客户端代码如下所示：

  private socketUrl = 'http://example.ddns.net';
 // also switched to the plain socket.io-client package instead of ngx-socket-io, but I don't think this is necessary
  socket: SocketIOClient.Socket = io(this.socketUrl);

和 nginx 配置：

    server {
        listen 80;
        server_name example.ddns.net;
        root /var/www/app;

        location ^~ /socket.io/ {           
            proxy_pass http://127.0.0.1:3333;
            proxy_redirect off;

            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

        location / {
            try_files $uri $uri/ /index.html;
            proxy_set_header   X-Forwarded-For $remote_addr;
            proxy_set_header   Host $http_host;
            index  index.html index.htm;
        }
    }

使用 nginx、socket.io 和 nodejs 在 raspberry pi 上托管 Angular 应用程序

Host Angular application on raspberry pi using nginx, socket.io and nodejs

nginx

node.js

socket.io

raspberry-pi3

angular

工作：

不工作

代码