使用DOCKER的React App给出-sh：react-scripts：未找到

ej83mcc0 于 2023-08-03 发布在 Docker

关注(0)|答案(1)|浏览(126)

我试图构建一个Dockeraized React应用程序。
Docker配置如下所示

docker/Dockerfile.dev

# Stage 1: Build React app
FROM node:18.13.0-alpine as build-stage
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install -g npm@9.8.0
COPY . ./
RUN npm run build
EXPOSE 3000

CMD ["npm","run","start"]

字符串

docker-compose.yml

version: "3"

services:
  tmf-dev:
    container_name: tmf-dev
    build:
      context: .
      dockerfile: ./docker/Dockerfile.dev
    ports:
      - "9001:3000"
    volumes:
      - .:/app
    restart: unless-stopped

volumes:
  app:

型

package.json

{
  "name": "tmf",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

型

docker-compose build --no-cache命令运行良好。它成功地构建了容器，没有任何错误。

但是当我运行docker-compose up时，它给出了下面的输出-

Creating network "turf-management-frontend_default" with the default driver
Creating tmf-dev ... done
Attaching to tmf-dev
tmf-dev    | 
tmf-dev    | > tmf@0.1.0 start
tmf-dev    | > react-scripts start
tmf-dev    | 
tmf-dev    | sh: react-scripts: not found

型
我已经尝试了solves在这里，但没有结果。

docker

来源：https://stackoverflow.com/questions/76796937/react-app-using-docker-gives-sh-react-scripts-not-found

1条答案

按热度按时间

rxztt3cl1#

主要问题是你的服务中的卷部分。当您的容器被创建时，这个卷将首先准备好。因此，在你的dockerfile中，你执行npm安装，当容器创建时，你用的内容覆盖容器中的“app”文件夹。（项目文件夹的根目录）。
假设您有以下项目：

|-app
|   |-public (Folder containing the index.tml etc...)
|   |-src    (Folder containing App.js etc...)
|   |-package.json
|   |-package-lock.json
|-docker
|   |-Dockerfile.dev
|-docker-compose.yaml

字符串
你的docker-compose.yaml看起来像这样：

version: "3"

services:
  tmf-dev:
    build:
      context: .
      dockerfile: ./docker/Dockerfile.dev
    ports:
      - "3030:3000"
    volumes:
      - ./app/:/app/

型
你的Dockerfile.dev看起来像这样：

# Stage 1: Build React app
FROM node:18.13.0-alpine as build-stage
WORKDIR /app
RUN npm install -g npm@9.8.1
CMD ["tail","-F","Something"]

型
然后，您可以转到项目根文件夹并执行：

docker-compose up -d

型
这将启动容器并全局安装npm 9.8.1。
命令tail -F Something将使您的容器不会再次直接退出。
现在运行：

docker-compose exec tmf-dev npm install

型
这将在项目中创建node_modules文件夹并安装所需的依赖项。
然后，您可以使用以下命令构建应用程序：

docker-compose exec tmf-dev npm run build

型
并启动应用程序：

docker-compose exec tmf-dev npm run start

型
不需要在Dockerfile中暴露端口3000。相反，您在docker-compose文件中拥有portmapping。将本地端口3030Map到容器端口3000。
现在，您应该能够在http://127.0.0.1:3030上访问您的应用
如果您在浏览器中运行应用程序，在npm run start之后指定的ip为“On Your Network”，那么如果您在/app/src/App. js中进行更改，则在保存时会自动重新加载页面。

提示：

如果您跑步：

docker-compose exec tmf-dev /bin/sh

型
然后您将登录到容器。这只在容器运行时起作用。在这里，你可以更好地了解正在发生的事情。

赞(0）回复(0）举报 2023-08-03

我来回答

使用DOCKER的React App给出-sh：react-scripts：未找到

1条答案

相关问题

热门标签

最新问答