使用 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並在樹莓上運行 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運行 angular 應用程序並轉到localhost:4200時，我只看到一個空白頁面而不是一個 console.log

Answer 1

您最好使用 ng build 而不是 ng serve，並將您的 Nginx 定向到您的 dest 文件夾，如下所示：

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

您可以閱讀本文以獲取更多詳細信息，希望它會有所幫助

Answer 2

結果我唯一需要的是一個 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;
        }
    }