Adjusted docker files and corrected react fetches to pull from nginx /api

Author: EnderHubris

.gitignore

@@ -11,6 +11,7 @@ backend/challenge_archives/*.zip
 .DS_Store
 .env
 .env.*
+/docker/.env
 
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -19,7 +19,7 @@ npm install .
 npm start
 ```
 
-Move the `.env` file into the project root directory, then run the following to run the backend locally.
+Move the web related `.env` file into the project root directory, then run the following to run the backend locally.
 ```bash
 nodejs backend/server.mjs
 ```
@@ -28,14 +28,18 @@ nodejs backend/server.mjs
 This project uses Docker :whale: for production set-up
 ```bash
 sudo apt update && sudo apt install docker.io docker-compose
+# The Docker building process uses the build result
+# from `npm run build` the build will fail if build does not exist
+npm run build
 ```
 The following commands will build the docker via compose which builds the multi-docker system.
+You will also need to move the docker related `.env` into the docker folder (dir of Dockerfile) before running the following:
 ```bash
 cd docker
 docker network create traefik
 docker-compose -p khi up --build
 ```
-The following commands will build ONLY the khi website docker.
+The following commands will build ONLY the khi website docker image that you later start via `docker run -d ...`.
 ```bash
 docker build -f docker/Dockerfile -t image_name .
 docker run -d -p 8080:80 --name docker_name image_name

backend/db.mjs

@@ -12,9 +12,10 @@ function MongoURI() {
     const db_pass = process.env.DB_PASS;
     const db_name = process.env.DB_NAME;
 
-    return "mongodb://" + db_user + ":" + db_pass + "@localhost:27017/" + db_name;
+    return "mongodb://" + db_user + ":" + db_pass + "@khi_db:27017/" + db_name + "?authSource=admin";
 }
 
+console.log(`[*] Attempting to Connect to: ${MongoURI()}`);
 // Connect to MongoDB
 mongoose.connect(MongoURI()).then(() => {
     console.log('Connected to MongoDB');

backend/server.mjs

@@ -67,16 +67,16 @@ const app = express();
 #################################################################
 */
 const host = "0.0.0.0"
-const port = process.env.REACT_APP_BACKEND_PORT;
+const port = 4000;
 
 // Allows data to be sent from post requests
 app.use(express.urlencoded({ extended: true }));
 app.use(express.json()); // middleware to handle JSON
 app.use(cookieParser()); // Access cookies
 
 const allowedOrigins = [
-    `http://localhost:${process.env.FRONT_END_PORT}`,                  // local dev
-    `http://${process.env.LAN_HOST}:${process.env.FRONT_END_PORT}`,   // LAN live frontend
+    `http://localhost:80`,                  // local dev
+    `http://localhost:8080`,
     // 'https://khi.io'                     // production site
 ];
 

docker/Dockerfile

@@ -1,7 +1,7 @@
 FROM nginx:latest
 WORKDIR /
 
-# setup for mongo container:
+# setup for mongo container manually:
 # docker run -d --name khi_db -e MONGO_INITDB_ROOT_USERNAME=env.user -e MONGO_INITDB_ROOT_PASSWORD=env.password -e MONGO_INITDB_DATABASE=env.db -v mongodb_data:/data/db -p 27017:27017 mongo:latest
 RUN apt-get update && apt-get install -y supervisor sudo nodejs npm net-tools
 

docker/docker-compose.yml

@@ -4,11 +4,12 @@ services:
     container_name: khi_db
     restart: always
     environment:
-      - MONGO_INITDB_ROOT_USERNAME=dbu
-      - MONGO_INITDB_ROOT_PASSWORD=YFt3fG6wWYJJx8Rj9NssVVmF
+      - MONGO_INITDB_ROOT_USERNAME=${DB_USER}
+      - MONGO_INITDB_ROOT_PASSWORD=${DB_PASS}
       - MONGO_INITDB_DATABASE=khi2025
     volumes:
       - db_data:/data/db
+      - ./init_mongo.sh:/docker-entrypoint-initdb.d/init.sh:ro
     healthcheck:
       test: ["CMD", "mongosh", "--eval", "db.adminCommand('ping')"]
       interval: 10s
@@ -27,7 +28,7 @@ services:
     ports:
       - "8080:80"
     environment:
