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

Posted 2023-03-04

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

【英文标题】：static/js/main.89d5e2e7.chunk.js net::ERR_ABORTED 404 (Not Found) unless I delete docker image before re-building

【发布时间】：2021-11-23 11:11:49

【问题描述】：

我正在尝试使用 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;
    

【参考方案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 使用旧的缓存层）：

清除浏览器缓存

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

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

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

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

【讨论】：

谢谢！这行得通。我用docker-compose -f docker-compose.prod.yml down --volume --rmi all + yes | docker image prune -a + docker rmi -f $(docker images -a -q) + docker volume rm $(docker volume ls -q)