码头工人复制和快速包装json到同一个世界

Question

我刚开始使用docker，我有一个带有package.json的快捷服务器文件夹和一个带有package.json的客户端文件夹。我见过很多教程，其中有两个单独的映像/容器，一个客户端和一个服务器。他们都有相同的世界

WORKDIR /app
COPY ["package.json", "package-lock.json", "./"]

这不是覆盖一个package.json与另一个在相同的WORKDIR中看到的？

我的头在旋转，阅读着不同的教程。有人能让我直接站在这里吗。

这是我所遵循的教程之一，它对客户机和服务器https://towardsdatascience.com/deploying-a-react-nodejs-application-with-docker-part-i-of-ii-910bc6edb46e都具有相同的WORKDIR。

Answer 1

将图像视为系统的模板，将容器视为这些模板的实例。

如果你和我都从同一个制造商，同一个操作系统买了全新的电脑，我的/app会和你的/app一样吗？答案当然是否定的。

WORKDIR只是一个目录。如果您正在创建的系统需要已知的路径，那么它可能会很有帮助，但您可以随意命名它，但不希望将应用程序文件复制到系统目录(如/etc、/usr等)。

为了解决您正在构建的Express / React应用程序，我建议使用以下多阶段Dockerfile来生成一个单一的生产图像

## Build stage
FROM node:16-alpine AS build
ENV NODE_ENV=production

WORKDIR /client

COPY client/package*.json ./

RUN npm install

COPY client ./

RUN npm run build

## App stage
FROM node:16-alpine AS app
ENV NODE_ENV=production

WORKDIR /app

COPY server/package*.json ./

RUN npm install

COPY server ./

# Copy the built React app into your static files dir, eg "public"
COPY --from=build /client/build ./public

RUN npm start

对于本地开发，如果您想使用Docker，我建议您使用这个组合设置

# dev.Dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
CMD npm start

# docker-compose.yml
version: '3.8'
services:
  client:
    build:
      context: ./client
      dockerfile: ../dev.Dockerfile
    volumes:
      - "./client:/app"
      - "/app/node_modules" # don't overwrite node_modules
    ports:
      - "3000:3000" # adjust accordingly
  server:
    build:
      context: ./server
      dockerfile: ../dev.Dockerfile
    volumes:
      - "./server:/app"
      - "/app/node_modules"
    ports:
      - "5000:5000" # adjust accordingly

确保您的代理请求从您的反应应用到服务器。在client/package.json中，添加

"proxy": "http://server:5000"

请参阅this answer，以帮助理解此类应用程序的开发模式和生产模式之间的差异。

要运行它，只需执行

docker compose up

然后在浏览器中打开http://localhost:3000。由于proxy配置在dev中，并且让Express在prod中静态地为文件提供服务，React应用程序可以使用只路径的URL向您的快捷API发出请求，例如

axios.post("/api/login", { username, password });