Configure docker-compose to use .env file

- Remove hardcoded values from docker-compose.yml
- Use environment variables from .env file instead
- Update .env.example with placeholder values and instructions
- Update DOCKER_README.md with .env file setup instructions
- Fixes WebSocket origin check by allowing PHX_HOST to be configured per environment

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.env.example

@@ -5,10 +5,13 @@ POSTGRES_DB=my_first_elixir_vibe_code_dev
 
 # Phoenix Configuration
 DATABASE_URL=ecto://postgres:postgres@db/my_first_elixir_vibe_code_dev
-SECRET_KEY_BASE=PNosxXTGA8DhjwcE5QWJkJZr400AFXjIWu27dEFQg/QJE3RyCna6HePec1Sjgz6W
+SECRET_KEY_BASE=CHANGE_ME_IN_PRODUCTION
 PHX_HOST=localhost
 PORT=4000
 
-# Important: For production, generate a new SECRET_KEY_BASE with:
+# Important:
-# docker-compose run --rm web bin/my_first_elixir_vibe_code eval "IO.puts(:crypto.strong_rand_bytes(64) |> Base.encode64())"
+# 1. Copy this file to .env and update the values for your environment
-# or locally with: mix phx.gen.secret
+# 2. For production, generate a new SECRET_KEY_BASE with:
+#    docker-compose run --rm web bin/my_first_elixir_vibe_code eval "IO.puts(:crypto.strong_rand_bytes(64) |> Base.encode64())"
+#    or locally with: mix phx.gen.secret
+# 3. Update PHX_HOST to your production domain (e.g., ratemyclient.sivic.me)

DOCKER_README.md

@@ -9,7 +9,17 @@ This guide will help you run the RateMyClient Phoenix application using Docker C
 
 ## Quick Start
 
-1. **Build and start the containers:**
+1. **Create your .env file:**
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   Then edit `.env` and update the values for your environment:
+   - For production, generate a new `SECRET_KEY_BASE`
+   - Update `PHX_HOST` to your production domain (e.g., `ratemyclient.sivic.me`)
+
+2. **Build and start the containers:**
 
    ```bash
    docker-compose up --build
@@ -23,7 +33,7 @@ This guide will help you run the RateMyClient Phoenix application using Docker C
    - Create an admin user
    - Start the Phoenix server
 
-2. **Access the application:**
+3. **Access the application:**
 
    Open your browser and navigate to: http://localhost:4000
 
@@ -83,12 +93,27 @@ docker-compose up --build
 
 ## Environment Variables
 
-You can customize the application by modifying the environment variables in `docker-compose.yml`:
+The application uses a `.env` file for configuration. Copy `.env.example` to `.env` and customize:
 
+- `POSTGRES_USER`: PostgreSQL username (default: postgres)
+- `POSTGRES_PASSWORD`: PostgreSQL password (default: postgres)
+- `POSTGRES_DB`: PostgreSQL database name
 - `DATABASE_URL`: PostgreSQL connection string
-- `SECRET_KEY_BASE`: Secret key for Phoenix (generate with `mix phx.gen.secret`)
+- `SECRET_KEY_BASE`: Secret key for Phoenix (**IMPORTANT:** Generate a new one for production!)
-- `PHX_HOST`: Hostname for the application
+- `PHX_HOST`: Hostname for the application (localhost for dev, your domain for production)
-- `PORT`: Port to run the application on
+- `PORT`: Port to run the application on (default: 4000)
+
+### Generating a new SECRET_KEY_BASE
+
+For production, you must generate a new secret key:
+
+```bash
+# Using Docker:
+docker-compose run --rm web bin/my_first_elixir_vibe_code eval "IO.puts(:crypto.strong_rand_bytes(64) |> Base.encode64())"
+
+# Or locally if you have Elixir installed:
+mix phx.gen.secret
+```
 
 ## Troubleshooting
 

docker-compose.yml

@@ -4,9 +4,9 @@ services:
   db:
     image: postgres:16-alpine
     environment:
-      POSTGRES_USER: postgres
+      POSTGRES_USER: ${POSTGRES_USER}
-      POSTGRES_PASSWORD: postgres
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
-      POSTGRES_DB: my_first_elixir_vibe_code_dev
+      POSTGRES_DB: ${POSTGRES_DB}
     ports:
       - "5432:5432"
     volumes:
@@ -20,12 +20,12 @@ services:
   web:
     build: .
     ports:
-      - "4000:4000"
+      - "${PORT:-4000}:4000"
     environment:
-      DATABASE_URL: "ecto://postgres:postgres@db/my_first_elixir_vibe_code_dev"
+      DATABASE_URL: ${DATABASE_URL}
-      SECRET_KEY_BASE: "PNosxXTGA8DhjwcE5QWJkJZr400AFXjIWu27dEFQg/QJE3RyCna6HePec1Sjgz6W"
+      SECRET_KEY_BASE: ${SECRET_KEY_BASE}
-      PHX_HOST: "localhost"
+      PHX_HOST: ${PHX_HOST}
-      PORT: "4000"
+      PORT: ${PORT:-4000}
     depends_on:
       db:
         condition: service_healthy