Docker部署Django+Vue前后端分离的项目

Docker部署Django+Vue前后端分离的项目

本文主要介绍使用Docker环境部署一个Django Rest和Vue结合的前后端分离项目.

前端Vue

使用Makefile编译打包

#
# cmdb-frontend makefile
#
SHELL := /bin/bash
PATH  := node_modules/.bin:$(PATH)

NOW := $(shell date +"%Y-%m-%d %H:%M:%S")
PROJECT := cmdb-frontend
PKG_NAME := $(PROJECT).tar.gz

# Docker
REGISTRY := wcr.shuke.net
NAME := devops/$(PROJECT)
TAG := v$(shell date +"%Y%m%d")
IMG := $(REGISTRY)/$(NAME):$(TAG)

# update helm values.yaml
CONTENT := $(subst TAG,$(TAG),'9 s/.*/  tag\: TAG/g')

all : install pkg build-img
.PHONY: all

install:
	@echo -e "\033[32m$(NOW): Build ${PROJECT} project\033[0m"
	npm run build

pkg:
	@echo -e "\033[32m$(NOW): start packing\033[0m"
	tar zcf $(PKG_NAME) dist/*

build-img:
	@echo -e "\033[32m$(NOW): Start build image...\033[0m"
	cp -Ra dist nginx/
	docker build -t $(IMG) nginx

clean:
	@echo -e "\033[32m$(NOW): clean...\033[0m"
	-rm -rf $(PKG_NAME) dist nginx/dist
	-docker rmi $(IMG)

⚠️ 注: 在项目的根目录下执行make all命令进行编译打包操作以及生成docker镜像.

Nginx配置文件

# cat cmdb.shuke.net.conf
upstream cmdb-backend {
    server web:8000;
}

server {
	listen 80;
	server_name cmdb.shuke.net;

	location / {
    	    root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html @fallback;
	}

        location @fallback {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	        proxy_pass    http://cmdb-backend;
	}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

}

⚠️ 注: 需将nginx配置文件复制到Dokcer镜像中覆盖默认的配置文件

Dockerfile

#
# CMDB Frontend Nginx Dockerfile
#

FROM wcr.shuke.net/base/nginx:1.14.2

LABEL maintainer="shu_ke163@163.com"

COPY dist /usr/share/nginx/html

COPY cmdb.shuke.net.conf /etc/nginx/conf.d/default.conf

WORKDIR /etc/nginx

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

⚠️ 注: 此处的nginx镜像可以使用Docker Hub官方的镜像也可以自定义.

后端Django

Dockerfile

#
# Django CMDB
#

FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install  --no-cache-dir -r requirements.txt
ADD . /code/
EXPOSE 8000
CMD ["python", "./manage.py runserver 0.0.0.0:8000"]

⚠️ 注: 将Dockerfile放入Django的项目根节点目录下,用于构建后端容器

docker-compose.yml 文件

version: "3"
services:
  redis:
    image: redis:4
    container_name: cmdb-redis
  db:
    image: mysql:5.6
    container_name: cmdb-mysql
    volumes:
      - ~/data/mysql/data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: admin123
    ports:
      - "3307:3306"
  web:
    build: .
    image: cmdb-backend:v1.0.0
    container_name: cmdb-backend
    command: python3 manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - redis
      - db
    links:
      - redis
      - db
  nginx:
   # 前端Vue项目Dockerfile所在目录 
    build: ../cmdb-frontend/nginx/
    image: cmdb-frontend:v1.0.0
    container_name: cmdb-nginx
    ports:
      - 9000:80
    depends_on:
      - web
    links:
      - web
    restart: always

⚠️ 注: 使用docker-compose 进行管理项目的所有依赖,包括redis/mysql/django/nginx容器,控制整个项目所依赖的所有容器的生命周期,使用docker-compose up -d命令拉取或生成镜像并启动项目依赖的所有容器

常用命令

1. docker-compose build web   构建后端Django项目容器
2. docker-compose build nginx 构建前端Vue项目容器
3. docker-compose up 前台启动项目
4. docker-compose up 后台启动项目
5. docker-compose images 查看项目所有镜像
6. docker-compose ps 查看项目所有容器
7. docker-compose logs -f [service name] 如:web/nginx  查看容器log信息
8. docker-compose config 查看docker-compose.yml文件内容并校验
9. $ docker-compose port nginx 80   # 查看服务的端口映射
0.0.0.0:9000
10. docker-compose stop db 停止单个容器
11. docker-compose start db 启动单个容器
12. docker-compose restart db 重启单个容器
13. docker-compose start   启动所有容器
14. docker-compose stop  停止所有容器
15. docker-compose restart  重启所有容器
16. docker-compose rm  删除所有已停止的容器

# 以下是所有的docker-compose一些命令参数
Commands:
  build              Build or rebuild services
  bundle             Generate a Docker bundle from the Compose file
  config             Validate and view the Compose file
  create             Create services
  down               Stop and remove containers, networks, images, and volumes
  events             Receive real time events from containers
  exec               Execute a command in a running container
  help               Get help on a command
  images             List images
  kill               Kill containers
  logs               View output from containers
  pause              Pause services
  port               Print the public port for a port binding
  ps                 List containers
  pull               Pull service images
  push               Push service images
  restart            Restart services
  rm                 Remove stopped containers
  run                Run a one-off command
  scale              Set number of containers for a service
  start              Start services
  stop               Stop services
  top                Display the running processes
  unpause            Unpause services
  up                 Create and start containers
  version            Show the Docker-Compose version information