0

Estoy aprendiendo a utilizar Docker con una aplicación React y su respectivo server, utilizo el siguiente articulo como referencia.

La parte del server funciona correctamente, todo perfecto. El problema viene cuando realizo la parte del frontend ya que, este compila correctamente pero cuando coloco http://localhost:3000 el navegador no me arroja nada (me dice que localhost rechaza la conexión).

Estructura del proyecto:

estructura

DOCKERFILE en la carpeta client donde contiene los archivos de react:

# Dockerfile for client

# Stage 1: build react client
FROM node

#  Working directory be app
WORKDIR /usr/app

COPY package*.json ./

# Install dependencies
RUN yarn install

#  Copy local files to app folder
COPY . .

EXPOSE 3000

CMD ["yarn", "start"]

Luego hago lo que dice el articulo:

  • Se construye el contenedor usando el comando

docker build -t myapp-react:v1 .

  • Se corre el contenedor usando el comando

docker run -it myapp-react:v1

  • Se verifica accediendo en el explorador a http://localhost:3000/ pero al llegar a este punto, ocurre el problema del navegador ya antes mencionado.

Esto me arroja la consola de docker:

(node:43) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /usr/app/node_modules/postcss-safe-parser/node_modules/postcss/package.json.

Update this package.json to use a subpath pattern like "./*".

(Use node --trace-deprecation ... to show where the warning was created)

consola docker

1 respuesta 1

1

Por lo que puedo ver debes mapear el puerto 3000 de tu pc local con el el 3000 del container. Para esto debes especificar -p 3000:3000 al hacer docker run.

Quedaria así: docker run -p 3000:3000 -it myapp-react:v1

Ahora sí puedes hacer en tu pc local http://localhost:3000

Incluso pudieras tener varios container corriendo a la misma vez y mapeado por puertos diferentes. por ejemplo:

//para la app 1

docker run -p 3001:3000 -it myapp-react:v1

//para la app 2

docker run -p 3002:3000 -it myapp-react:v1

Luego en tu navegador si quieres ver la app1 seria: http://localhost:3001 y para la app2 http://localhost:3002

1
  • Muchas gracias, con lo que dijiste se soluciono el 23 ago. 2021 a las 19:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.