node.js - 使用 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

代码

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运行 Angular 应用程序时，我只看到一个空白页面，而不是一个console.log。在覆盆子上并转到 localhost:4200

Answer 1

你最好使用 ng build 而不是 ngserve，并将你的 Nginx 定向到你的 dest 文件夹，如下所示:

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

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