使用 nginx、socket.io 和 nodejs 在树莓派上托管 Angular 应用程序

Question

我找不到使这项工作有效的配置。我想通过 nginx（也已经尝试过 apache）在树莓派上托管一个 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）并在 raspberry 上运行 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 应用客户端

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 时，我只看到一个空白页而不是一个 console.log

Answer 1

原来我唯一需要的是一个 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 配置文件：

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

Answer 2

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

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

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