feat: add traefik

api/src/Model/User.php

@@ -102,7 +102,7 @@ public function getAvatar(): ?string
             return null;
         }
 
-        return "http://" . (getenv('APP_HOST') ?? 'localhost') . ":3000/medias/p/" . $photo->name;
+        return "https://" . trim(getenv('APP_HOST') ?? 'localhost', '/') . "/api/medias/p/" . $photo->name;
     }
 
     /**
@@ -246,7 +246,7 @@ public function getPhotosUrl(): array
 
         $host = getenv('APP_HOST') ?: "localhost";
 
-        return array_map(fn (Photo $photo) => "http://" . $host .  ":3000/medias/p/" . $photo->name, $photos);
+        return array_map(fn (Photo $photo) => "https://" . trim($host, '/') .  "/api/medias/p/" . $photo->name, $photos);
     }
 
     public function getAge(): ?int

docker-compose.yml

@@ -1,4 +1,24 @@
 services:
+  traefik:
+    image: traefik:v2.10
+    container_name: traefik
+    restart: always
+    command:
+      - "--api.insecure=true"
+      - "--providers.docker=true"
+      - "--providers.docker.exposedbydefault=false"
+      - "--entrypoints.web.address=:80"
+      - "--entrypoints.websecure.address=:443"
+      - "--entrypoints.websocket.address=:3001"
+    ports:
+      - "80:80"
+      - "443:443"
+      - "8080:8080"  # Dashboard Traefik
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    networks:
+      - matchaNetwork
+
   mysql:
     image: mysql:latest
     container_name: mysql
@@ -9,10 +29,8 @@ services:
       - matchaNetwork
     env_file:
       - ./.env
-    ports:
-      - "3005:3306"
     healthcheck:
-      test: [ "CMD", "mysqladmin" ,"ping", "-h", "localhost" ]
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
       timeout: 20s
       retries: 10
 
@@ -21,14 +39,17 @@ services:
       - mysql
     image: phpmyadmin
     restart: always
-    ports:
-      - "8090:80"
     env_file:
       - ./.env
     environment:
       PMA_HOST: mysql
     networks:
       - matchaNetwork
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.phpmyadmin.rule=Host(`phpmyadmin.localhost`)"
+      - "traefik.http.routers.phpmyadmin.entrypoints=web"
+      - "traefik.http.services.phpmyadmin.loadbalancer.server.port=80"
 
   api:
     build:
@@ -38,15 +59,20 @@ services:
     restart: always
     volumes:
       - api:/app
-    ports:
-      - 3000:3000
     networks:
       - matchaNetwork
     depends_on:
       mysql:
         condition: service_healthy
     env_file:
       - ./.env
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.api.rule=Host(`localhost`) && PathPrefix(`/api`)"
+      - "traefik.http.routers.api.entrypoints=web"
+      - "traefik.http.services.api.loadbalancer.server.port=3000"
+      - "traefik.http.middlewares.api-stripprefix.stripprefix.prefixes=/api"
+      - "traefik.http.routers.api.middlewares=api-stripprefix"
 
   websocket:
     build:
@@ -55,16 +81,19 @@ services:
     restart: always
     volumes:
       - websocket:/app
-    ports:
-      - 3001:3001
-    expose:
-      - '3001'
     networks:
       - matchaNetwork
     depends_on:
       - mysql
     env_file:
       - .env
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.websocket.rule=Host(`localhost`) && PathPrefix(`/ws`)"
+      - "traefik.http.routers.websocket.entrypoints=web"
+      - "traefik.http.services.websocket.loadbalancer.server.port=3001"
+      - "traefik.http.middlewares.ws-stripprefix.stripprefix.prefixes=/ws"
+      - "traefik.http.routers.websocket.middlewares=ws-stripprefix"
 
   frontend:
     build:
@@ -73,14 +102,15 @@ services:
     restart: always
     volumes:
       - frontend:/app
-    expose:
-      - '1212'
-    ports:
-      - 1212:1212
     networks:
       - matchaNetwork
     depends_on:
       - mysql
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.frontend.rule=Host(`localhost`)"
+      - "traefik.http.routers.frontend.entrypoints=web"
+      - "traefik.http.services.frontend.loadbalancer.server.port=1212"
 
 volumes:
   frontend:

frontend/src/components/RegisterForm.vue

@@ -75,7 +75,7 @@ async function handleSubmit() {
       )
     }
 
-    const req = await fetch(`http://${location.hostname}:3000/auth/register`, {
+    const req = await fetch(`https://${location.hostname}/api/auth/register`, {
       method: 'POST',
       body: form,
     })

frontend/src/plugins/socket.js

@@ -8,7 +8,7 @@ export function connectSocket() {
   if (!socket && isAuthenticated()) {
     const decoded = JSON.parse(atob(getToken().split('.')[1]))
 
-    socket = io(`${location.hostname}:3001`, {
+    socket = io(`${location.hostname}/ws`, {
       auth: {
         username: decoded.username,
         token: getToken(),

frontend/src/utils/api.js

@@ -69,7 +69,7 @@ export class Api {
       this.header('Authorization', `Bearer ${jwt}`)
     }
 
-    let res = await fetch(`http://${location.hostname}:3000/${this.path}`, {
+    let res = await fetch(`https://${location.hostname}/api/${this.path}`, {
       method: this.method,
       headers: this.headers,
       body: body != null ? JSON.stringify(body) : null,

frontend/src/views/EditProfileView.vue

@@ -41,7 +41,7 @@ onUnmounted(async () => {
 
   formData.append('_method', 'put')
 
-  fetch(`http://${location.hostname}:3000/users/me`, {
+  fetch(`https://${location.hostname}/api/users/me`, {
     method: 'POST',
     body: formData,
     headers: { Authorization: `Bearer ${localStorage.jwt}` },