使用docker compose运行typescript react应用时出错

uz75evzq  于 2023-05-16  发布在  Docker
关注(0)|答案(1)|浏览(135)

我想运行一个带有nodejs后端和create-react-app前端的typescript monorepo。首先,我试图让前端在容器中运行。应用程序在本地运行正常。
我想更改主机中的代码,并使容器中的代码自动更新。
当我运行docker-compose up -d时,我看到下面的错误。

> frontend@0.1.0 start
> react-scripts start

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

文件夹结构

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在尝试建议的解决方案后
version: "3.8"
services:
   frontend:
      builds: ./frontend
      ports:
       - '3000:3000'
      volumes:
       - './frontend:/app'
       - /app/node_modules
      stdin_open: true
      tty: true

运行docker-compose up -d后出现错误,容器日志显示

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

注意:奇怪的是,删除Dockerfile中的workdir会运行容器,但会将所有内容安装在顶层而不是/app目录中。当我完全删除卷时,容器也运行得很好(仍然是一个交易破坏者)。

edit2:我觉得这个问题与项目文件夹结构和路径有关。如果我将docker-compose文件放在frontend目录中,容器将服务于react应用程序,我可以在容器中编写自动更新的代码。
mklgxw1f

mklgxw1f1#

假设您的tsconfig.json文件在frontend中,它将不会出现在您的容器中,因此您将缺少关键部分,如

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

更典型的方法是卷装载整个应用程序目录,并创建一个匿名卷装载,以免损坏node_modules

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

相关问题