Front-end can't connect to server in prod. react-scripts, nginx, strapi (nodejs) #4493

antokhio · 2022-10-11T13:34:32Z

antokhio
Oct 11, 2022

Hi, so a bit unobvious problem:
I developed my app, and everything worked in development environment.
After deploy:
Client reports that it's not connected.
There is no errors.
I can connect with postman and receive events in postman.
I can see client connection on server.

so on dev i have:

socket.ts:24 [io]: connecting http://localhost:1337
socket.ts:47 [io]: connect Jflrcgu0yg41y1jtAAAC

on prod:

[io]: connecting https://api.example.com

and that's about it....
so any tips or directions?
trying to make it work for two days, but without any progress at all...

thanks!

server log:

  socket.io:server initializing namespace / +0ms
  socket.io:server creating engine.io instance with opts {"cors":{"origin":"*","methods":["GET"]},"rejectUnauthorized":true,"path":"/socket.io"} +0ms
  socket.io:server attaching client serving req handler +2ms
  ...
  socket.io:server incoming connection with id hrcE7BXl2MDLQpx4AAAA +17s
[2022-10-11 11:31:44.746] http: GET /uploads/thumbnail_44832324_2302830953120776_6721811516900769792_n_f534feea2f.jpg (4 ms) 200
  socket.io-parser decoded 0{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjAsImlhdCI6MTY2NTM5Nzc3NiwiZXhwIjoxNjY3OTg5Nzc2fQ.9mFDLe77vNQCubop487O8dikSjQGXdKwBNnXhOSpZsE"} as {"type":0,"nsp":"/","data":{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjAsImlhdCI6MTY2NTM5Nzc3NiwiZXhwIjoxNjY3OTg5Nzc2fQ.9mFDLe77vNQCubop487O8dikSjQGXdKwBNnXhOSpZsE"}} +0ms
  socket.io:client connecting to namespace / +0ms
  socket.io:namespace adding socket to nsp / +0ms
  socket.io:socket join room Authenticated +0ms
  socket.io:socket socket connected - writing packet +1ms
  socket.io:socket join room QDC-HyubJ_vE1Yj2AAAB +0ms
  socket.io-parser encoding packet {"type":0,"data":{"sid":"QDC-HyubJ_vE1Yj2AAAB"},"nsp":"/"} +17ms
  socket.io-parser encoded {"type":0,"data":{"sid":"QDC-HyubJ_vE1Yj2AAAB"},"nsp":"/"} as 0{"sid":"QDC-HyubJ_vE1Yj2AAAB"} +0ms
[2022-10-11 11:31:44.805] info: [io] new connection with id QDC-HyubJ_vE1Yj2AAAB

client:

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Middleware } from 'redux';
import type { RootState } from '../.';
import { io, Socket } from 'socket.io-client';

type SocketState = {
    connected: boolean;
};

let socket: Socket;

export const getSocket = () => {
    if (socket) return socket;
    return null;
};

const slice = createSlice({
    name: 'socket',
    initialState: {
        connected: false,
    } as SocketState,
    reducers: {
        connect: (state, { payload }: PayloadAction<string>) => {
            socket = io(process.env.REACT_APP_API_URL, {
                auth: { token: payload },
                //transports: ['polling'],
                //upgrade: false,
                //withCredentials: true,
            });
        },
        disconnect: () => {
            socket.disconnect();
        },
        connection: (state, { payload }: PayloadAction<boolean>) => {
            state.connected = payload;
        },
    },
});

