从零开始 - Docker部署前后端分离项目（三）

本期专为饭佬四期平台部署，其他vue django前后端分离项目均可通用。

一、项目框架图

此django项目部署采用的方案nginx gunicorn

容器环境及需要启动的服务：

python3.8的（使用的是小型的3.8-alpine）
celery worker （无定时任务可不用）
celery beate server （无定时任务可不用）
gunicorn （用于后端通信）

二、文件最终目录

代码语言：javascript复制

AndroidPlatform
  |- nginx_docker
    |-- dist
    |-- static
    |-- default.conf
    |-- Dockerfile
    
  |- XZAndroidPlatform
    |-- logs
    |-- scripts
    |-- xiaozai_app
    |-- XZAndroidPlatform
    |-- Dockerfile
    |-- entrypoint.sh
    |-- gunicorn.conf.py
    |-- manage.py
    |-- requirements.txt
    |-- supervisord.conf
    
  |- docker-compose.yml
  |- start.sh

三、项目文件介绍

1.AndroidPlatform

整个项目文件，里面有两个文件夹，nginx_docker用于存放前后端静态文件，XZAndroidPlatform是整个django项目文件。

包含两个文件，docker-compose.yml、start.sh（可有可无）

2.XZAndroidPlatform后端文件

整个django项目拿过来即可。

需生成的文件为：requirements.txt

需编写的文件为：Dockerfile、entrypoint.sh、gunicorn.conf.py、supervisord.conf

3.nginx_docker静态文件

需生成的文件为：包含前端vue打包的dist文件，django后端的static静态资源文件。

需编写的文件为：default.conf、Dockerfile

四、django后端环境准备

1、django后端项目依赖导出

代码语言：javascript复制

pip freeze > requirements.txt

在requirements文件中增加相关部署依赖：

代码语言：javascript复制

mysqlclient==2.1.0
gunicorn==20.1.0
supervisor==4.2.4

完整requirements.txt文件如下

代码语言：javascript复制

BeautifulReport==0.1.3
certifi==2021.10.8
charset-normalizer==2.0.12
Django==2.2
django-cors-headers==3.11.0
idna==3.3
lxml==4.8.0
python-docx==0.8.11
pytz==2021.3
requests==2.27.1
sqlparse==0.4.2
urllib3==1.26.9
mysqlclient==2.1.0
gunicorn==20.1.0
supervisor==4.2.4

2、django后端项目配置修改

setting.py 文件

代码语言：javascript复制

DEBUG = False

ALLOWED_HOSTS = ['127.0.0.1', '填你所部署服务所在的IP']  # 运行主机，或域名，可以填['*']代表允许所有

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', #第三方解决跨域头问题的中间件
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'xiaozai',
        'HOST': 'mariadb',  # 以mariadb的容器名为host
        'USER': 'root',
        'PASSWORD': 'xiaozai123'

    }
}

# 方案一：允许跨域的域名列表
CORS_ALLOWED_ORIGINS = [

    'http://198.162.111.111:8080'  # 修改为你的前端部署的项目地址
]

# 方案二：我采用的
CORS_ORIGIN_ALLOW_ALL = True #加上允许所有跨域

3、收集django项目中的静态文件

在配置文件中配置STATIC_ROOT

代码语言：javascript复制

STATIC_ROOT = BASE_DIR / 'static' #如果运行报错，则用下面的
STATIC_ROOT = = os.path.join(BASE_DIR,'static')

然后运行命令：

代码语言：javascript复制

python manage.py collectstatic

会将所有的静态收集到STATIC_ROOT目录中。

这个static文件夹后续需要复制到nginx_docker文件夹中。

4、配置文件

django项目目录下新建logs文件夹，存放后续配置运行的日志。

（1）gunicorn.conf.py

代码语言：javascript复制

bind = '0.0.0.0:8000'                 # 监听主机和端口
pidfile = 'logs/gunicorn.pid'         # pid文件
accesslog = 'logs/gunicorn_access.log'    # 通过的日志
errorlog = 'logs/gunicorn_error.log'      # 错误日志

（2）supervisord.conf

把XZAndroidPlatform.wsgi修改为你django的项目名.wsgi

代码语言：javascript复制

[unix_http_server]
file=/tmp/supervisor.sock   ; the path to the socket file

