Dockerizando una aplicación React

 Docker es una plataforma abierta que nos permite empaquetar y ejecutar una aplicación en una unidad de software llamado contenedor. 

En este post vamos a aprender como dockerizar una aplicación Reactjs utilizando docker-compose, que es una herramienta para definir y ejecutar aplicaciones multi-contenedores. Con Compose, configuras tu aplicación en un archivo YAML y con un solo comando, se crean e inician todos los contenedores que necesita tu aplicación.

Los pasos a seguir son:

1) Creamos el fichero Dockerfile:

FROM node
WORKDIR /usr/src/app

2) Creamos el fichero docker-compose.yml:

version: '3'
services:
  react-app:
    container_name: react_app
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      - NODE_ENV=development
    volumes:
      - ./:/usr/src/app
    command: sh -c 'yarn && yarn start'
    ports:
      - "3000:3000"
    tty: true

3) En un terminal, en el directorio donde hemos creado los dos ficheros, ejecutamos:

docker-compose up

Este comando crea y ejecuta los contenedores que hayas definido en el fichero docker-compose.yml. Sabrás que ha terminado de ejecutarse cuando veas:

Compiled successfully!

react_1  | 

react_1  | You can now view myapp in the browser.

react_1  | 

react_1  |   Local:            http://localhost:3000

react_1  |   On Your Network:  http://172.24.0.2:3000

react_1  | 

react_1  | Note that the development build is not optimized.

react_1  | To create a production build, use yarn build.

react_1  | 

Y voilá! Nuestra aplicación se estará ejecutando localmente en http://localhost:3000

Bonus Track:

Si todavía no tenéis vuestra aplicación React, podéis generarla ejecutando, en el mismo directorio dónde tenéis los ficheros Docker, lo siguiente:

docker-compose run --rm react sh -c 'npx create-react-app myapp --template typescript'

De momento, create-react-app no permite generar la aplicación en el directorio actual si el directorio no está vacío. Como nuestro directorio tiene ya nuestros dos ficheros, tenemos que generar la aplicación en un subdirectorio. Mientras que no arreglen este problema, tendríamos que copiar los dos ficheros dentro de la aplicación que se ha generado y listo ;)