Deployment - Lost with what goes where. Base mix phx.new project using Docker-Compose with Postgres + Nginx on EC2

Sorry in advance as this will be long.

Preface

I have never deployed anything before, I have never used Git, Github, Docker, Docker-Compose, Nginx, Linux(Debian), EC2, SSH, SSL or dealt with route 53 before so there will undoubtedly be very obvious mistakes and things I am missing or that are completely incorrect. For the last couple of weeks I’ve basically been learning the above to the point where I’ve reached what you will see below. I tried getting as far as possible before asking for help, but unfortunately I’m at that point now as I’m completely lost on fixing my current error.

Deployment Method

With regards to things like giga, fly.io and heroku I decided to avoid them as I’ve never had any luck with anything that’s meant to make my life easier in Elixir. I also don’t actually know my requirements, and each of them seems like its meant to fit a specific requirement.

Current Situation

I can access my project on my domain semi-successfully.
SSL completly fails so I have commented it out in the below, but if I use HTTP on its own I can get the project to at least load up through compose, display static content and do basic things like switch between pages.

My first and major error that I can’t figure out is below. Any page that has a form on it will create the below error constantly, but I’m not really sure what I’m meant to do to fix it. I get that its an error with the websocket, but I don’t know whether its the project config, Nginx or something else/both. Both the browser and EC2 errors are constantly repeating so part of me thinks I was meant to do something to disable the live_reloader? I haven’t seen that mentioned anywhere in any of the deployment guides I’ve seen though. My nginx.conf is pretty bare as well, and I’m not sure if its in the correct location so there’s a decent chance its that.

Browser Console Error:

WebSocket connection to 'ws://example.com/live/websocket?_csrf_token=PjVBQBAdMAwVFCN3ERoiewUFKWdNCyw2XDptHJCZq_w2VlW4HhN25JAY&_track_static%5B0%5D=http%3A%2F%2Fexample.com%2Fassets%2Fapp-5cff81ebeebb9e1f0162f717bc370425.css%3Fvsn%3Dd&_track_static%5B1%5D=http%3A%2F%2Fexample.com%2Fassets%2Fapp-ba5c2fb96fbeb4e75e866fc3e2ffcefe.js%3Fvsn%3Dd&_mounts=0&_live_referer=undefined&vsn=2.0.0' failed: 

EC2 Console Error:

project-nginx-1  | 95.145.175.160 - - [28/Aug/2023:04:45:40 +0000] "GET /live/websocket?_csrf_token=Nh5lfD41HWUuJQYjF0IBIGBbCxwqBgc5PoTHfbn3JnRfP4to-6lIRGjV&_track_static%5B0%5D=http%3A%2F%2Fexample.com%2Fassets%2Fapp-5cff81ebeebb9e1f0162f717bc370425.css%3Fvsn%3Dd&_track_static%5B1%5D=http%3A%2F%2Fexample.com%2Fassets%2Fapp-ba5c2fb96fbeb4e75e866fc3e2ffcefe.js%3Fvsn%3Dd&_mounts=0&_live_referer=undefined&vsn=2.0.0 HTTP/1.1" 400 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
project-web-1    | 04:45:40.359 [info] CONNECTED TO Phoenix.LiveView.Socket in 50µs
project-web-1    |   Transport: :websocket
project-web-1    |   Serializer: Phoenix.Socket.V2.JSONSerializer
project-web-1    |   Parameters: %{"_csrf_token" => "Nh5lfD41HWUuJQYjF0IBIGBbCxwqBgc5PoTHfbn3JnRfP4to-6lIRGjV", "_live_referer" => "undefined", "_mounts" => "0", "_track_static" => %{"0" => "http://example.com/assets/app-5cff81ebeebb9e1f0162f717bc370425.css?vsn=d", "1" => "http://example.com/assets/app-ba5c2fb96fbeb4e75e866fc3e2ffcefe.js?vsn=d"}, "vsn" => "2.0.0"}

Files I have created/modified:

• .dockerignore
• Dockerfile
• docker-compose.yml
• entrypoint.sh
• myapp.env
• nginx.conf
• config.exs
• runtime.exs

I ran mix phx.gen.release as well, and have a “rel” folder with all contents. I have not modified any of the default files this command produced.

Is the above list conclusive enough for me to deploy? Are there any additional files/folders I should have created/modified in order to deploy? I’ve gone through several guides as well as the hexdocs to reach my current progress, but I’m obviously still missing something.

I wont post the dockerignore as its unchanged from the defult --Docker flag when generating the release but here are my files:

Dockerfile

I think the below is relatively unchanged from the --Docker flag created file. I think I added postgresql client to remove a postgres_isready error, and added the entrypoint lines.

ARG ELIXIR_VERSION=1.14.3
ARG OTP_VERSION=25.0.4
ARG DEBIAN_VERSION=bullseye-20220801-slim

ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-debian-${DEBIAN_VERSION}"
ARG RUNNER_IMAGE="debian:${DEBIAN_VERSION}"

FROM ${BUILDER_IMAGE} as builder

