deploiement: reverse proxy nginx pour rediriger les requetes au front ou back suivant url

docker-compose.yaml

@@ -1,19 +1,18 @@
 services:
-  front:
+  reverse_proxy:
+    build: ./proxy
     ports:
-        - "3000:3000"
+      - "80:80"
+    restart: always
+
+  front:
     build: ./traque-front
     restart: always
 
   back:
     build: ./traque-back
-    ports:
-      - "3001:3001"
     restart: always
     environment:
       ADMIN_PASSWORD: 'traquebdsbanger'
       HOST: '0.0.0.0'
-      PORT: 3001
+      PORT: 3001
-      #Those files need to exist in traque-back/ssl for https to work
-      SSL_KEY: "ssl/privkey.pem"
-      SSL_CERT: "ssl/cert.pem"

proxy/Dockerfile

@@ -0,0 +1,7 @@
+# nginx/Dockerfile
+
+FROM nginx:alpine
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 80

proxy/nginx.conf

@@ -0,0 +1,26 @@
+# nginx/nginx.conf
+events {
+    worker_connections 1024;
+}
+
+http {
+    server {
+        listen 80;
+        location / {
+            proxy_pass http://front:3000/;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        }
+
+        location /back/ {
+            proxy_pass http://back:3001/;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_set_header Host $host;
+        }
+    }
+}

traque-back/index.js

@@ -1,4 +1,4 @@
-import { createServer } from "https";
+import { createServer } from "http";
 import express from "express";
 
 import { Server } from "socket.io";
@@ -14,19 +14,16 @@ const PORT = process.env.PORT;
 
 export const app = express()
 
-const httpsServer = createServer({
+const httpServer = createServer({}, app);
-  key: readFileSync(process.env.SSL_KEY, 'utf-8'),
-  cert: readFileSync(process.env.SSL_CERT, 'utf-8')
-}, app);
 
-httpsServer.listen(PORT, HOST, () => {
+httpServer.listen(PORT, HOST, () => {
-  console.log(`Server running`);
+  console.log("Server running on http://" + HOST + ":" + PORT);
 });
 
 
 
 //set cors to allow all origins
-export const io = new Server(httpsServer, {
+export const io = new Server(httpServer, {
   cors: {
     origin: "*",
     methods: ["GET", "POST"]
@@ -35,4 +32,4 @@ export const io = new Server(httpsServer, {
 
 initAdminSocketHandler();
 initTeamSocket();
-initPhotoUpload();
+initPhotoUpload();

traque-front/components/admin/teamEdit.jsx

@@ -12,8 +12,13 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
     const teamImage = useRef(null);
     const [newTeamName, setNewTeamName] = React.useState('');
     const { updateTeam, getTeamName, removeTeam, getTeam, teams } = useAdmin();
-    const [team, setTeam] = useState({})
+    const [team, setTeam] = useState({});
-    const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
+    var protocol = "https://";
+    if (process.env.NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+        protocol = "http://";
+    }
+    const SERVER_URL = protocol + process.env.NEXT_PUBLIC_SOCKET_HOST + "/back";
+    console.log(SERVER_URL);
 
     useEffect(() => {
         let team = getTeam(selectedTeamId);

traque-front/components/team/enemyTeamModal.jsx

@@ -17,7 +17,12 @@ export function EnemyTeamModal({ visible, onClose }) {
         imageRef.current.src = SERVER_URL + "/photo/enemy?team=" + teamId.toString() + "&t=" + new Date().getTime();
     }
 
-    const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
+    var protocol = "https://";
+    if (process.env.NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+        protocol = "http://";
+    }
+    const SERVER_URL = protocol + process.env.NEXT_PUBLIC_SOCKET_HOST + "/back";
+    console.log(SERVER_URL);
     return (visible &&
         <>
             <div className='fixed w-screen h-screen bg-black bg-opacity-50 z-10 text-center'></div>

traque-front/components/team/waitingScreen.jsx

@@ -8,7 +8,12 @@ export function WaitingScreen() {
     const { name, teamId  } = useGame();
     const { gameSettings } = useTeamContext();
     const imageRef = useRef(null);
-    const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
+    var protocol = "https://";
+    if (process.env.NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+        protocol = "http://";
+    }
+    const SERVER_URL = protocol + process.env.NEXT_PUBLIC_SOCKET_HOST + "/back";
+    console.log(SERVER_URL);
 
     function sendImage() {
         let data = new FormData();

traque-front/context/socketContext.jsx

@@ -3,12 +3,21 @@ import { createContext, useContext, useMemo } from "react";
 
 const { io } = require("socket.io-client");
 
-const SOCKET_URL = 'wss://' + process.env.NEXT_PUBLIC_SOCKET_HOST + ':' + process.env.NEXT_PUBLIC_SOCKET_PORT;
+var proto = "wss://";
+if (process.env.NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+    proto = "ws://";
+}
+const SOCKET_URL = proto + process.env.NEXT_PUBLIC_SOCKET_HOST;
 const USER_SOCKET_URL = SOCKET_URL + "/player";
 const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
 
-export const teamSocket = io(USER_SOCKET_URL);
+export const teamSocket = io(USER_SOCKET_URL, {
-export const adminSocket = io(ADMIN_SOCKET_URL);
+    path: "/back/socket.io",
+});
+export const adminSocket = io(ADMIN_SOCKET_URL, {
+    path: "/back/socket.io",
+});
+
 export const SocketContext = createContext();
 
 export default function SocketProvider({ children }) {