django - 通过 Nginx (Django/React/Nginx/Docker-Compose) 提供 Django 媒体文件
问题描述
语境
我有一个使用以下堆栈的单页 Web 应用程序:
- 为前端做出反应
- 用于后端的 Django
- 用于网络服务器的 Nginx
Web 应用程序使用docker-compose
. 我的 React 应用程序,从 Django 服务器获取数据(django 是使用 Django Rest Framework 构建为 api 端点)。
问题/问题
我在部署时遇到问题,无法通过 Nginx 提供媒体文件。
到目前为止我尝试了什么
我最初的想法是提供此 stackoverflow帖子中所示的媒体文件- 这非常简单。不过,由于 Nginx 在它自己的 docker 中运行(我的 django 服务器也是如此),我无法指向我的 django 媒体文件,因为它们位于不同的容器中。
理想情况下,我不想使用 webpack,而是让 Nginx 负责提供媒体文件。
如果您查看下面的 nginx Dockerfile,您会看到我将静态文件复制到/usr/share/nginx/html/static/staticfiles
其中,然后使用 nginx 为它们提供服务(参见location ^~ /static/
参考资料nginx.conf
)。我试图对我的媒体文件(作为测试)做同样的事情并且它有效 - 但是,一旦网站启动,我上传的所有文件都无法访问,因为副本发生在我构建容器时。
文件结构
Root Dirc
|__ docker-compose.yml
|__ backend
|__ root
|__ Project
|__ api
|__ models.py
|__ ...
|__ media
|__ teddycrepineau
|__ settings.py
|__ ...
|__ production
|__ Dockerfile
|__ nginx
|__ Dockerfile
|__ nginx.conf
|__ frontend
|__ ...
相关代码
码头工人-compose.yml
version: '3'
volumes:
postgres_data: {}
postgres_backup: {}
services:
postgres:
image: postgres
volumes:
- postgres_data:/var/lib/postgresql/data
- postgres_backup:/backups
env_file: .env
nginx:
container_name: nginx
build:
context: .
dockerfile: ./nginx/Dockerfile
image: nginx
restart: always
depends_on:
- django
ports:
- "80:80"
django:
container_name: django
build:
context: backend
dockerfile: ./root/production/Dockerfile
hostname: django
ports:
- 8000:8000
volumes:
- ./backend:/app/
depends_on:
- postgres
command: >
bash -c '
python3 ./root/manage.py makemigrations &&
python3 ./root/manage.py migrate &&
python3 ./root/manage.py initadmin &&
gunicorn teddycrepineau.wsgi -b 0.0.0.0:8000 --chdir=./root/'
env_file: .env
nginx.conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
upstream app {
server django:8000;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name 0.0.0.0;
charset utf-80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ @proxy_to_app;
}
location @proxy_to_app {
rewrite ^(.+)$ /index.html last;
}
location ^~ /static/ {
autoindex on;
alias /usr/share/nginx/html/static/;
}
location ~ ^/api {
proxy_pass http://django:8000;
}
location ~ ^/admin {
proxy_pass http://django:8000;
}
}
}
nginx Dockerfile
FROM nginx:latest
ADD ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY ./frontend/build /usr/share/nginx/html
COPY ./backend/root/staticfiles /usr/share/nginx/html/static/staticfiles
Django Dockerfile
FROM python:3.7
ENV PYTHONUNBUFFERED 1
RUN export DEBIAN_FRONTEND=noninteractive
RUN mkdir /app
RUN pip install --upgrade pip
ADD /root/requirements.txt /app/
WORKDIR /app/
ADD . /app/
RUN pip install -r requirements.txt
EXPOSE 8000
Django 设置.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
APPS_DIR = os.path.join(BASE_DIR, 'project')
....
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(APPS_DIR, 'media/')
Django urls.py
urlpatterns = [
path('admin/', admin.site.urls),
re_path(r'^api/', include('project.api.urls')),
path('summernote/', include('django_summernote.urls')),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
更新
当我挂载一个共享卷并在我的文件中引用它时,我nginx.conf
会404 page not found
在尝试访问 django 后端上传的图像时得到一个。
码头工人-compose.yml
version: '3'
volumes:
postgres_data: {}
postgres_backup: {}
services:
postgres:
image: postgres
volumes:
- postgres_data:/var/lib/postgresql/data
- postgres_backup:/backups
env_file: .env
nginx:
container_name: nginx
build:
context: .
dockerfile: ./nginx/Dockerfile
image: nginx
restart: always
depends_on:
- django
ports:
- "80:80"
volumes:
- ./static:/app/backend/root/staticfiles
- ./media:/app/backend/root/project/media
django:
container_name: django
build:
context: backend
dockerfile: ./root/production/Dockerfile
hostname: django
ports:
- 8000:8000
volumes:
- ./backend:/app/
- ./static:/app/backend/root/staticfiles
- ./media:/app/backend/root/project/media
depends_on:
- postgres
command: >
bash -c '
python3 ./root/manage.py collectstatic --no-input &&
python3 ./root/manage.py makemigrations &&
python3 ./root/manage.py migrate &&
python3 ./root/manage.py initadmin &&
gunicorn teddycrepineau.wsgi -b 0.0.0.0:8000 --chdir=./root/'
env_file: .env
nginx.conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
upstream app {
server django:8000;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name localhost;
charset utf-80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ @proxy_to_app;
}
location @proxy_to_app {
rewrite ^(.+)$ /index.html last;
}
location ^~ /static/ {
autoindex on;
alias /usr/share/nginx/html/static/;
}
location ^~ /media/ {
autoindex on;
alias /app/backend/root/project/media/;
}
location ~ ^/api {
proxy_pass http://django:8000;
}
location ~ ^/admin {
proxy_pass http://django:8000;
}
}
}
解决方案
问题来自我将卷安装在其中的方式docker-compose.yml
(这是我的错误理解)。
首先,我们创建一个主机挂载卷 ( ./backend/
),引用我们/app/
的 django 服务中存在的文件夹。我们创建了这个文件夹并将所有相关文件添加到我们Dockerfile
位于后端文件夹中。这基本上会将我们/app/
存在于django
Docker 映像上的./backend
文件夹链接到存在于主机上的文件夹 - 参考来自 OP 的文件结构。
一旦我们有了这个卷,每当对我们的/app/
文件夹进行更新(即上传新图像)时,它将反映在我们的主机安装卷(即./backend/
)中 - 反之亦然。
我们最终创建了另外 2 组主机挂载卷(./backend/root/staticfiles/...
和./backend/root/project/media/
),我们将使用它们通过 Nginx 提供我们的媒体和静态文件。nginx
我们在和django
服务之间共享这些主机安装的卷。从版本 2 开始,docker-compose
会自动在您的 Docker 映像之间创建一个网络,允许您在服务之间共享卷。
最后,在我们的 nginx.conf 中,我们在docker-compose.yml
文件中引用主机挂载的卷作为static
和media
url。
码头工人-compose.yml
version: '3'
volumes:
postgres_data: {}
postgres_backup: {}
services:
postgres:
image: postgres
volumes:
- postgres_data:/var/lib/postgresql/data
- postgres_backup:/backups
env_file: .env
django:
container_name: django
build:
context: backend
dockerfile: ./root/production/Dockerfile
hostname: django
ports:
- 8000:8000
volumes:
- ./backend:/app/
- ./backend/root/staticfiles/admin:/usr/share/nginx/html/static/admin
- ./backend/root/staticfiles/rest_framework:/usr/share/nginx/html/static/rest_framework
- ./backend/root/staticfiles/summernote:/usr/share/nginx/html/static/summernote
- ./backend/root/project/media/:/usr/share/nginx/html/media/
depends_on:
- postgres
command: >
bash -c '
python3 ./root/manage.py collectstatic --no-input &&
python3 ./root/manage.py makemigrations &&
python3 ./root/manage.py migrate &&
python3 ./root/manage.py initadmin &&
gunicorn teddycrepineau.wsgi -b 0.0.0.0:8000 --chdir=./root/'
env_file: .env
nginx:
container_name: nginx
build:
context: .
dockerfile: ./nginx/Dockerfile
image: nginx
restart: always
depends_on:
- django
ports:
- "80:80"
volumes:
- ./backend/root/staticfiles/admin:/usr/share/nginx/html/static/admin
- ./backend/root/staticfiles/rest_framework:/usr/share/nginx/html/static/rest_framework
- ./backend/root/staticfiles/summernote:/usr/share/nginx/html/static/summernote
- ./backend/root/project/media/:/usr/share/nginx/html/media/
nginx.conf
....
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name localhost;
charset utf-80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ @proxy_to_app;
}
location @proxy_to_app {
rewrite ^(.+)$ /index.html last;
}
location ^~ /static/ {
autoindex on;
alias /usr/share/nginx/html/static/;
}
location ^~ /media/ {
autoindex on;
alias /usr/share/nginx/html/media/;
}
location ~ ^/api {
proxy_pass http://django:8000;
}
location ~ ^/admin {
proxy_pass http://django:8000;
}
}
}
推荐阅读
- python - Python Post 请求响应 Xml 错误加载 fromstring
- math - 将矩形分成n等份
- java - 使用 Jackson 序列化并在该字段上添加注释时,如何完全忽略字段的值?
- amazon-web-services - 如何在没有 OAI 的情况下使公共存储桶只能从云端访问?
- c - 从不断更新的日志文件中读取数据
- python - 如何删除 Pandas DataFrame 行中长度为 3 或更大的重复?
- reactjs - 如何使用 React 和 Redux 重置密码?
- c# - 使用 Microsoft Graphs SDK 向 Teams 用户发起呼叫
- javascript - 反应本机中的无效挂钩调用问题
- java - Java 指定文件中单个单词位置的最佳方法