Django4.2(DRF)+Vue3 读写分离项目部署上线

文章目录

1 前端
2 后端
- 2.1 修改 settings.py 文件
- - 关于静态文件
  - 2.2 关于用户上传的文件图片
3 Nginx
4 镜像制作
- 4.1 nginx
- 4.3 Django镜像
- - 4.3.1 构建
- 5 docker-compose 文件内容

1 前端

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

npm run build

构建完成后，项目根目录下会出现打包后的目录 dist
在这里插入图片描述
这个 dist 目录需要给到 nginx ，具体配置见第 3 章节的 Nginx

2 后端

2.1 修改 settings.py 文件

关于静态文件

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

DEBUG = False   # 修改为 False

ALLOWED_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-shark
    volumes:
      - "./dist:/usr/share/nginx/html"
      - "./conf.d:/etc/nginx/conf.d"
      - "./statics:/usr/share/nginx/statics"
      - "./sharkplat/media:/usr/share/nginx/media"
    restart: always
    ports:
      - "9900:80"
  sharkplat:
    image: sharkplat:1.0
    command: sh /sharkplat/start.sh
    restart: always
    ports:
    - "8010:80"
    volumes:
      - "./sharkplat:/sharkplat"