[Docker] Docker环境中无法进行热重载

2 年 ago

逸, 科

1 minute

在以前我写的一篇文章中，当我在进行开发时，热重载突然无法使用了。
而且，即使重新加载也无法反映修改…
由于将开发环境迁移到了Docker后，就出现了这种情况，所以原因应该是在Docker中。因此，我进行了调查和修复。

It depends on the specific context and what the original sentence is referring to. However, here is one possible paraphrase in Chinese:

缘由

原因非常简单。在Dockerfile中，通过构建代码并创建静态文件，然后将静态文件复制到Nginx容器中进行了一系列步骤。由于浏览器中显示的是Nginx容器内的文件，所以无论代码进行多少修改都不会反映出来。当然会这样嘛。。。

FROM node:21-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
ENV NODE_OPTIONS=--openssl-legacy-provider
RUN npm install
COPY . ./
# 原因1
RUN npm run build

FROM nginx:alpine
# 原因2
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

修改內容

为了实现热重载，只需要在不进行源代码构建的情况下，通过npm start来运行项目即可。然而，在生产环境中，最好将静态文件放置在Nginx中（用于文件大小压缩和性能优化）。因此，我决定创建docker-compose文件，并进行多阶段构建。

・修订后的Dockerfile

# development stage
FROM node:21-alpine AS dev
WORKDIR /app
COPY package.json package-lock.json ./
ENV NODE_OPTIONS=--openssl-legacy-provider
RUN npm install
COPY . ./
CMD ["npm", "start"]

# build stage
FROM dev AS build
RUN npm run build

# production stage
FROM nginx:alpine AS prod
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml 的中文释义为「Docker 组合」或「Docker 组合档」。

version: '3'
services:
  front:
    build: 
      context: .
      #　ここ重要
      target: dev
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - "${PORT_MAPPING}"
    environment:
      - NODE_ENV=${NODE_ENV}

控制方法

Dockerfile执行的内容如下。
在开发环境中，使用命令控制执行1步骤，在生产环境中执行1到3步骤。

将静态文件复制到Nginx中

想要创建与实际使用相符的图像时，请在选项中指定prod。
通过这样做，即可执行上述1至3步骤。

docker build --target prod .

在开发环境中，只需要运行docker-compose up即可。

docker-compose up