Proxy Reverso com HTTPS

[cdaher78]

Fiz o deploy seguindo as instruções e agreguei mais um proxy reverso que está em outra VM para acesso por um domínio externo. Chego ao frontend sem problemas via HTTPS. Porém ao inspecionar o site no ambiente de console tenho a seguinte mensagem:

Mixed Content: The page at '<URL>' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws:<URL>/socket.io/?EIO=4&transport=websocket'. This request has been blocked; this endpoint must be available over WSS.

O Websocket endpointapontado na mensagem é o IP da maquina na porta 3000 e a página é o meu domínio.

Não consigo fazer o login na tela inicial pelo domínio externo, somente pelo IP local.

[cleitonme]

nao tenho experiencia nesses casos ele foi feito rodar localmente..

[cdaher78]

Sem problemas. Poderia indicar o caminho aonde ficam os arquivos do backend/fronted do site depois da build?

[cleitonme]

Não pode alterar esses arquivos deve alterar src ou .env

[JulioC354R]

também procuro essa solução, queria poder alterar pra acesso externo mesmo rodando localmente

[JulioC354R]

entrando na pasta /home/deploy/izing.io/frontend/ usando o deploy eu consigo alterar o .env do frontend, o que na teoria ao trocar o ip de onde o front busca o backend ele iria funcionar por acesso remoto, mas mesmo após eu ter alterado não funcionou

[JulioC354R]

Eu consegui o acesso externo, pera que vou compartilhar a solução para que você também teste

Basicamente eu tive que trocar as configurações dos .env e habilitar o cors pra acesso por fora, só tem um bug que eu não tô entendendo que é tipo, não funciona no meu whatsapp busines, apenas se for o whatsapp normal

[JulioC354R]

Configurando para acesso remoto:

no linux digite:

sudo -i

su deploy

cd /home/deploy/[izing.io/frontend/

aqui você configura o env trocando o VUE_URL_API para o endereço do backend
nano .env

VUE_URL_API=http://0.0.0.0:0
VUE_FACEBOOK_APP_ID='23156312477653241'

novamente no terminal digite:
npm run build

cd ../backend/src/app
nano index.ts

ATENÇÃO, aqui cole o código abaixo o endereço da linha:

origin: 'http://0.0.0.0:4000', // Permite apenas essa origem

(aqui você tá permitindo que o seu front acesse o backend)

codigo:

import "reflect-metadata";
import "express-async-errors";
import "./config-env";
import { createServer } from "http";
import { env } from "process";
import express from "express";
import cors from "cors"; // Importa o pacote CORS
import GracefulShutdown from "http-graceful-shutdown";
import bootstrap from "./boot";
import { initIO } from "../libs/socket";
import { StartAllWhatsAppsSessions } from "../services/WbotServices/StartAllWhatsAppsSessions";

export default async function application() {
  const app: any = express();
  const httpServer: any = createServer(app);
  const port = app.get("port") || env.PORT || 3100;

  // Configuração do CORS
  app.use(cors({
    origin: 'http://201.216.89.145:4000', // Permite apenas essa origem
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
  }));

  await bootstrap(app);
  
  async function start() {
    const host = app.get("host") || "0.0.0.0";
    app.server = httpServer.listen(port, host, async () => {
      console.info(`Web server listening at: http://${host}:${port}/`);
    });

    initIO(app.server);

    // needs to start after socket is available
    await StartAllWhatsAppsSessions();
    GracefulShutdown(app.server);
  }

  async function close() {
    return new Promise<void>((resolve, reject) => {
      httpServer.close(err => {
        if (err) {
          reject(err);
        }
        resolve();
      });
    });
  }

  process.on("SIGTERM", close);

  app.start = start;
  app.close = close;

  return app;
}

AGORA NO TERMINAL NOVAMENTE:

cd ../..
nano .env

AQUI VOCÊ VAI CONFIGURAR O SEU BACKEND, TROQUE APENAS OS URL PELOS ENDEREÇOS CORRESPONDENTES E SALVE O ARQUIVO :
(aqui você também pode trocar algumas senhas se quiser)

NODE_ENV=dev
BACKEND_URL=[http://](http://meu/)MEUBACK.COM
FRONTEND_URL=http://0.0.0.0:4000/    #Exemplo de endereço ip com porta

npm run build
pm2 reload all

PRONTO, PRA MIM RODOU CERTINHO, MAS LEMBRANDO QUE O ACESSO VAI SER SEMPRE PELO O EXTERNO, JÁ QUE O FRONT VAI APONTAR PRA LÁ, NO MEU CASO EU ESTOU RODANDO TUDO EM LOCALHOST UTILIZANDO MEU IP PÚBLICO, COMO COLOQUEI NO EXEMPLO ACIMA, NAS URLS VOCÊ PODE COLOCAR TANTO UM DOMÍNIO QUE VOCÊ TENHA, QUANTO SEU IP PÚBLICO.

[cdaher78]

Eu preferi este método pois não tenho uma VPS e uma infraestrutura local com um Nginx na ponta pra proxy reverso pro meu provedor de dominio. No entanto este erro é apresentado com solução num deploy usando o aaPanel e VPS onde se adiciona uma linha de comando no PHP do backend.

Com este deploy aqui, que é excelente por obséquio, não consigo encontrar o ambiente aonde ficam estas configurações para acrescentar esta linha. Isso sanaria esse problema facilmente (underscores_in_headers on;)

Porém acredito que esse deploy foi feito somente em Node.Js.

[cleitonme]

Não entendi aqui.. origin: 'http://201.216.89.145:4000',

Pois na teoria se colocar .env do backend URL do frontend jah deve funcionar

Aqui FRONTEND_URL=http://201.216.89.145:4000

https://github.com/cleitonme/izing.open.io/blob/master/backend/src/app/express.ts

[cleitonme]

entrando na pasta /home/deploy/izing.io/frontend/ usando o deploy eu consigo alterar o .env do frontend, o que na teoria ao trocar o ip de onde o front busca o backend ele iria funcionar por acesso remoto, mas mesmo após eu ter alterado não funcionou

Nesse caso só funciona depois rodar build frontend denovo chegou a fazer isso na pasta frontend npm run build

[JulioC354R]

Não entendi aqui.. origin: 'http://201.216.89.145:4000',

Pois na teoria se colocar .env do backend URL do frontend jah deve funcionar

Aqui FRONTEND_URL=http://201.216.89.145:4000

https://github.com/cleitonme/izing.open.io/blob/master/backend/src/app/express.ts

Acontece que dá erro de Cors, por isso tive que refazer o código do index .ts para permitir que por exemplo, o ip de exemplo: http://201.216.89.145:4000', conseguisse acessar o backend

se deixar o index.ts do jeito que tava dá erro de CORS

[cleitonme]

Mas essa linha .env altera cors por isso estranho
.. depois altera chega reinicia os serviços? pm2 restart all

[JulioC354R]

Mas essa linha .env altera cors por isso estranho .. depois altera chega reinicia os serviços? pm2 restart all

Sim eu tentei várias vezes somente alterando os envs, no fim tive que reescrever o index.ts pra pegar