Configuration of Elixir/Phoenix with Node.js and Docker Compose

I’m attempting to deploy a Phoenix/Elixir application over docker-compose and nginx and it’s not working. I’m stuck on how to debug. Here’s how I’ve set up the application so far -

This is my docker-compose file

version: "3.9"

networks: 
  main_network:

volumes:
  volume1:
  varwwwcertbot:
  certbotconf:
  data_volume:

services:
  phx: 
    build:
      context: ./phx
    restart: always
    volumes:
      - ./phx:/phx
    ports: 
      - "4000:4000"
    depends_on:
      db:
        condition: service_healthy
    networks:
      - main_network
  db:
    image: postgres
    restart: always
    volumes:
      - ./docker-entrypoint-initdb.d/init.sql:/docker-entrypoint-initdb.d/init.sql
      - data_volume:/var/lib/postgresql/data
    environment:
      - POSTGRES_NAME=dev-postgres
      - POSTGRES_USER=pixel
      - POSTGRES_DATABASE=lightchan
      - POSTGRES_PASSWORD=exploration 
    ports: 
      - "5432:5432"
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U pixel"]
      interval: 5s
      timeout: 5s
      retries: 20
    networks:
      - main_network
  frontend:
    build: 
      context: ./frontend
    restart: always
    volumes:
      - './frontend:/app'
      - '/app/node_modules'
    ports: 
      - "3000:3000"
    networks:
      - main_network
    depends_on:
      - "phx"
  nginx:
    build:
      context: ./nginx
    restart: always
    ports:
      - "80:80"
      - "443:443" 
    volumes:
      - volume1:/usr/share/nginx/html
      - varwwwcertbot:/var/www/certbot
      - certbotconf:/etc/letsencrypt 
    networks:
      - main_network
  certbot:
    image: certbot/certbot:latest
    volumes: 
      - varwwwcertbot:/var/www/certbot
      - certbotconf:/etc/letsencrypt
    networks:
      - main_network

Here’s my Dockerfile for phoenix -

#FROM ubuntu:latest

FROM alpine:latest

COPY . .

#WORKDIR ./phx

#RUN apt-get update -y

#RUN apt-get install wget -y

#RUN wget https://packages.erlang-solutions.com/erlang-solutions_2.0_all.deb && dpkg -i erlang-solutions_2.0_all.deb

#RUN sudo apt-get update

#RUN sudo apt-get install esl-erlang

#RUN sudo apt-get install elixi

RUN apk add inotify-tools

RUN apk add elixir

#RUN echo "mix deps.get"

#RUN mix deps.get

RUN echo "mix local.hex --force"

RUN mix local.hex --force

RUN echo "mix deps.get"

RUN mix deps.get

RUN echo "mix local.rebar --force"

RUN mix local.rebar --force

RUN echo "mix phx.server"

EXPOSE 4000

ENTRYPOINT ["sh", "./entrypoint.sh"]

and here’s my entrypoint.sh

#!/bin/bash

#echo "mix deps.get"

#mix deps.get

#echo "mix local.hex --force"

#mix local.hex --force

#echo "mix local.rebar --force"

#mix local.rebar --force

#echo "mix phx.server"

mix phx.server

and my NGINX

events{

}

http{

     map $http_upgrade $connection_upgrade {
         default Upgrade;
         ''      close;
     }

     upstream websocket {
         server 164.92.157.124:4000;
     }

     server {
         listen 80;
         server_name localhost lightchan.org www.lightchan.org;
         root /usr/share/nginx/html;
	
 	 location /.well-known/acme-challenge/ {
            root /var/www/certbot;
         }
     	
         if ($scheme = http) {
   	   return 301 https://lightchan.org$request_uri;
 	 }
     }

    server {
         listen 443 default_server ssl http2;
         listen [::]:443 ssl http2;
         server_name localhost lightchan.org www.lightchan.org;
         ssl_certificate /etc/letsencrypt/live/lightchan.org/fullchain.pem;
         ssl_certificate_key /etc/letsencrypt/live/lightchan.org/privkey.pem;

            location /media/pics/ {
                 autoindex on;
            }
            location / {
     	         proxy_pass http://frontend:3000;
                 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_intercept_errors  on;
                 proxy_set_header Upgrade $http_upgrade;
                 proxy_set_header Connection "upgrade";
            }
            location ^~ /socket/ {
                 proxy_pass http://websocket;
                 add_header X-uri "$uri";
                 proxy_http_version 1.1;
                 proxy_set_header        X-Forwarded-Proto $scheme;
                 proxy_set_header        Host $host;
                 proxy_set_header Upgrade $http_upgrade;
                 proxy_set_header Connection $connection_upgrade;
                # proxy_set_header Upgrade $http_upgrade;
                # proxy_set_header Connection "upgrade";
            }
            location ^~ /api/ {
                 proxy_pass http://phx:4000;
                 add_header X-uri "$uri";
                 proxy_http_version 1.1;
                 proxy_set_header        X-Forwarded-Proto $scheme;
                 proxy_set_header        Host $host;
                 proxy_set_header Upgrade $http_upgrade;
                 proxy_set_header Connection $connection_upgrade;
                # proxy_set_header Upgrade $http_upgrade;
                # proxy_set_header Connection "upgrade";
            }
    }
}

phx_1       | [info] Running MyAppWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
phx_1       | [info] Access MyAppWeb.Endpoint at http://<IPADDRESS>:4000
phx_1       | [watch] build finished, watching for changes...

Currently the application will not navigate to www.lightchan.org/api or www.lightchan.org/socket - but returns a 502 gateway error, which tells me that NGINX is seeing the route, but the application isn’t responding. My docker-compose logs show that the application is up but not receiving incoming data - there’s no logs after navigating to that address.

I’ve changed config/config.exs in the phoenix application to take localhost, 127.0.0.1, and <IPADDRESS>, with the port number of 4000 and then attempted to run mix phx.server by itself without docker and nginx in order to see if I could reach the / splash page. This works on my local machine on localhost, but not at all on the server for either of the three options.

Connection upgrade to handle websockets is configured correctly, and SSL works with the front page application which tells me that docker name spaces with the networking option are up. I have this error in the web console (socket.js:216 WebSocket connection to ‘wss://www.lightchan.org/socket/websocket?userToken=1647970833615&vsn=2.0.0’ failed: ) when connecting to the frontend and attempting to open a socket because the server can’t be reached.

At this point I’m out of ideas. I’ve asked on a number of forums and on stack overflow but I can’t seem to make this work. Does anyone have any ideas?