export const socketMiddleware: Middleware = (store) => {
    return (next) => (action) => {
        const socket = getSocket();
        if (slice.actions.connect.match(action)) {
            socket?.onAny((event, value) => console.log(event, value));
            socket?.on('connect', () => {
                console.log('[io]: connect', socket.id);
                store.dispatch(slice.actions.connection(socket?.connected));
            });
            socket?.on('disconnect', () => {
                console.log('[io]: disconnect', socket.id);
                store.dispatch(slice.actions.connection(socket?.connected));
            });
            socket?.on('error', (error) => {
                console.log('[io]: error', error.message);
                store.dispatch(slice.actions.connection(socket?.connected));
            });
            socket?.on('connect_error', (error) => {
                console.log('[io]: connect_error', error.message);
                store.dispatch(slice.actions.connection(socket?.connected));
            });
            socket?.on('reconnect', () => {
                console.log('[io]: reconnect', socket.id);
                store.dispatch(slice.actions.connection(socket?.connected));
            });
            socket?.on('reconnect_attempt', () => console.log('[io]: reconnect_attempt'));
            socket?.on('reconnect_error', (error) => console.log('[io]: reconnect_error', error.message));
            socket?.on('reconnect_failed', () => console.log('[io]: reconnect_failed'));

            socket?.on('ping', () => console.log('[io]: ping'));
        }
        if (slice.actions.disconnect.match(action)) {
            socket?.offAny();
            socket?.off('connect');
            socket?.off('disconnect');
            socket?.off('error');
            socket?.off('connect_error');
            socket?.off('reconnect');
            socket?.off('reconnect_attempt');
            socket?.off('reconnect_error');
            socket?.off('reconnect_failed');
            socket?.off('ping');
        }
        return next(action);
    };
};

export default slice.reducer;
export const { connect, disconnect } = slice.actions;

server:

export default ({ env }) => ({
io: {
    enabled: true,
    config: {
      IOServerOptions: {
        cors: {
          origin: env.array("ORIGINS", "*"), // "*"
          methods: ["GET"],
        },
        rejectUnauthorized: true,
      },
      events: [
        {
          name: "connection",
          handler: ({ strapi }, socket) => {
            strapi.log.info(`[io] new connection with id ${socket.id}`);
          },
        },
        {
          name: "disconnect",
          handler: ({ strapi }, reason) => {
            strapi.log.info(`[io] connection lost with reason ${reason}`);
          },
        },
        {
          name: "connect_error",
          handler: ({ strapi }, error) => {
            strapi.log.info(`[io] connection error: ${error.message}`);
          },
        },
      ],
    },
  },
});

server nginx.config

upstream strapi {
  ip_hash;
  server 127.0.0.1:1337;
}

server {
  listen 80;
	listen [::]:80;

	server_name api.exmaple.com;
        return 301 https://api.exmaple.com$request_uri;
}

server {
  # Listen HTTPS
  listen 443 ssl;
  server_name api.exmaple.com;

  # SSL config
  ssl_certificate /etc/nginx/certs/api.exmaple/cert.pem;
  ssl_certificate_key /etc/nginx/certs/api.exmaple/key.pem;

  location / {
        proxy_pass http://strapi;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass_request_headers on;
  }


  location ~ /\.ht {
		deny all;
	}

	location ~ /\.git {
		deny all;
	}
}

client nginx.conf

server {
    listen 80;
	listen [::]:80;

	server_name exmaple.com;
    return 301 https://exmaple.com$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    ssl_certificate /etc/nginx/certs/exmaple.com/cert.pem;
    ssl_certificate_key /etc/nginx/certs/exmaple.com/key.pem;
    
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;

    ssl_protocols TLSv1.2;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;

    add_header Strict-Transport-Security "max-age=63072000" always;

    ssl_stapling on;
    ssl_stapling_verify on;

    server_name exmaple.com;
    
    root /var/www/exmaple/build/;
    location / {
         try_files $uri /index.html;
    }
            
    location ~ /\.ht {
		deny all;
	}

	location ~ /\.git {
		deny all;
	}
}

network tab:

Answered by antokhio

Oct 12, 2022

Thanks to @eskimojo from redux channel the issue finally sorted

the middleware action matcher was firing before the reducer, so at the moment of subscription creation socket was not initialized...
the solution was to move socket creation outside of reducer

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { Middleware } from "redux";
import { io, Socket } from "socket.io-client";

type SocketState = {
  connected: boolean;
};

let socket: Socket;

export const getSocket = () => {
  if (socket) return socket;
  return null;
};