[supervisord]
logfile=logs/supervisord.log ; main log file; default $CWD/supervisord.log
logfile_maxbytes=50MB        ; max main logfile bytes b4 rotation; default 50MB
logfile_backups=10           ; # of main logfile backups; 0 means none, default 10
loglevel=info                ; log level; default info; others: debug,warn,trace
pidfile=logs/supervisord.pid ; supervisord pidfile; default supervisord.pid
nodaemon=true               ; start in foreground if true; default false
silent=false                 ; no logs to stdout if true; default false
minfds=1024                  ; min. avail startup file descriptors; default 1024
minprocs=200                 ; min. avail process descriptors;default 200

[rpcinterface:supervisor]
supervisor.rpcinterface_factory = supervisor.rpcinterface:make_main_rpcinterface

[supervisorctl]
serverurl=unix:///tmp/supervisor.sock ; use a unix:// URL  for a unix socket

[program:gunicorn]
command=gunicorn -c gunicorn.conf.py XZAndroidPlatform.wsgi

（3）entrypoint.sh

小知识

/dev/null 文件

如果希望执行某个命令，但又不希望在屏幕上显示输出结果，那么可以将输出重定向到 /dev/null：

代码语言：javascript复制

$ command > /dev/null

/dev/null 是一个特殊的文件，写入到它的内容都会被丢弃；如果尝试从该文件读取内容，那么什么也读不到。但是 /dev/null 文件非常有用，将命令的输出重定向到它，会起到"禁止输出"的效果。

创建的超级用户账号密码，可以自己自行更改。

代码语言：javascript复制

#! /bin/sh
# 1. 数据库迁移
python manage.py makemigrations
python manage.py migrate
# 因为后使用脚本部署时，可能数据库还没有准备好，这里连接会失败
if [ $? -ne 0 ];then
    echo '数据库连接失败重启'
    exit 1
fi
# 2.创建管理员用户
echo "from django.contrib.auth import get_user_model; User = get_user_model(); User.objects.create_superuser('xiaozai', '13888888888', 'xiaozai123') " | python manage.py shell &> /dev/null
# 3. 启动supervisor

supervisord -c supervisord.conf

（4）Dockerfile

代码语言：javascript复制

FROM python:3.8-alpine
LABEL maintainer='xiaozai'
LABEL description='Django project'

# 创建/app目录并切换进目录下
# 第一个WORKDIR要用绝对路径
WORKDIR /app
# 把dockerfile当前目录下的所有文件拷贝进镜像的/app目录下
COPY . .

# 安装必要的库
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories && 
    apk update && 
    apk upgrade && 
    apk add --no-cache tzdata mariadb-dev gcc libc-dev && 
    cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && 
    echo "Asia/Shanghai" > /etc/timezone && 
    python -m pip install -i https://pypi.douban.com/simple --upgrade pip && 
    pip install --no-cache-dir -i https://pypi.douban.com/simple -r requirements.txt && 
    chmod 777 ./entrypoint.sh

# 创建一个日志挂载点避免容器越来越大
VOLUME /app/logs/

# 挂载端口，它并不会做端口映射，只是告诉用户，该镜像的挂载端口
EXPOSE 8000

# 容器的默认执行命令
# CMD 'supervisord -c supervisord.conf'
ENTRYPOINT ["./entrypoint.sh"]

五、nginx_docker静态资源准备

讲上文中django打包好的static文件夹复制到nginx_docker文件夹中。

1、前端部署-前端vue项目

前端中所有用到后端的接口，都需要改成对应部署所在的服务器地址，如上文的192.168.111.111

打包前端项目打包的时候一定要修改host，打包完成之后，将dist文件夹拷贝到nginx_docker文件夹中。

打包命令

代码语言：javascript复制

npm run build

2、部署静态文件default.conf

在nginx_docker文件夹中创建default.conf文件，编写如下内容：

域名记得改成自己的

代码语言：javascript复制

upstream app_server {
	server XZAndroidPlatform:8000;    # 配置gunicorn服务器主机和端口
}


