reactjs - 使用 docker compose 时如何正确构建我的客户端？

Question

经过一周左右的阅读后，我一直在尝试使用 docker compose。
我有一个 docker compose 文件:

version: "3.8"

x-common-variables: &common-variables
  MYSQL_USER: root
  MYSQL_PASSWORD: MyPassWord
  MYSQL_DATABASE: wedding
  MYSQL_HOST_IP: 127.0.0.1
  REACT_APP_SERVER_PORT: 4000

services:
  mysql:
    image: mysql:latest
    environment:
      <<: *common-variables
      MYSQL_HOST: localhost
      MYSQL_ROOT_PASSWORD: root
    ports:
      - 3307:3307
    restart: unless-stopped
    volumes:
      - /wedding_Script2.sql:/docker-entrypoint-initdb.d/wedding_Script2.sql
  phpmyadmin:
    depends_on:
      - mysql
    image: phpmyadmin/phpmyadmin
    environment:
      PMA_HOST: mysql
    links:
      - mysql:mysql
    ports:
      - 8080:80
    restart: always
  server:
    build: ./weddingApp-Be
    depends_on:
      - mysql
    expose:
      - 4000
    environment:
      <<: *common-variables
      MYSQL_HOST_IP: mysql
      NODE_PATH: src
    ports:
      - 4000:4000
    volumes:
      - ./weddingApp-Be/src:/server
    links:
      - mysql
    command: npm run dev
  client:
    build: ./weddingApp-Fe
    image: nginx:alpine
    environment:
      <<: *common-variables
      NODE_PATH: src
    expose:
      - 3000
    ports:
      - 3000:3000
    volumes:
      - ./weddingApp-Fe/src:/index
    links:
      - server
    command: nginx, -g, daemon off

我的项目结构:

在weddingApp-Fe 我的dockerFile里面:

FROM node:12.2.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.0.1 -g --silent
COPY . /app
RUN npm run build

# production environment
FROM nginx:1.16.0-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]

当我做 docker compose build 时:

mysql uses an image, skipping
phpmyadmin uses an image, skipping
Building server
Step 1/8 : FROM node:10-alpine
 ---> 8e473595b853
Step 2/8 : RUN mkdir -p /app
 ---> Using cache
 ---> 19b56a37f612
Step 3/8 : WORKDIR /app
 ---> Using cache
 ---> 8dce08d04982
Step 4/8 : COPY package.json /app
 ---> Using cache
 ---> e5efea9d7cd2
Step 5/8 : COPY yarn.lock /app
 ---> Using cache
 ---> 94ed16d1b60f
Step 6/8 : COPY . /app
 ---> Using cache
 ---> 57942181ca20
Step 7/8 : RUN npm install
 ---> Using cache
 ---> cc6cf02a698f
Step 8/8 : CMD ["npm", "run dev"]
 ---> Using cache
 ---> 043145db7a94

Successfully built 043145db7a94
Successfully tagged weddingapp_server:latest
Building client
Step 1/12 : FROM node:12.2.0-alpine as build
 ---> f391dabf9dce
Step 2/12 : WORKDIR /app
 ---> Using cache
 ---> 33e6357adf78
Step 3/12 : ENV PATH /app/node_modules/.bin:$PATH
 ---> Using cache
 ---> 90bef54edec6
Step 4/12 : COPY package.json /app/package.json
 ---> Using cache
 ---> 92f7b7643519
Step 5/12 : RUN npm install --silent
 ---> Using cache
 ---> 912d5018ac08
Step 6/12 : RUN npm install react-scripts@3.0.1 -g --silent
 ---> Using cache
 ---> bec736fe9b8f
Step 7/12 : COPY . /app
 ---> Using cache
 ---> 29232568be7d
Step 8/12 : RUN npm run build
 ---> Using cache
 ---> 59219cc1e335

Step 9/12 : FROM nginx:1.16.0-alpine
 ---> ef04b00b089d
Step 10/12 : COPY --from=build /app/build /usr/share/nginx/html
 ---> Using cache
 ---> a5be9b459a1b
Step 11/12 : EXPOSE 3000
 ---> Using cache
 ---> 684c6b70aed5
Step 12/12 : CMD ["nginx", "-g", "daemon off;"]
 ---> Using cache
 ---> c38b886354d6

Successfully built c38b886354d6
Successfully tagged nginx:alpine

Problem:

之后我会做 docker compose up那就是当我收到以下错误时:

Removing weddingapp_client_1
weddingapp_mysql_1 is up-to-date
weddingapp_phpmyadmin_1 is up-to-date
weddingapp_server_1 is up-to-date
Recreating 5b9004354493_weddingapp_client_1 ... error

ERROR: for 5b9004354493_weddingapp_client_1  Cannot start service client: OCI runtime create failed: container_linux.go:349: starting container process caused "exec: \"nginx,\": executable file not found in $PATH": unknown

ERROR: for client  Cannot start service client: OCI runtime create failed: container_linux.go:349: starting container process caused "exec: \"nginx,\": executable file not found in $PATH": unknown
Encountered errors while bringing up the project.

我认为这是我的 nginx 的问题，但我不知道是什么。
编辑:
如果我改成 npm start在 docker-compose 的底部，然后我得到

ERROR: for weddingapp_client_1 Cannot start service client: OCI runtime create failed: container_linux.go:349: starting container process caused "exec: "npm": executable file not found in $PATH": unknown

ERROR: for client Cannot start service client: OCI runtime create failed: container_linux.go:349: starting container process caused "exec: "npm": executable file not found in $PATH": unknown

Answer 1

你告诉 Compose 用一些没有意义的东西覆盖命令:

command: nginx, -g, daemon off

这与在命令行中运行该命令具有相同的效果:逗号被解释为命令的一部分。
你实际上并不需要这个选项，因为 Dockerfile 有

CMD ["nginx", "-g", "daemon off;"]

这就是你想要它做的。
你可以同样删除expose:和 links: (在当今的 Docker 网络中没有用)和 volumes: (因为代码已经在您的图像中)。如果您是 build:你自己的形象，你也不想要image:命名公共(public) Docker Hub 镜像(您本地构建的镜像将覆盖该镜像，您会得到令人困惑的结果)，并且数据库地址可能不是 127.0.0.1(“此容器”)。您可能可以成功修剪 docker-compose.yml 的那部分归档到

client:
  build: ./weddingApp-Fe
  environment:
    MYSQL_USER: root
    MYSQL_PASSWORD: MyPassWord
    MYSQL_DATABASE: wedding
    MYSQL_HOST_IP: mysql
  ports:
    - 3000:3000

(如果你真的想覆盖 Dockerfile 中的命令，这里需要 YAML 列表语法 command: [nginx, -g, 'daemon off;']，但使用 Dockerfile 中的默认命令更好。)