使用Nginx，Socket.io和Node.js在树莓派上托管Angular应用程序

debugcn 发表于 Dev

图肯

我找不到使此工作可用的配置。我想通过nginx（也已经尝试过Apache）在树莓派上托管一个角度应用程序（一个棋盘游戏）和一个nodejs服务器（与棋盘游戏进行通信）。我开始感觉到nginx配置不是问题，而是我缺少的一些基本知识。

加工：

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

无法运作

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

码

Nodejs服务器

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 App客户端

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在树莓派上运行有角度的应用程序并转到以下位置时，我只看到一个空白页面，而不看到一个console.log。localhost:4200

图肯

原来我唯一需要的是dyndns，而不是localhost或静态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 conf：

    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;
        }
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。