-      - DATABASE_URL=mongodb://dbu:YFt3fG6wWYJJx8Rj9NssVVmF@khi_db:27017/khi2025
+      - DATABASE_URL=mongodb://${DB_USER}:${DB_PASS}@khi_db:27017/khi2025?authSource=admin
       - ORIGIN=http://0.0.0.0:80
     labels:
       - "traefik.enable=true"

docker/init_mongo.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+username="admin" # OPTIONAL to change
+password="admin" # CHANGE THIS IN PRODUCTION
+salt="" # SALT .env
+hashed=$(echo -n "${salt}${password}" | sha256sum | awk '{print $1}')
+
+mongosh -u "$MONGO_INITDB_ROOT_USERNAME" -p "$MONGO_INITDB_ROOT_PASSWORD" --authenticationDatabase admin "$MONGO_INITDB_DATABASE" <<EOF
+db.admins.insertOne({
+  username: "$username",
+  password: "$hashed",
+  isProtected: true,
+  created_at: new Date()
+});
+EOF > /root/init_mongo.log

src/components/admin_navbar.js

@@ -1,14 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom'; // needed to interact with the React App BrowserRouter
 
-function GetBackendHost() {
-  const BACKEND_HOST = process.env.REACT_APP_BACKEND_HOST;
-  const BACKEND_PORT = process.env.REACT_APP_BACKEND_PORT;
-  return `${BACKEND_HOST}:${BACKEND_PORT}`;
-}
-
 async function LogoutAdmin() {
-  const response = await fetch(`http://${GetBackendHost()}/admin/logout`, {
+  const response = await fetch(`/api/admin/logout`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -35,7 +29,7 @@ const HandleLogout = async (event) =>  {
 
 async function VerifyAdminSession() {
   try {
-    const response = await fetch(`http://${GetBackendHost()}/admin/verify`, {
+    const response = await fetch(`/api/admin/verify`, {
       method: "GET",
       credentials: 'include'
     });
@@ -94,4 +88,4 @@ function AdminNavbar() {
 }
 export default AdminNavbar;
 
-export { VerifyAdminSession, LogoutAdmin, GetBackendHost };
+export { VerifyAdminSession, LogoutAdmin };

src/components/leader_view.js

@@ -2,11 +2,11 @@ import '../App.css';
 import showPasswordPrompt from '../components/prompt.js';
 
 const LeaderView = ({ TEAM_DATA, UpdateTeamName, newTeamName,
-                      SetNewTeamName, BackendHost, SetTeamUpdateMsg }) => {
+                      SetNewTeamName, SetTeamUpdateMsg }) => {
 
   const RemoveMember = async (member_name) => {
     try {
-      const response = await fetch(`http://${BackendHost}/team/remove-member`, {
+      const response = await fetch(`/api/team/remove-member`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
@@ -34,7 +34,7 @@ const LeaderView = ({ TEAM_DATA, UpdateTeamName, newTeamName,
   };
   const AddMember = async (req_id, checksum) => {
     try {
-      const response = await fetch(`http://${BackendHost}/team/add-member`, {
+      const response = await fetch(`/api/team/add-member`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
@@ -65,7 +65,7 @@ const LeaderView = ({ TEAM_DATA, UpdateTeamName, newTeamName,
 
   const LeaderLeaving = async (passwd) => {
     try {
-      const response = await fetch(`http://${BackendHost}/team/replace-leader`, {
+      const response = await fetch(`/api/team/replace-leader`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"

src/components/navbar.js

@@ -1,14 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom'; // needed to interact with the React App BrowserRouter
 
-function GetBackendHost() {
-  const BACKEND_HOST = process.env.REACT_APP_BACKEND_HOST;
-  const BACKEND_PORT = process.env.REACT_APP_BACKEND_PORT;
-  return `${BACKEND_HOST}:${BACKEND_PORT}`;
-}
 
 async function LogoutUser() {
-  const response = await fetch(`http://${GetBackendHost()}/logout`, {
+  const response = await fetch(`/api/logout`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -37,7 +32,7 @@ const HandleLogout = async (event) =>  {
 async function VerifySession() {
   // ask the backend if this session is valid
   try {
-    const response = await fetch(`http://${GetBackendHost()}/user/verify`, {
+    const response = await fetch(`/api/user/verify`, {
       method: "GET",
       credentials: 'include'  // ensures cookies are sent
     });
@@ -113,4 +108,4 @@ function Navbar() {
 }
 export default Navbar;
 
-export { VerifySession, LogoutUser, GetBackendHost };
+export { VerifySession, LogoutUser };