Can't change BASE_URL in Docker

PeterTucker commented 3 months ago

Browser: Firefox OS: Ubuntu/Docker

Description

Tried changing the BASE_URL var from localhost to my device's ip (192.168.1.92) in config.json, docker-compose.dev.yml, and docker-compose.yml. Then when I visit the http://192.168.1.92:8080, it freezes the browser. If I look in the js console it gives me this error:

Firefox can’t establish a connection to the server at ws://localhost:8080/ws. chunk-vendors.js line 9143 > eval:18:19

... so it's still using localhost

Console Errors

js console:

Firefox can’t establish a connection to the server at ws://localhost:8080/ws. chunk-vendors.js line 9143 > eval:18:19

docker output:

habitica-client-1  |  warning
habitica-client-1  |
habitica-client-1  | DefinePlugin
habitica-client-1  | Conflicting values for 'process.env.BASE_URL'
habitica-client-1  |

habitica-client-1  |   App running at:
habitica-client-1  |   - Local:   http://localhost:8080/
habitica-client-1  |   - Network: unavailable
habitica-client-1  |
habitica-client-1  |   Note that the development build is not optimized.
habitica-client-1  |   To create a production build, run npm run build.
habitica-client-1  |

EliasGsN commented 2 months ago

Conflito de variáveis de ambiente** O erro Conflicting values for 'process.env.BASE_URL' sugere que há valores conflitantes sendo definidos para BASE_URL em algum lugar do seu projeto. Verifique os seguintes pontos:

Configurações em Arquivos Docker: Verifique tanto o docker-compose.yml quanto o docker-compose.dev.yml para garantir que BASE_URL esteja configurado corretamente e não seja sobrescrito em outro lugar.
Configurações de Ambiente: Certifique-se de que o config.json esteja apontando para o BASE_URL correto. Se você estiver utilizando múltiplos arquivos de configuração para diferentes ambientes (por exemplo, development e production), garanta que todos estão alinhados.

2. WebSocket ainda usando localhost

O problema com o WebSocket pode ser causado por uma configuração incorreta ou por não estar utilizando a variável de ambiente corretamente.

Modificação do WebSocket URL: O WebSocket provavelmente está utilizando um valor hardcoded ou uma variável de ambiente que não foi atualizada. Verifique onde o WebSocket está sendo inicializado no código e certifique-se de que ele utiliza process.env.BASE_URL corretamente.
```
const socket = new WebSocket(`${process.env.BASE_URL.replace(/^http/, 'ws')}/ws`);
```
Ou, se você precisar definir manualmente:
```
const socket = new WebSocket(`ws://${process.env.BASE_URL}/ws`);
```
Proxy de Desenvolvimento: Se você está usando um proxy (por exemplo, com o webpack-dev-server), verifique as configurações para garantir que o WebSocket também esteja passando pelo proxy correto.

3. Rede Docker

O fato de a rede estar indisponível para o container (- Network: unavailable) sugere que talvez o container não esteja configurado corretamente para acessar a rede do host.

Network Mode: Você pode tentar configurar o modo de rede do Docker para host em seu docker-compose.yml para permitir que o container utilize a rede do host diretamente.
```
version: '3.7'
services:
habitica-client:
  build: .
  network_mode: "host"
```

4. Limpar o Cache e Recompilar

Após realizar as alterações, limpe o cache do Docker e reconstrua seus containers para garantir que todas as mudanças foram aplicadas corretamente.

docker-compose down --rmi all
docker-compose up --build

5. Verificação Final

Certifique-se de que o navegador esteja acessando a URL correta.
Teste acessando a aplicação tanto via localhost quanto pelo IP 192.168.1.92.

Esses passos devem te ajudar a resolver o problema de conexão do WebSocket e o conflito de variáveis de ambiente. Se o problema persistir, pode haver algo mais específico no código ou na configuração que precisaria ser revisado.

CuriousMagpie commented 2 months ago

@EliasGsN Thanks for taking the time to troubleshoot this! In the future, can you use English for these sorts of comments? None of the team is fluent in Spanish, so this makes it more difficult for us and many of our users.

Translated into English (using Google Translate):

1. Environment variable conflict

The error Conflicting values for 'process.env.BASE_URL' suggests that there are conflicting values being set for BASE_URL somewhere in your project. Check the following points:

Docker File Configurations: Check both docker-compose.yml and docker-compose.dev.yml to ensure that BASE_URL is set correctly and not overridden elsewhere.
Environment Configurations: Ensure that config.json is pointing to the correct BASE_URL. If you are using multiple configuration files for different environments (e.g. development and production), ensure that they are all aligned.

2. WebSocket still using `localhost`

The WebSocket issue could be caused by an incorrect configuration or not using the environment variable correctly.

WebSocket URL modification: The WebSocket is probably using a hardcoded value or an environment variable that has not been updated. Check where WebSocket is being initialized in your code and make sure it uses process.env.BASE_URL correctly.

const socket = new WebSocket(`${process.env.BASE_URL.replace(/^http/, 'ws')}/ws`);

Or, if you need to set it manually:

const socket = new WebSocket(`ws://${process.env.BASE_URL}/ws`);

Development Proxy: If you are using a proxy (e.g. with webpack-dev-server), check your configuration to make sure WebSocket is also going through the correct proxy.

3. Docker Networking

The fact that the network is unavailable to the container (- Network: unavailable ) suggests that the container may not be configured correctly to access the host network.

Network Mode: You can try setting the Docker network mode to host in your docker-compose.yml to allow the container to use the host network directly.

version: '3.7'
  services:
    habitica-client:
    build: .
    network_mode: "host"

4. Clear the Cache and Rebuild

After making the changes, clear the Docker cache and rebuild your containers to ensure that all the changes were applied correctly.

docker-compose down --rmi all
docker-compose up --build

5. Final Check

Make sure that the browser is accessing the correct URL.
Test by accessing the application via both localhost and IP 192.168.1.92.

These steps should help you resolve the WebSocket connection issue and the environment variable conflict. If the problem persists, there may be something more specific in the code or configuration that needs to be reviewed.

EliasGsN commented 2 months ago

Sorry, I wasn't paying attention. Do you give a heads-up in case something's wrong?

CuriousMagpie commented 2 months ago

I use a Mac, so I don't use Docker for my local development builds. If @PeterTucker is still unable to resolve their issue, I would expect them to let us know here.

CuriousMagpie commented 1 month ago

There's a PR #15298 which likely solves this problem. I'm closing this issue, but if it isn't fixed by this update, feel free to leave a comment and we'll re-open it.

HabitRPG / habitica