Приложение Host Angular на Raspberry Pi с использованием nginx, socket.io и nodejs

Question

Я не могу найти конфигурацию для этой работы. Я хочу разместить приложение angular (настольная игра) и сервер nodejs (который связывается с настольной игрой) на Raspberry Pi через nginx (также уже пробовал apache). Я начинаю чувствовать, что проблема не в конфигурации nginx, а в чем-то фундаментальном, чего мне не хватает.

Работа:

• Запуск приложения Angular (через ng serve) и сервер nodejs (через ts-node ./src/app.ts) локально
• Запуск приложения Angular (через ng serve) локально и сервера nodejs на малине

Не работает

• хостинг angular приложения через nginx (помещение содержимого папки dist (сгенерированной ng build --prod) в var/www/html) и запуск сервера nodejs на raspberry -> в результате 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 config

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

EDIT: Если я удаляю свои дополнения nginx config, я получаю те же результаты. Есть ли способ проверить, используется ли конфигурация?

Еще одна странная вещь, которую я обнаружил, заключается в том, что я вижу только пустую страницу, а не единственный console.log при запуске приложения angular через ng serve на малину и go до localhost:4200

Answer 1

Оказывается, единственное, что мне было нужно, это dyndns вместо localhost или stati c 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;
        }
    }

Answer 2

Лучше использовать ng build вместо ng serve и направить Nginx в папку dest, например так:

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

Вы можете прочитать это для получения более подробной информации, надеюсь, это поможет