RUN apt-get update -y && apt-get install -y build-essential git postgresql-client \
    && apt-get clean && rm -f /var/lib/apt/lists/*_*

WORKDIR /app

RUN mix local.hex --force && \
    mix local.rebar --force

ENV MIX_ENV="prod"

COPY mix.exs mix.lock ./
RUN mix deps.get --only $MIX_ENV
RUN mkdir config
COPY config/config.exs config/${MIX_ENV}.exs config/
RUN mix deps.compile

COPY priv priv
COPY lib lib
COPY assets assets

RUN mix assets.deploy
RUN mix compile

COPY config/runtime.exs config/
COPY rel rel
RUN mix release

COPY entrypoint.sh /app/entrypoint.sh
RUN chmod +x /app/entrypoint.sh

CMD ["/app/entrypoint.sh"]

Docker-Compose

I’m going to try and get SSL to work after fixing the websocket issue. My main concern here is the nginx volume mapping. I’m completely new to nginx, and I’m not sure if the nginx.conf file should be directly in the nginx folder or inside conf.d.

version: '3.8'
services:
  web:
    build: .
    ports:
       - '4000:4000'
    depends_on:
       - db
    env_file:
      - myapp.env
  db:
    image: postgres:latest
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
#      PGSSLMODE: require
#      PGSSLCERT: ./priv/cert.pem
#      PGSSLKEY: ./priv/privkey.pem
    ports:
      - "5432:5432"
    restart: always
    volumes:
      - /pg-data:/var/lib/postgresql/data

  nginx:
    image: nginx:latest
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
#      - ./priv/cert.pem:/etc/nginx/ssl/cert.pem
#      - ./priv/privkey.pem:/etc/nginx/ssl/privkey.pem
    ports:
      - "80:80"
#      - "443:443"
    depends_on:
      - web
    restart: always

nginx.conf

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;

        server_name example.com;

        location / {
            proxy_pass http://web;
        }
    }
}

Env File

PG_USER=postgres
PG_PASSWORD=postgres
PG_DATABASE=myapp
PG_PORT=5432
PG_HOST=db
PHX_HOST=example.com
PHX_PORT=4000
POOL_SIZE=10
SECRET_KEY_BASE= set to my secret key value

Entrypoint.sh
This was just copied from a guide iirc and doesn’t seem to have any issues.

#!/bin/bash
# Docker entrypoint script.

# Function to wait for Postgres to be ready
wait_for_postgres() {
  until pg_isready -h $PG_HOST -p $PG_PORT -U $PG_USER
  do
    echo "Waiting for database to start..."
    sleep 2
  done
}

# Wait for Postgres to be ready
wait_for_postgres

# Create, migrate, and seed database if it doesn't exist.
if [[ -z `psql -Atqc "\\list $PG_DATABASE"` ]]; then
  echo "Database $PG_DATABASE does not exist. Creating..."
  mix ecto.create
  mix ecto.migrate
  mix run priv/repo/seeds.exs
  echo "Database $PG_DATABASE created."
fi

# Start the Phoenix server
exec mix phx.server

Config.exs

import Config

config :myapp,
  ecto_repos: [Myapp.Repo]

config :myapp, MyappWeb.Endpoint,
  url: [host: "example.com"],
  render_errors: [
    formats: [html: MyappWeb.ErrorHTML, json: MyappWeb.ErrorJSON],
    layout: false
  ],
  pubsub_server: Myapp.PubSub,
  live_view: [signing_salt: "nGTi7RBq"]

config :myapp, Myapp.Mailer, adapter: Swoosh.Adapters.Local

config :esbuild,
  version: "0.17.11",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

config :logger, :console,
  format: "$time $metadata[$level] $message\n",
  metadata: [:request_id]

config :phoenix, :json_library, Jason

import_config "#{config_env()}.exs"

Runtime.exs

import Config

  config :myapp, MyappWeb.Endpoint, server: true

if config_env() == :prod do

  config :myapp, Myapp.Repo,
#    ssl: true,
    url: "postgresql://#{(System.get_env("PG_USER"))}:#{(System.get_env("PG_PASSWORD"))}@#{(System.get_env("PG_HOST"))}:#{(System.get_env("PG_PORT"))}/#{(System.get_env("PG_DATABASE"))}",
    pool_size: String.to_integer(System.get_env("POOL_SIZE")),
    socket_options: if System.get_env("ECTO_IPV6") in ~w(true 1), do: [:inet6], else: []

  config :myapp, MyappWeb.Endpoint,
    url: [host: System.get_env("PHX_HOST"), port: 80],
    http: [ip: {0, 0, 0, 0, 0, 0, 0, 0}, port: 4000],
#    https: [
#      port: 443,
#      cipher_suite: :strong,
#      keyfile: System.get_env("SSL_KEY_PATH"),
#      certfile: System.get_env("SSL_CERT_PATH"),
#      force_ssl: [hsts: true]
#    ],
    secret_key_base: System.get_env("SECRET_KEY_BASE")
end

So yeah, that's everything I think I was meant to create/modify to get the deployment working.

Any info is appreciated, even if its just to tell me I was meant to modify a file not listed. I currently just straight up don't know whats causing the websocket issue so have no real qay to fault find or correct it.

Again, sorry if its something really obvious. I'm trying to learn how half a dozen things that I'm unfamiliar with work, and get them to all work together harmoniously somehow with errors that are moonspeak to me @.@