如何在 docker-compose 中制作 React 应用程序？构建步骤完成后容器正在退出

Posted 2023-02-22

【中文标题】如何在 docker-compose 中制作 React 应用程序？构建步骤完成后容器正在退出

【英文标题】：How do I make a react app in docker-compose? Container is exiting after build steps are complete

【发布时间】：2020-12-20 18:39:03

【问题描述】：

我正在尝试在 docker-compose 中制作一个简单的反应应用程序。我正在使用这个reference 我所做的是运行npx create-react-app frontend 来生成默认的反应应用程序。然后我添加了 Dockerfile。这都在一个目录frontend。

#Dockerfile

FROM node:14.9

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# add app
COPY . ./

# start app
CMD ["npm", "start"]

在上面的目录中，我有我的 docker-compose

#docker-compose.yml

version: '3.7'

services:

  frontend:
    container_name: frontend
    build: ./frontend
    volumes:
      - './frontend:/app'
      - '/app/node_modules'
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true

我运行 docker-compose up --build 并在正常构建过程后收到此消息。

docker-compose up --build
Building frontend
Step 1/9 : FROM node:14.9
 ---> 1b2c72215052
Step 2/9 : WORKDIR /app
 ---> Using cache
 ---> 2bab04404275
Step 3/9 : ENV PATH /app/node_modules/.bin:$PATH
 ---> Using cache
 ---> ff4ce5f5ec47
Step 4/9 : COPY package.json ./
 ---> Using cache
 ---> b1d25c0b6c05
Step 5/9 : COPY package-lock.json ./
 ---> Using cache
 ---> 5b829feaf00d
Step 6/9 : RUN npm install --silent
 ---> Using cache
 ---> 835367c47253
Step 7/9 : RUN npm install react-scripts@3.4.1 -g --silent
 ---> Using cache
 ---> 015ccb2db237
Step 8/9 : COPY . ./
 ---> Using cache
 ---> e4a5285339b5
Step 9/9 : CMD ["npm", "start"]
 ---> Using cache
 ---> 3f91b16d34d6

Successfully built 3f91b16d34d6
Successfully tagged projectname_frontend:latest
Recreating frontend ... done
Attaching to frontend
frontend    |
frontend    | > frontend@0.1.0 start /app
frontend    | > react-scripts start
frontend    |
frontend    | ℹ ｢wds｣: Project is running at http://172.29.0.2/
frontend    | ℹ ｢wds｣: webpack output is served from
frontend    | ℹ ｢wds｣: Content not from webpack is served from /app/public
frontend    | ℹ ｢wds｣: 404s will fallback to /
frontend    | Starting the development server...
frontend    |
frontend exited with code 0

似乎容器只是退出而没有错误消息。我不知道是什么原因造成的。 Docker version 19.03.12, build 48a66213fe

值得注意的是，在过去的几个月里，在没有以下解决方案的情况下，我已经能够成功构建我的 react 应用程序。对解决方案中给出的命令的需求直到最近才成为我的一个问题。

【参考方案1】：

这个简单的Dockerfile 总是对我有用：

FROM node:10
 
WORKDIR /usr/src/app
 
COPY package*.json ./
 
RUN npm install
 
COPY . .
 
EXPOSE 8083
 
CMD [ "npm", "start" ]

我还想在docker-compose.yml 中的容器中添加stdin_open: true。

【参考方案2】：

我想我解决了这个问题。将stdin_open: true 添加到 docker-compose.yml 是解决方案的一半。我还添加了command: npm start。在此之后，容器停止退出。我认为 Dockerfile 中的命令就足够了。它现在似乎可以工作了。

docker-compose.yml

version: '3.7'

services:

  frontend:
    container_name: frontend
    build: ./frontend
    volumes:
      - './:/app'
      - '/app/node_modules'
    ports:
      - 3000:3000
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: npm start

Dockerfile

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

【讨论】：

谢谢 - 工作 - 简单的解决方案 - usepolling on true 是什么意思？

github.com/paulmillr/chokidar#performance 这个有解释。我最终没有在生产应用程序中将其设置为 true

【参考方案3】：

version: "3.8"
services:
  frontend:
    build: .
    container_name: your-container-name
    ports: 4300:4300
    volumes: 
      - ./src:/app/src
      - ./public/assets:/app/public/assets
      - /app/node_modules
    stdin_open: true
    tty: true
    env-file:
      - location/to/your/env-file