Docker将react和express包json复制到同一WORKDIR中

Question

我是docker的新手，我有一个包含package.json的express服务器文件夹和一个包含package.json的客户端文件夹。我看过很多教程，它们有两个独立的图像/容器——一个客户端和一个服务器。他们都有相同的WORKDIR

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

这是否会覆盖一个package.json和另一个package.json，因为它们位于同一WORKDIR中？

阅读不同的教程时，我的脑子都在转。有人能把我带到这儿来吗。

这是我正在学习的教程之一，它对客户端和服务器都有相同的WORKDIRhttps://towardsdatascience.com/deploying-a-react-nodejs-application-with-docker-part-i-of-ii-910bc6edb46e

Answer 1

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

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

WORKDIR只是一个目录。如果您正在创建的系统需要已知路径，但您可以根据自己的意愿对其进行命名，但您不想将应用程序文件复制到/etc、/usr等系统目录中的情况除外。

---

为了解决您正在构建的Express/Rect应用程序的问题，我建议使用以下多级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

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

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

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

要运行它，只需执行

docker compose up

然后在浏览器中打开http://localhost:3000。由于dev中的proxy配置以及Express在prod中静态服务文件，React应用程序可以使用路径URL(例如(向Express API发出请求

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