1 前端

进入前端项目的根目录，运行如下命令进行构建

npm run build

构建完成后，项目根目录下会出现打包后的目录 dist

这个 dist 目录需要给到 nginx ，具体配置见第 3 章节的 Nginx

2 后端

2.1 修改 settings.py 文件

关于静态文件

说明：读写分离项目 Django中是没有静态文件的，这里的静态文件是 Djngo 中集成的后台管理的 admin 和 api 文档应用使用的静态文件。

DEBUG = False   # 修改为 FalseALLOWED_HOSTS = ["*"]  # 允许任何主机访问# 告诉项目，访问所有静态文件的 URL 前缀
# 也就是都需要从 /statics/ 开头，这个需要和 nginx 中 location 后面的值一致
STATIC_URL = '/statics/'# 静态文件收录的位置，生产部署时使用，配置完成后
# 执行如下命令完成静态文件的收录, django 会把所有应用使用到的静态文件拷贝到这个目录里一份
# python manage.py collectstatic
# 注意不包含用户通过页面上传的文件，具体见面的配置说明
STATIC_ROOT = Path.joinpath(BASE_DIR, 'statics')

2.2 关于用户上传的文件图片

这个是临时使用，做好自己编写视图实现。
修改 setings.py 文件

# 用户通过页面上传的文件，使用这个 URL 访问,这个需要在nginx上配置为 location 的值
MEDIA_URL = '/media/'# 存储文件的路径
MEDIA_ROOT = Path.joinpath(BASE_DIR, 'media')

3 Nginx

说明： 配置文件中 sharkplat 是 程序的后端主机名。

server {listen       80;listen  [::]:80;server_name  localhost;#access_log  /var/log/nginx/host.access.log  main;# 这个就是前端了location / {root   /usr/share/nginx/html;try_files $uri $uri/ /index.html last;index  index.html index.htm;}# 这里就是后端用到的静态文件，注意是后端应用（admin和 DRF 自带的 api 文档）的静态文件。location /statics/{root /usr/share/nginx;}# 这里就是用户通过页面上传的图片location /media {root /usr/share/nginx;}# 这个是后台管理location /admin {proxy_pass http://sharkplat/admin;}# 这里是后端数据接口location /v1 {proxy_pass_header Server;proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Scheme $scheme;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_pass http://sharkplat/v1;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}
}

4 镜像制作

4.1 nginx

镜像使用的是 nginx:1.20.2-alpine

4.3 Django镜像

4.3.1 构建

Dockerfile

FROM alpine:latest
COPY requirements.txt /root/requirements.txt
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories && \apk add --update --no-cache \gcc mysql-dev musl-dev curl \jq py3-configobj py3-pip \py3-setuptools python3 python3-dev && \mkdir /root/.pip && \echo '[global]' > /root/.pip/pip.conf && \echo 'index-url=https://mirrors.aliyun.com/pypi/simple' >> /root/.pip/pip.conf &&\pip install --upgrade pip &&\pip install -r /root/requirements.txt

requirements.txt
在 DRF 项目根目录环境下执行如下命令获取.
pip3 freeze > requirements.txt

asgiref==3.7.2
asttokens==2.2.1
attrs==23.1.0
backcall==0.2.0
certifi==2023.7.22
charset-normalizer==3.2.0
coreapi==2.3.3
coreschema==0.0.4
decorator==5.1.1
Django==4.2
django-filter==23.2
django-guardian==2.4.0
django-phonenumber-field==7.1.0
django-simpleui==2023.8.28
djangorestframework==3.14.0
djangorestframework-simplejwt==5.3.1
drf-spectacular==0.26.5
executing==1.2.0
idna==3.4
importlib-metadata==6.8.0
inflection==0.5.1
ipython==8.14.0
itypes==1.2.0
jedi==0.19.0
Jinja2==3.1.2
jsonschema==4.20.0
jsonschema-specifications==2023.11.2
Markdown==3.4.4
MarkupSafe==2.1.3
matplotlib-inline==0.1.6
mysqlclient==2.2.0
parso==0.8.3
pexpect==4.8.0
phonenumberslite==8.13.17
pickleshare==0.7.5
Pillow==10.0.0
prompt-toolkit==3.0.39
ptyprocess==0.7.0
pure-eval==0.2.2
Pygments==2.15.1
PyJWT==1.7.1
pytz==2023.3
PyYAML==6.0.1
referencing==0.31.1
requests==2.31.0
rpds-py==0.13.2
six==1.16.0
sqlparse==0.4.4
stack-data==0.6.2
traitlets==5.9.0
typing_extensions==4.7.1
uritemplate==4.1.1
urllib3==2.0.4
wcwidth==0.2.6
zipp==3.16.2
click==8.1.7
gunicorn==21.2.0
h11==0.14.0
uvicorn==0.25.0

5 docker-compose 文件内容

version: '3.9'
services:web:image: nginx:1.20.2-sharkvolumes:- "./dist:/usr/share/nginx/html"- "./conf.d:/etc/nginx/conf.d"- "./statics:/usr/share/nginx/statics"- "./sharkplat/media:/usr/share/nginx/media"restart: alwaysports:- "9900:80"sharkplat:image: sharkplat:1.0command: sh /sharkplat/start.shrestart: alwaysports:- "8010:80"volumes:- "./sharkplat:/sharkplat"