Docker - 服务的 React 应用程序,asset-manifest.json 文件名不正确
Docker - served react app, asset-manifest.json with incorrect filenames
我是网络开发的新手,我 运行 遇到了一个奇怪的错误。
我有一个 React/Django 应用程序,我正在尝试使用 nginx 和 docker 进行生产。
Django 运行s 在 postgres 数据库上,nginx 只是将端口 80 重新路由到我的反应和 django 端口。
当我使用
在本地部署应用程序时
npm run build
serve -s build
一切如愿。
然而,通过 Docker 做同样的事情却不会。
我有一个构建 React 应用程序的 Docker 文件:
FROM node:12.18.3-alpine3.9 as builder
WORKDIR /usr/src/app
COPY ./react-app/package.json .
RUN apk add --no-cache --virtual .gyp \
python \
make \
g++ \
&& npm install \
&& apk del .gyp
COPY ./react-app .
RUN npm run build
FROM node:12.18.3-alpine3.9
WORKDIR /usr/src/app
RUN npm install -g serve
COPY --from=builder /usr/src/app/build ./build
现在当我使用
docker-compose build
docker-compose up
我看到我的 Django、React、Postgres 和 nginx 容器都是 运行ning,nginx 在端口 80 可见。当我在浏览器中打开 localhost 时,我看到 nginx 正在寻找一些静态反应正确目录中的文件。但是,它正在寻找的反应文件与静态文件具有不同的哈希值。 nginx 和 react 容器的静态文件是一样的。所以不知何故,我的 asset-manifest.json 包含错误的文件名。知道是什么原因造成的,或者我该如何解决这个问题?
编辑:添加了 docker-compose.yml:
version: "3.7"
services:
django:
build:
context: ./backend
dockerfile: Dockerfile
volumes:
- django_static_volume:/usr/src/app/static
expose:
- 8000
env_file:
- ./backend/.env
command: gunicorn core.wsgi:application --bind 0.0.0.0:8000
depends_on:
- db
db:
image: postgres:12.0-alpine
volumes:
- postgres_data:/var/lib/postgresql/data/
env_file:
- ./postgres/.env
react:
build:
context: ./frontend
dockerfile: Dockerfile
volumes:
- react_static_volume:/usr/src/app/build/static
expose:
- 5000
env_file:
- .env
command: serve -s build
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:
postgres_data:
django_static_volume:
react_static_volume:
您需要 运行 在单独的容器中进行 React 吗?这样做有什么理由吗? (可能是)
在我的方法中,我在 nginx Docker 文件中构建 React 静态文件,并将它们复制到 /usr/share/nginx/html
。然后 nginx 在 location /
.
提供它
nginx Docker文件
# The first stage
# Build React static files
FROM node:13.12.0-alpine as build
WORKDIR /app/frontend
COPY ./frontend/package.json ./
COPY ./frontend/package-lock.json ./
RUN npm ci --silent
COPY ./frontend/ ./
RUN npm run build
# The second stage
# Copy React static files and start nginx
FROM nginx:stable-alpine
COPY --from=build /app/frontend/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
nginx 配置文件
server {
listen 80;
server_name _;
server_tokens off;
client_max_body_size 20M;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
try_files $uri @proxy_api;
}
location /admin {
try_files $uri @proxy_api;
}
location @proxy_api {
proxy_set_header X-Forwarded-Proto https;
proxy_set_header X-Url-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://backend:8000;
}
location /django_static/ {
autoindex on;
alias /app/backend/server/django_static/;
}
}
Docker-撰写
version: '2'
services:
nginx:
restart: unless-stopped
build:
context: .
dockerfile: ./docker/nginx/Dockerfile
ports:
- 80:80
volumes:
- static_volume:/app/backend/server/django_static
- ./docker/nginx/development:/etc/nginx/conf.d
depends_on:
- backend
backend:
restart: unless-stopped
build:
context: .
dockerfile: ./docker/backend/Dockerfile
volumes:
entrypoint: /app/docker/backend/wsgi-entrypoint.sh
volumes:
- static_volume:/app/backend/server/django_static
expose:
- 8000
volumes:
static_volume: {}
请查看我的文章
Docker-Compose for Django and React with Nginx reverse-proxy and Let's encrypt certificate 了解更多详情。 docker-compose
中还有如何颁发 Let's encrypt 证书和更新证书的示例。如果您需要更多帮助,请告诉我。
我是网络开发的新手,我 运行 遇到了一个奇怪的错误。 我有一个 React/Django 应用程序,我正在尝试使用 nginx 和 docker 进行生产。 Django 运行s 在 postgres 数据库上,nginx 只是将端口 80 重新路由到我的反应和 django 端口。
当我使用
在本地部署应用程序时npm run build
serve -s build
一切如愿。
然而,通过 Docker 做同样的事情却不会。
我有一个构建 React 应用程序的 Docker 文件:
FROM node:12.18.3-alpine3.9 as builder
WORKDIR /usr/src/app
COPY ./react-app/package.json .
RUN apk add --no-cache --virtual .gyp \
python \
make \
g++ \
&& npm install \
&& apk del .gyp
COPY ./react-app .
RUN npm run build
FROM node:12.18.3-alpine3.9
WORKDIR /usr/src/app
RUN npm install -g serve
COPY --from=builder /usr/src/app/build ./build
现在当我使用
docker-compose build
docker-compose up
我看到我的 Django、React、Postgres 和 nginx 容器都是 运行ning,nginx 在端口 80 可见。当我在浏览器中打开 localhost 时,我看到 nginx 正在寻找一些静态反应正确目录中的文件。但是,它正在寻找的反应文件与静态文件具有不同的哈希值。 nginx 和 react 容器的静态文件是一样的。所以不知何故,我的 asset-manifest.json 包含错误的文件名。知道是什么原因造成的,或者我该如何解决这个问题?
编辑:添加了 docker-compose.yml:
version: "3.7"
services:
django:
build:
context: ./backend
dockerfile: Dockerfile
volumes:
- django_static_volume:/usr/src/app/static
expose:
- 8000
env_file:
- ./backend/.env
command: gunicorn core.wsgi:application --bind 0.0.0.0:8000
depends_on:
- db
db:
image: postgres:12.0-alpine
volumes:
- postgres_data:/var/lib/postgresql/data/
env_file:
- ./postgres/.env
react:
build:
context: ./frontend
dockerfile: Dockerfile
volumes:
- react_static_volume:/usr/src/app/build/static
expose:
- 5000
env_file:
- .env
command: serve -s build
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:
postgres_data:
django_static_volume:
react_static_volume:
您需要 运行 在单独的容器中进行 React 吗?这样做有什么理由吗? (可能是)
在我的方法中,我在 nginx Docker 文件中构建 React 静态文件,并将它们复制到 /usr/share/nginx/html
。然后 nginx 在 location /
.
nginx Docker文件
# The first stage
# Build React static files
FROM node:13.12.0-alpine as build
WORKDIR /app/frontend
COPY ./frontend/package.json ./
COPY ./frontend/package-lock.json ./
RUN npm ci --silent
COPY ./frontend/ ./
RUN npm run build
# The second stage
# Copy React static files and start nginx
FROM nginx:stable-alpine
COPY --from=build /app/frontend/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
nginx 配置文件
server {
listen 80;
server_name _;
server_tokens off;
client_max_body_size 20M;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
try_files $uri @proxy_api;
}
location /admin {
try_files $uri @proxy_api;
}
location @proxy_api {
proxy_set_header X-Forwarded-Proto https;
proxy_set_header X-Url-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://backend:8000;
}
location /django_static/ {
autoindex on;
alias /app/backend/server/django_static/;
}
}
Docker-撰写
version: '2'
services:
nginx:
restart: unless-stopped
build:
context: .
dockerfile: ./docker/nginx/Dockerfile
ports:
- 80:80
volumes:
- static_volume:/app/backend/server/django_static
- ./docker/nginx/development:/etc/nginx/conf.d
depends_on:
- backend
backend:
restart: unless-stopped
build:
context: .
dockerfile: ./docker/backend/Dockerfile
volumes:
entrypoint: /app/docker/backend/wsgi-entrypoint.sh
volumes:
- static_volume:/app/backend/server/django_static
expose:
- 8000
volumes:
static_volume: {}
请查看我的文章
Docker-Compose for Django and React with Nginx reverse-proxy and Let's encrypt certificate 了解更多详情。 docker-compose
中还有如何颁发 Let's encrypt 证书和更新证书的示例。如果您需要更多帮助,请告诉我。