文章目录

1. 环境准备
2. 代码准备
3. 服务部署
4. 访问
5. 爬坑记录

1. 环境准备

1.1 django

部署方案

使用 Gunicorn 托管 Django

使用 uWSGI 托管 Django

1.2 Vue

vue项目的特点

单页面应用

前后端分离

部署方案

nginx：作为静态资源服务器

nginx：作为反响代理服务器，代理django请求

1.3 服务器

使用centos服务器运行前端或后端应用

1.4 架构

Centos + mysql + gunicorn + nginx

docker-compose 容器化部署

2. 代码准备

2.1 django代码

关闭dubug并收集静态资源

前后端分离部署后，django DRF提供的swagger接口页面静态资源将无法访问，需要收集后合并到前端静态资源

# settings.py

# 设置DEBUG=False后，django server停止静态服务,此时就需要对应的服务器
DEBUG=False

# 配置静态文件根目录
STATIC_ROOT = os.path.join(BASE_DIR, 'front_end', 'static')

# 命令行收集django静态文件，部署后供后端接口文档等使用
python3 manage.py collectstatic

# 查看
cd frontend &&  tree -L 2

frontend
└── static
    ├── admin
    ├── drf-yasg
    └── rest_framework
# 仅保留rest_framework即可

.
├── apps               --子应用目录
├── djangoDemo         --项目配置目录
├── front_end          --静态文件目录
├── utils              --项目工具目录
├── manage.py          --项目入口目录
├── deploy             --部署脚本目录
├── Readme.md
├── requirements.txt
└── logs

2.2 vue代码

修改后端接口请求对应的host

# src/api/api.js

# 前后端容器在同一台服务器，所以使用127.0.0.1
let host = 'http://127.0.0.1:8000';

修改public/index.html中配置django服务对应的host

<!--public/index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    
    <!--修改此处配置-->
    <meta http-equiv="Content-Security-Policy"
          content="img-src 'self' data: ;
          style-src 'self' 'unsafe-inline' at.alicdn.com fonts.googleapis.com;
          font-src  'self' 'unsafe-inline' at.alicdn.com fonts.gstatic.com data: ;
          default-src 'self' 127.0.0.1:* localhost:* 47.96.67.53:* ;">

    <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css">
    <title>ApiTestPaltform</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

前端打包

# 打包
npm run build

# 将dist目录下文件拷贝到deploy/nginx_docker下
cp -r dist  ../djangoDemo/deploy/nginx_docker/
# 将后端代码拷贝到deploy/nginx_docker下
cp -r front_end/static/rest_framework deploy/nginx_docker/dist/static/rest_framework 
# 查看
cd github/djangoDemo/deploy/nginx_docker/dist/ &&  tree -L 2

.
├── index.html
└── static
    ├── css
    ├── fonts
    ├── img
    ├── js
    └── rest_framework

2.3 deploy部署代码

代码拷贝到deploy

cp -r ./{
    
    apps,djangoDemo,utils,manage.py,requirements.txt,logs}  ./deploy/django_app_docker/djangoDemo/

cd  deploy/django_app_docker/djangoDemo/ && \
	find ./ -name '__pycache__'| xargs rm -rf && \
	cd -

# deploy/

.
├── datas                          --- 存放*.sql文件
├── django_app_docker
│   ├── djangoDemo                 --- 后端代码目录
│   ├── Dockerfile
│   ├── docker-entrypoint.sh       --- 数据库初始化和迁移
│   └── gunicorn_config.py         --- 应用服务器配置
├── docker-compose.yml        
├── import_test_data.sh            --- 数据库导入
├── nginx_docker              
│   ├── Dockerfile
│   ├── configs                    --- nginx配置目录
│   └── dist                       --- 静态文件目录
└── start.sh                       --- 项目部署脚本

3. 服务部署

3.1 代码上传

代码上传到阿里云

# 打包
tar -zcvf deploy.tar.gz ./deploy

# 上传
scp -r deploy.tar.gz [email protected]:/root/dj/

登陆服务器部署

# 解压
cd /root/dj/
tar -zxvf deploy.tar.gz

3.2 服务部署

cd deploy 
docker-compose up -d --build

# 或者使用脚本
sh start.sh

3.3 数据导入

bash import_test_data.sh

4. 访问

阿里云端口开放

阿里云控制台-防火墙开放端口8080，此时应该可以访问

5. 爬坑记录

使用python:3.8-alpine镜像部署django,报错ImportError: can not import DistributionNotFound from pkg_resources，未找到原因和解决办法。替换使用centos7-python3.8打包的镜像；

使用docker-compose二次部署时，建议清理之前使用的volume，否则会被之前的错误元数据影响；

# 删除容器和镜像
docker stop db django web
docker rm db django web
# 删除镜像
docker rmi $(docker images| grep -i 'v1')

# 删除未使用的数据卷
docker volume prune

# 删除网络
docker network prune

docker-compose命令部署过程中，使用docker logs django命令查看，此时会有各种报错，一定要淡定，等2分钟再看。各个容器准备、连接都是需要时间的。
数据库迁移脚本中，python manage.py makemigrations命令提示No changes，没找到原因。解决办法：python manage.py makemigrations appname，即在makemigration命令后加上appname.

Django--012 django服务容器化部署

文章目录

1. 环境准备

1.1 django

1.2 Vue

1.3 服务器

1.4 架构

2. 代码准备

2.1 django代码

2.2 vue代码

2.3 deploy部署代码

3. 服务部署

3.1 代码上传

3.2 服务部署

3.3 数据导入

4. 访问

5. 爬坑记录

猜你喜欢