Búsqueda de sitios web

reactjs - Error al ejecutar una aplicación React con TypeScript usando Docker Compose

Quiero ejecutar un monorepo de TypeScript con un backend de Node.js y un frontend de Create React App. Primero estoy intentando poner en marcha el frontend en un contenedor. La aplicación funciona bien localmente.

Quiero cambiar el código en la máquina anfitriona y que el código en el contenedor se actualice automáticamente.

Cuando ejecuto docker-compose up -d veo el siguiente error.

> [email  start
> react-scripts start

Could not find a required file.
  Name: index.js
  Searched in: /app/src

estructura de carpetas

repo
 - backend
 - frontend
   - Dockerfile
   - build
   - public
   - src
     - index.tsx
 - docker-compose.yaml

DockerFile

FROM node
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

docker-compose.yaml

version: "3.8"
services:
   frontend:
      builds: ./frontend
      ports:
       - '3000:3000'
      volumes:
       - './frontend/src:/app/src'
      stdin_open: true
      tty: true
volumes:
   data:
   logs:
edit1: docker-compose.yaml después de probar la solución sugerida
version: "3.8"
services:
   frontend:
      builds: ./frontend
      ports:
       - '3000:3000'
      volumes:
       - './frontend:/app'
       - /app/node_modules
      stdin_open: true
      tty: true

error después de ejecutar docker-compose up -d los registros del contenedor muestran

ENOENT: no such file or directory, open 'app/package.json'

nota: Extrañamente, eliminar el workdir en el Dockerfile ejecuta el contenedor pero instala todo en el nivel superior y no en el directorio /app. Cuando elimino los volúmenes por completo, el contenedor también se ejecuta bien (aún así es un problema importante).

edit2: Siento que el problema tiene que ver con la estructura de carpetas y rutas del proyecto. Si coloco el archivo docker-compose en el directorio frontend, el contenedor sirve la aplicación React y los cambios de código locales se actualizan automáticamente en el contenedor.

Respuesta #1

Suponiendo que su archivo tsconfig.json esté en frontend, no estará presente en su contenedor, por lo que le faltarán partes cruciales como

"compilerOptions": {
  "jsx": "react-jsx"
}

Un enfoque más típico es montar en volumen todo el directorio de la aplicación y crear un montaje de volumen anónimo para no sobrescribir node_modules

volumes:
  - ./frontend:/app
  - /app/node_modules # anonymous volume mount

Artículos relacionados