Skip to content

Latest commit

 

History

History
71 lines (43 loc) · 5.92 KB

ARCHITECTURE.md

File metadata and controls

71 lines (43 loc) · 5.92 KB

Project Architecture Overview

스크린샷 2024-02-07 오후 1 38 20

Frontend

JavaScript Three.js Bootstrap Webpack Socket.IO

  • Framework/Library: The frontend is built using vanilla JavaScript, leveraging several libraries for UI components and state management.

  • Single Page Application (SPA): The frontend implements SPA architecture for smooth user experiences without page reloads.

  • State Management: Implements a custom state management system with a Store pattern, similar to Redux or Vuex, located in srcs/frontend/src/store/index.js.

  • 3D Rendering: Three.js is used for 3D graphics, especially in the game canvas component (srcs/frontend/src/views/components/game/gameCanvas.js).

  • Styling: Utilizes Bootstrap for UI components and custom styles with CSS and SCSS. The project employs Webpack to compile SCSS to CSS.

  • Module Bundler: Webpack is configured for bundling JavaScript modules, as seen in srcs/frontend/webpack.config.js.

  • Internationalization: Features a custom implementation for language selection and dynamic text rendering based on the selected language.

Middleware

Nginx HTTPS

  • Reverse Proxy: Nginx serves as a reverse proxy, routing requests to the appropriate backend service, configured in srcs/middleware/conf/default.conf.
  • SSL/TLS: Nginx is configured to use SSL/TLS for secure HTTP communication, as shown in srcs/middleware/conf/default.conf.
  • Static File Delivery: Utilizes Docker volumes to serve static files directly from the frontend/dist directory without the need for rebuilding the middleware container. This is achieved by referencing the dist volume in both the frontend and middleware service definitions within the docker-compose.yml file, ensuring that the Nginx server within the middleware container can serve the latest frontend static files.

Backend

Python Django REST Framework Daphne HTTPS OAuth PostgreSQL Ethereum Solidity

  • Framework: The backend is powered by Django, a Python-based web framework, with settings and URL configurations in srcs/game/config/settings.py and srcs/game/config/urls.py.
  • Database: PostgreSQL is used for data storage, as specified in the docker-compose.yml configuration for the database service.
  • WebSocket Communication: Socket.IO is employed for real-time bidirectional event-based communication, indicated by the use of socket.io-client in srcs/frontend/src/store/actions/gameActionHandler.js.
  • Authentication with 42 OAuth : Implemented for user authentication, allowing login via external providers. The logic is encapsulated in srcs/game/users/views.py, particularly in the OAuthCallbackAPIView.
  • Blockchain Integration : Smartcontract with Ethereum blockchain for secure tournament log recording and retrieval.
  • SSL/TLS: Daphneis configured to use SSL/TLS for secure HTTP communication, as shown in srcs/game/tool/docker_entrypoint.sh.

Deployment and Development

Docker Compose

스크린샷 2024-02-07 오후 1 38 36
  • Containerization: Docker and Docker Compose are pivotal in creating isolated environments for both the frontend and backend, streamlining development and deployment processes. The Dockerfile and docker-compose.yml files detail the container configurations.

  • Static File Sharing: Frontend static files (JS, CSS) are generated in a dist directory, shared with the Nginx container via a named volume in docker-compose.yml. This ensures Nginx serves the latest static files without needing container rebuilds.

  • Bind Mounts for Development: docker-compose.yml supports bind mounts, linking host directories to containers. This allows immediate reflection of changes in the container, streamlining development by bypassing rebuilds for every update, crucial for rapid frontend development iterations.

services:
  django_game:
    volumes:
      - ./game:/game

  frontend:
    volumes:
      - ./frontend:/app