README.md

Tetris

Basado en la https://mpirescarvalho.github.io/react-tetris/

demo 1 - como virtual machine

Habrimos un docker dentro a modo de maquina virtual

docker run -it --rm ubuntu:latest /bin/bash

Una vez dentro vamos a clonarnos el repo y hacer el build y run del proyecto

cd /tmp
git clone https://github.com/mpirescarvalho/react-tetris/
# falla por no tener git
apt install git
# falla por los sources
apt update
apt install git
git clone https://github.com/mpirescarvalho/react-tetris/
cd react-tetris

# sabemos de que es el repo, node + npm
apt install nodejs npm
# ahora ya no falla porque tenemos los sources

npm install
npm run build

npm start
# arrancado pero no vemos nada...

hacemos lo mismo pero compartiendo el puerto 3000

docker run -it --rm -p 3000:3000 ubuntu:latest /bin/bash

cd /tmp
apt update
apt install git nodejs npm

git clone https://github.com/mpirescarvalho/react-tetris/
cd react-tetris

npm install
npm run build

npm start
# abrimos el navegador en localhost:3000

Ahora ya lo vemos en el navegador.

Ahora paramos la ejecución, dumpeamos el history y salimos

history > /tmp/history.txt
exit

Vamos a intentar hacer esto reproducible con un Dockerfile

FROM ubuntu:latest

RUN apt update
RUN apt install -y git nodejs npm
WORKDIR /tmp
RUN git clone https://github.com/mpirescarvalho/react-tetris/
WORKDIR /tmp/react-tetris
RUN npm install
RUN npm run build
CMD [ "npm", "start" ]

Hacemos build de la imagen de docker:

docker build -t tetris .

Y la ejecutamos:

docker run -it --rm -p 3000:3000 tetris

demo 2 - reduciendo capas

Vamos a hacer lo mismo, unificando tags comunes para reducir el tamaño de la imagen reduciendo el número de capas.

FROM ubuntu:latest

RUN apt update && apt install -y nodejs npm
COPY . /tmp/react-tetris
RUN npm install && npm run build
CMD [ "npm", "start" ]

demo 3 - from node

FROM node:16

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json (or yarn.lock) to the container
COPY package*.json ./

# Install project dependencies
RUN npm install

# Copy the rest of the application code to the container
COPY . .

# Build the React app
RUN npm run build

# Start the React app when the container starts
CMD [ "npm", "start" ]

EXPOSE 3000 es solo informativo, no hace falta para que funcione el contenedor. Pero es útil para documentar que el contenedor escucha en ese puerto. Aunque si pones en docker run -P ... el puerto se mapea automáticamente.

demo 4 - from node alpine

# Use the official Node.js 16 image as the base image
FROM node:16-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json (or yarn.lock) to the container
COPY package*.json ./

# Install project dependencies
RUN npm install

# Copy the rest of the application code to the container
COPY src/ src/
COPY public/ public/

# Build the React app
RUN npm run build

# Start the React app when the container starts
CMD [ "npm", "start" ]

demo 5 - multi-stage build

TBC