# PRACTICA: Creando una web de emulación de juegos con docker-compose

<mark style="color:red;">**Objetivos:**</mark>

* <mark style="color:red;">Desplegar el servicio online para todos</mark>
* <mark style="color:red;">¿se puede hacer un proxy para cada plataforma? -> necesitamos varios servicios a la vez?</mark>
  * <mark style="color:red;">Plataforma PS1</mark>
  * <mark style="color:red;">Plataforma NES</mark>
* &#x20;<mark style="color:red;">Modificar el index.html a un estilo propio</mark>
* <mark style="color:red;">Todo con docker-compose</mark>

#### **Pasos para montar un servidor de EmulatorJS con Docker Compose**

1. **Prepara los archivos necesarios**:
   * Descarga el paquete de EmulatorJS o clona el repositorio desde <https://github.com/ethanaobrien/emulatorjs>.
   * Crea un directorio para tus ROMs (por ejemplo, `roms/`) y colócalos allí.
   * Asegúrate de que tienes Docker y Docker Compose instalados.

***

2. **Crea un `Dockerfile` para EmulatorJS**: Crea un archivo `Dockerfile` para alojar los archivos del servidor web:

   ```dockerfile
   FROM nginx:alpine

   # Copia los archivos de EmulatorJS al directorio del servidor web
   COPY ./emulatorjs /usr/share/nginx/html

   # Expone el puerto del servidor
   EXPOSE 80

   CMD ["nginx", "-g", "daemon off;"]
   ```

   * Este archivo usa **NGINX** como servidor web para alojar EmulatorJS.
   * Copia los archivos del proyecto EmulatorJS al directorio donde NGINX los puede servir (`/usr/share/nginx/html`).

***

3. **Estructura del proyecto**: Asegúrate de que la estructura del proyecto sea similar a esta:

   ```bash
   emulatorjs-docker/
   ├── Dockerfile
   ├── docker-compose.yml
   ├── emulatorjs/         # Archivos de EmulatorJS
   │   ├── index.html
   │   ├── ...
   ├── roms/               # Carpeta para tus ROMs
   │   ├── game1.nes
   │   ├── game2.snes
   ```

***

4. **Crea un archivo `docker-compose.yml`**: Aquí está un ejemplo de archivo `docker-compose.yml` para configurar el servidor EmulatorJS:

   ```yaml
   version: '3.8'

   services:
     emulatorjs:
       build:
         context: .
         dockerfile: Dockerfile
       container_name: emulatorjs-server
       ports:
         - "8080:80" # Mapea el puerto 8080 del host al puerto 80 del contenedor
       volumes:
         - ./roms:/usr/share/nginx/html/roms # Monta la carpeta de ROMs
       restart: always
   ```

   * **`build:`**: Especifica que se debe construir la imagen Docker desde el Dockerfile.
   * **`ports:`**: El puerto `8080` en tu máquina local se conecta al puerto `80` del contenedor.
   * **`volumes:`**: Monta la carpeta local de ROMs (`./roms`) en el contenedor para que los juegos sean accesibles.

***

5. **Construye y ejecuta los contenedores**:

   * Navega al directorio donde está tu archivo `docker-compose.yml`.
   * Construye y levanta el servidor con los siguientes comandos:

     ```bash
     docker-compose up -d
     ```

   Esto construirá la imagen, iniciará el contenedor, y montará el servidor en `http://localhost:8080`.

***

6. **Accede al servidor EmulatorJS**:
   * Abre un navegador web e ingresa `http://localhost:8080`.
   * La interfaz de EmulatorJS debería cargarse.
   * Los ROMs estarán disponibles en la carpeta `/roms`. Si EmulatorJS no detecta automáticamente los juegos, edita los archivos de configuración (`games.js` o `index.html`) para que apunten a tus ROMs.

Referencias:

{% embed url="<https://hub.docker.com/r/linuxserver/emulatorjs>" %}

{% embed url="<https://youtu.be/Zv1cq0JhZfQ?si=Ef7RPGQM8iCBuTDL>" %}