server {
   listen       8001;  # 配置后端服务的监听端口
   server_name  192.168.111.111;  # 配置域名
	# http://106.14.168.21:8000/static/rest_framework/css/bootstrap.min.css
	# /usr/share/nginx/html/static/rest_framework/css/bootstrap.min.css
   location /static/ {
      alias /usr/share/nginx/html/static/;  # 配置静态文件路径
   }
   
   location / {
      # 检查静态文件，如果不是代理到应用
      try_files $uri @proxy_to_app;
   }

   location @proxy_to_app {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      proxy_pass http://app_server;
   } 

   
   #error_page  404              /404.html;

     # redirect server error pages to the static page /50x.html
     #
     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
        root   /usr/share/nginx/html;
     }

  }

  server {
	listen 80;  # 配置前端项目服务的监听端口
	server_name   192.168.111.111;  # 配置域名主机
	root /usr/share/nginx/html/dist;       # 配置文件根路径

    location / {
       try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
       index index.html;
    }

    #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    #因此需要rewrite到index.html中，然后交给路由在处理请求资源
    location @router {
             rewrite ^.*$ /index.html last;
    }

}

3、Dockerfile

代码语言：javascript复制

FROM nginx:alpine

COPY ./static/ /usr/share/nginx/html/static/
COPY ./dist/ /usr/share/nginx/html/dist/
COPY ./default.conf /etc/nginx/conf.d/

VOLUME /var/log/
EXPOSE 8001 80

六、docker-compose.yml

下载docker-compose

代码语言：javascript复制

pip install docker-compose

检测是否安装成功

代码语言：javascript复制

docker-compoese --version

不论是`Dockerfile`还是`docker-compose.yml`脚本的编写都依赖上下文，所以需要明确部署文件夹的项目结构。

项目结构在本节开篇已经详细说明了，这里再写一个大致的目录

代码语言：javascript复制

AndroidPlatform
  |- nginx_docker
    |-- dist
    |-- static
    |-- default.conf
    |-- Dockerfile
    
  |- XZAndroidPlatform
    |-- 其他项目文件和文件夹
    |-- Dockerfile
    |-- entrypoint.sh
    
  |- docker-compose.yml

1、编写docker-compose.yml文件

代码语言：javascript复制

version: "3"
services:  # 要启动的 容器服务
    redis:  # 容器名称
        image: redis:alpine   # 指定构建的镜像
        restart: always      # 重启策略
        volumes:             # 指定数据卷
            - redis_data:/data
    mariadb:
        image: mariadb
        restart: always 
        environment:        # 设置环境变量
            MARIADB_ROOT_PASSWORD: xiaozai123
            MARIADB_DATABASE: xiaozai
        volumes:
            - mariadb_data:/var/lib/mysql
    XZAndroidPlatform:
        depends_on:    # 指定依赖服务，等依赖的容器启动后再启动
            - redis
            - mariadb
        build: ./XZAndroidPlatform/   # 指定Dockerfile的路径
        image: mwj_XZAndroidPlatform  # 给镜像取个tag
        volumes:
            - app_logs:/app/logs/
        restart: always
    nginx:
        depends_on:
            - XZAndroidPlatform
        build: ./nginx_docker/
        image: mwj_nginx
        restart: always
        ports:
            - "80:80"
            - "8001:8001"
        volumes:
            - nginx_logs:/var/log/
volumes:  # 定义的数据卷
    redis_data:
    mariadb_data:
    app_logs:
    nginx_logs:

然后再XZAndroidPlatform目录下运行命令docker-compose -p mwj up -d --build,即可以部署项目。

2、部署完成

下篇内容：

1、start.sh一键自动化部署脚本的编写。

2、如何删除已构建的docker项目，再次快速部署。

容器 django 容器镜像服务 android 打包

0 人点赞

从零开始 - Docker部署前后端分离项目（三）

本期专为饭佬四期平台部署，其他vue django前后端分离项目均可通用。

一、 项目框架图

二、文件最终目录

三、项目文件介绍

1.AndroidPlatform

2.XZAndroidPlatform后端文件

3.nginx_docker静态文件

四、django后端环境准备

1、django后端项目依赖导出

2、django后端项目配置修改

3、收集django项目中的静态文件

4、配置文件

（1）gunicorn.conf.py

（2）supervisord.conf

（3）entrypoint.sh

（4）Dockerfile

五、nginx_docker静态资源准备

1、前端部署-前端vue项目

2、部署静态文件default.conf

3、Dockerfile

六、docker-compose.yml

1、编写docker-compose.yml文件

2、部署完成

一、项目框架图