const slice = createSlice({
  name: "socket",
  initialState: {
    connected: false,
  } as SocketState,
  reducers: {
    connect: (state, { p…

View full answer

antokhio · 2022-10-12T12:42:09Z

antokhio
Oct 12, 2022
Author

Changed conf a bit:

server.conf

upstream strapi {
  ip_hash;
  server 127.0.0.1:1337;
}
server {
  listen 80;
  listen [::]:80;

  server_name api.example.com;
  return 301 https://api.example.com;$request_uri;
}

server {
  # Listen HTTPS
  listen 443 ssl;
  server_name api.example.com;

  # SSL config
  ssl_certificate /etc/nginx/certs/api.example.com/cert.pem;
  ssl_certificate_key /etc/nginx/certs/api.example.com/key.pem;

  location ^~ /socket {
    proxy_pass http://strapi;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'Upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  location / {
    proxy_pass http://strapi;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass_request_headers on;
  }


  location ~ /\.ht {
    deny all;
  }

  location ~ /\.git {
    deny all;
  }
}

client:

...
            socket = io(process.env.REACT_APP_API_URL, {
                auth: { token: payload },
                transports: ['websocket'],
                //transports: ['polling'],
                //upgrade: false,
                //withCredentials: true,
            });
...

network tab:

socket still marks itself as disconnected, i also can see events, but they are not consumed by front-end

0 replies

antokhio · 2022-10-12T14:13:34Z

antokhio
Oct 12, 2022
Author

Thanks to @eskimojo from redux channel the issue finally sorted

the middleware action matcher was firing before the reducer, so at the moment of subscription creation socket was not initialized...
the solution was to move socket creation outside of reducer

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { Middleware } from "redux";
import { io, Socket } from "socket.io-client";

type SocketState = {
  connected: boolean;
};

let socket: Socket;

export const getSocket = () => {
  if (socket) return socket;
  return null;
};

const slice = createSlice({
  name: "socket",
  initialState: {
    connected: false,
  } as SocketState,
  reducers: {
    connect: (state, { payload }: PayloadAction<string>) => {},
    disconnect: () => {},
    connection: (state, { payload }: PayloadAction<boolean>) => {
      state.connected = payload;
    },
  },
});

export const socketMiddleware: Middleware = (store) => (next) => (action) => {
  if (slice.actions.connect.match(action)) {
    console.log("[io]: connecting", process.env.REACT_APP_API_URL);
    socket = io(process.env.REACT_APP_API_URL, {
      auth: { token: action.payload },
      transports: ["websocket"],
      //transports: ['polling'],
      //upgrade: false,
      //withCredentials: true,
    });
    socket.onAny((event, value) => console.log(event, value));
    socket.on("connect", () => {
      console.log("[io]: connect", socket.id);
      store.dispatch(slice.actions.connection(socket?.connected));
    });
    socket.on("disconnect", () => {
      console.log("[io]: disconnect", socket.id);
      store.dispatch(slice.actions.connection(socket?.connected));
    });
    socket.on("error", (error) => {
      console.log("[io]: error", error.message);
      store.dispatch(slice.actions.connection(socket?.connected));
    });
    socket.on("connect_error", (error) => {
      console.log("[io]: connect_error", error.message);
      store.dispatch(slice.actions.connection(socket?.connected));
    });
    socket.on("reconnect", () => {
      console.log("[io]: reconnect", socket.id);
      store.dispatch(slice.actions.connection(socket?.connected));
    });
    socket.on("reconnect_attempt", () =>
      console.log("[io]: reconnect_attempt")
    );
    socket.on("reconnect_error", (error) =>
      console.log("[io]: reconnect_error", error.message)
    );
    socket.on("reconnect_failed", () => console.log("[io]: reconnect_failed"));
    socket.on("ping", () => console.log("[io]: ping"));
  }
  if (slice.actions.disconnect.match(action)) {
    socket?.disconnect();

    socket?.offAny();
    socket?.off("connect");
    socket?.off("disconnect");
    socket?.off("error");
    socket?.off("connect_error");
    socket?.off("reconnect");
    socket?.off("reconnect_attempt");
    socket?.off("reconnect_error");
    socket?.off("reconnect_failed");
    socket?.off("ping");
  }
  return next(action);
};

export default slice.reducer;
export const { connect, disconnect } = slice.actions;

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Front-end can't connect to server in prod. react-scripts, nginx, strapi (nodejs) #4493

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Front-end can't connect to server in prod. react-scripts, nginx, strapi (nodejs) #4493

Uh oh!

Uh oh!

antokhio Oct 11, 2022

Replies: 2 comments

Uh oh!

Uh oh!

antokhio Oct 12, 2022 Author

Uh oh!

Uh oh!

antokhio Oct 12, 2022 Author

antokhio
Oct 11, 2022

antokhio
Oct 12, 2022
Author

antokhio
Oct 12, 2022
Author