static/js/main.89d5e2e7.chunk.js net::ERR_ABORTED 404 (Not Found) 除非我在重新构建之前删除 docker 映像

Question

我正在尝试使用 Docker 为 React 应用程序构建生产版本。当我对 React 进行更改并尝试使用 docker-compose up --build 重新构建时，我得到了 static/js/main.89d5e2e7.chunk.js net::ERR_ABORTED 404 (Not Found)。

但是，如果我在重新构建之前删除了原始 Docker 映像，则不会出现此错误。

同样，当我尝试将我的应用程序部署到 Elastic Beanstalk 时，如果我在推送新的 React Docker 映像后重建环境，它可以工作，但如果我只是重新部署而不重新构建，我会收到同样的错误同上。

我是否遗漏了一些非常明显的东西？似乎静态文件的位置可能在构建之间发生变化，如果我没有完全摆脱原始图像，它仍然指向（不存在的）文件。

这里是docker-compose.yml

services:
  django:
    build:
      context: ./backend
      dockerfile: Dockerfile
    volumes:
      - django_static_volume:/usr/src/app/static
      - ./backend/django_app:/usr/src/app/django_app
    expose:
      - 8000
    ports:
      - "8000:8000"
    env_file:
      - ./backend/.env
    command: gunicorn --reload mainapp.wsgi:application --bind 0.0.0.0:8000
  react:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      args:
        - API_SERVER=http://127.0.0.1
    volumes:
      - react_static_volume:/usr/src/app/build/static
    expose:
      - 3000
    env_file:
      - .env
    command: serve -s build -l 3000
    depends_on:
      - django

  nginx:
    restart: always
    build: ./nginx
    volumes:
      - django_static_volume:/usr/src/app/django_files/static
      - react_static_volume:/usr/src/app/react_files/static
    ports:
      - 80:80
    depends_on:
      - react

volumes:
  django_static_volume:
  react_static_volume:

这是反应应用Dockerfile：

###########
# BUILDER #
###########

# pull official base image
FROM node:12.18.3-alpine3.9 as builder

# set work directory
WORKDIR /usr/src/app

# install dependencies and avoid `node-gyp rebuild` errors
COPY ./react_app/package.json .
RUN apk add --no-cache --virtual .gyp \
        python \
        make \
        g++ \
    && npm install \
    && apk del .gyp

# copy our react project
COPY ./react_app .

# perform npm build
ARG API_SERVER
ENV REACT_APP_API_SERVER=${API_SERVER}
RUN REACT_APP_API_SERVER=${API_SERVER} \ 
  npm run build

#########
# FINAL #
#########

# pull official base image
FROM node:12.18.3-alpine3.9 

# set work directory
WORKDIR /usr/src/app

# install serve - deployment static server suggested by official create-react-app
RUN npm install -g serve

# copy our build files from our builder stage
COPY --from=builder /usr/src/app/build ./build

这里是 nginx Dockerfile:

FROM nginx:1.19.0-alpine

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d

WORKDIR /usr/src/app

这里是nginx.conf

upstream django_backend {
    server django:8000;
}

upstream react_frontend {
    server react:3000;
}

server {

    listen 80;

    ###########
    # URL ROUTING #
    ###########

    location /admin {
        proxy_pass http://django_backend;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location /api {
        proxy_pass http://django_backend;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location /patients {
        proxy_pass http://django_backend;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    ###########
    # STATIC FOLDER ROUTING #
    ###########

    location /static/admin/ {
        alias /usr/src/app/django_files/static/admin/;
    }

    location /static/rest_framework/ {
        alias /usr/src/app/django_files/static/rest_framework/;
    }

    location /static/ {
        alias /usr/src/app/react_files/static/;
    }

    location /media/ {
        alias /usr/src/app/media/;
    }

    ###########
    # URL ROUTING #
    ###########

    location / {
        proxy_pass http://react_frontend;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }


}

Answer 1

下面的错误信息我也有类似的问题

“/usr/src/app/react_files/static/js/main.ea4bd896.chunk.js”失败（2：没有这样的文件或目录）

当你运行“docker-compose up”时，会在 React 的构建版本中创建 chunk.js 文件。

当您的应用尝试从不再存在的先前容器中访问 c​​hunk.js 文件时，会出现上述错误（因为您运行了另一个“docker-compose up”并且因为您的新容器不包含旧文件你什么都看不到，一个空白页）

试试这个（所有这些都是因为 docker-compose 使用缓存图像层，而且很多时候问题是因为 docker-compose 使用旧的缓存层）：

1. 清除浏览器缓存

2. 使用docker-compose down -v关闭所有正在运行的容器

3. 使用 docker system prune --all 删除所有现有的 docker 容器和图像。如果没有全部删除，也可以试试docker rmi -f $(docker images -a -q)

4. 执行docker-compose up，（不使用--build）

以上对我有用，希望对你也有用。