python django部署docker_使用Docker来部署django+vue项目

一、django项目的部署

(一)django项目的搭建

1、搭建虚拟环境

项目是需要依赖环境的，所以我们需要先创建一个虚拟环境：

C:\Users\Administrator>mkvirtualenv django-vue-demo --no-setuptools

Using real prefix'e:\\python\\python3.5.2\\progress'New python executablein C:\Users\Administrator\Envs\django-vue-demo\Scripts\pyt

hon.exe

Installing pip, wheel...done.

注意因为直接mkvirtualenv django-vue-demo会安装失败，所以先不要安装settools，待上面完成后再进行安装settools工具。

(django-vue-demo) C:\Users\Administrator>pip install setuptools

Collecting setuptools

Using cached setuptools-45.1.0-py3-none-any.whl (583kB)

Installing collected packages: setuptools

Successfully installed setuptools-45.1.0

2、创建项目

在虚拟环境中安装django包

(django-vue-demo) C:\Users\Administrator>pip install django==2.0Collecting django==2.0Using cached Django-2.0-py3-none-any.whl (7.1MB)

Collecting pytz

Using cached pytz-2019.3-py2.py3-none-any.whl (509kB)

Installing collected packages: pytz, django

Successfully installed django-2.0 pytz-2019.3

使用pycharm创建django项目

注意需要填写以上3处地方，尤其是第2处地方，选择刚刚新建虚拟环境的python解释器。

3、数据库配置

在这个项目中需要使用到mysql数据库，所以先将mysql数据库进行配置：

安装pymysql

(django-vue-demo) C:\Users\Administrator>pip install pymysql

Collecting pymysql

Using cached PyMySQL-0.9.3-py2.py3-none-any.whl (47kB)

Installing collected packages: pymysql

Successfully installed pymysql-0.9.3

在__init__.py文件中导入pymysql

在与settings同级的__init__.py文件中导入pymysql：

importpymysql

pymysql.install_as_MySQLdb()

settings.py中配置mysql

#Database#https://docs.djangoproject.com/en/2.0/ref/settings/#databases

DATABASES={'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'demo','USER': 'root','PASSWORD': '','HOST': 'localhost','PORT': '3306',

}

}

注意的是你需要先在数据库中创建一个demo的数据库。

生成数据库表

python manage.py makemigrations

python manage.py migrate

4、同源策略配置

这个配置主要是解决浏览器的同源策略，例如前台访问后台接口会报如下错误：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/test/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

5、写一个测试API

deftest(request):

result={"meta":{"code":2001,"message":"请求失败"},"data":[]

}try:

UserSet= models.UserInfo.objects.values('id','username','password','position','age')

result["meta"]["code"]=2000result["meta"]["message"]="请求成功"result["data"]=list(UserSet)print(UserSet)exceptException as e:pass

return HttpResponse(json.dumps(result))

(二)部署

1、创建网络

因为在一台服务器上部署，所以建一个bridge网络：

[root@centos-7 backend]#docker network create django_web

73b739d646ab56d2913594724d08c08ee6125e4e84211b894d5f24d67c6cab85

2、部署mysql服务

因为web应用依赖于mysql数据服务，所以先启动mysql服务：

拉取mysql镜像

[root@centos-7 backend]#docker pull mysql

启动mysql服务

[root@centos-7 ~]#docker run -d -p 3307:3306 --network django_web --name django_mysql \

-v $PWD/db:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 mysql:latest

创建数据库

我们需要进入mysql中创建自己的数据库：

[root@centos-7 ~]#docker exec -it 44b1 /bin/sh #进入容器#mysql -uroot -p

Enter password:

Welcome to the MySQL monitor. Commands end with ;or\g.

Your MySQL connection idis 8mysql> create DATABASE demo DEFAULT CHARSET utf8 COLLATE utf8_general_ci; #创建数据库

Query OK, 1 row affected, 2 warnings (0.01 sec)

3、部署web服务

服务器上文件目录

[root@centos-7 web]#ls

backend Dockerfile pip.conf

[root@centos-7 web]#cd backend/

[root@centos-7 backend]#ls

backend db.sqlite3 demo manage.py requirements.txt start.sh templates

可以看到在web目录下有backend是项目，还有Dockerfile以及pip.conf文件；然后再backend目录中有requirements.txt包文件、starts.sh脚本文件。

各文件内容

Dockerfile文件：

FROM python:3.5.2RUN mkdir-p /usr/src/app #在容器中新建一个文件夹app

COPY pip.conf /root/.pip/pip.conf #更改pip源

COPY ./backend/ /usr/src/app/ #将banckend项目下的文件全部拷贝到容器中

RUN chmod +x /usr/src/app/start.sh #赋予脚本文件执行权限

RUN pip install cryptography #安装数据库认证相关的包，实际上这可以直接放在requirements.txt文件中

RUN pip install -r /usr/src/app/requirements.txt

WORKDIR/usr/src/app #切换工作目录，否则找不到脚本文件

CMD ./start.sh

pip.conf

[global]

index-url = http://mirrors.aliyun.com/pypi/simple/[install]

trusted-host=mirrors.aliyun.com

requirements.txt

这个文件是开发时需要的各种包，你可以进入开发环境的虚拟环境进行导出：

pip freeze > requirements.txt #导出到当前路径下

starts.sh

这是Dockerfile文件CMD中的执行命令脚本：

#!/bin/sh

python manage.py makemigrations &python manage.py migrate&python manage.py runserver0.0.0.0:8000

值得注意的是这个脚本与manage.py位于同一级。

项目中settings中的配置

因为之前mysql已经启动了，项目中配置了mysql的配置，所以settings中对这一块需要做一些改变：

DATABASES ={'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'demo', #这是在mysql启动后创建的数据库

'USER': 'root','PASSWORD': '123456','HOST': 'django_mysql', #启动mysql服务指定的名称

'PORT': '3306',

}

}

生成镜像

[root@centos-7 web]#docker build -t django_web .

运行该镜像(默认执行CMD中的脚本命令)

[root@centos-7 web]#docker run --network django_web --name django_web -p 8001:8000 django_web

容器列表

[root@centos-7 mysql]#docker ps

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES

d036b07b6c53 django_web"/bin/sh -c ./start.…" 57 minutes ago Up 57 minutes 0.0.0.0:8001->8000/tcp django_web

b1b1d0c62561 mysql:latest"docker-entrypoint.s…" 2 hours ago Up 2 hours 33060/tcp, 0.0.0.0:3307->3306/tcp django_mysql

上面就是目前的容器列表，所以前台访问后台可以通过本机的8001端口即可。

二、Vue项目部署

(一)项目搭建

创建项目

首先进入你需要进入一个目录，这个目录用于你放置项目的地方：

C:\Users\Administrator>i:

I:\djaogo-vue-demo>cd I:\djaogo-vue-demo

然后使用脚手架创建项目：

I:\djaogo-vue-demo>vue create fronted

这个npm提示选择yes即可，然后会问你是自动创建还是手动(Manually)创建，手动会有更多选项，这里不需要选择default，可选择Manually。

会出现如下界面：

这里有很多选项：

(*) Babel #解决兼容性问题,支持 ES6 的代码转译成浏览器能识别的代码

( ) TypeScript #是一种给 JavaScript 添加特性的语言扩展,增加了很多功能,微软开发的

( ) Progressive Web App (PWA) Support #渐进式的Web应用程序支持

( ) Router #是 vue-router 路由

( ) Vuex #是Vue中的状态管理模式+库

( ) CSS Pre-processors #支持 CSS 预处理器, Sass/Less预处理器

(*) Linter / Formatter #支持代码风格检查和格式化

( ) Unit Testing #支持单元测试

( ) E2E Testing #支持 E2E 测试

我们可以选择以下的选项：

当上面使用space选择后然后使用enter确认，出现：

询问是否使用history模式，我们选择Y，出现：

后面出现的一次按照如下填写即可：

ESLint + Prettier(检查与格式化代码)--》 Lint on save(保存就检测)--》In dedicated config files(分别使用独立文件放置)--》保存这个特性到项目

注意选择npm下载即可：

当这些完成后我们就可以对其添加一些我们自己写的东西了。

安装组件

这里我主要是想让前后端进行通信，所以需要安装axios，那么就进行axios的封装：

I:\djaogo-vue-demo\fronted>cnpm install axios

√ Installed1packages

√ Linked3latest versions

√ Run 0 scripts

√ All packages installed (4 packages installed fromnpm registry, used 2s(netwo

rk 2s), speed62.37kB/s, json 4(14.62kB), tarball 109.44kB)

在项目的src目录下新建utils文件夹，并在里面新建requests.js文件：

import axios from 'axios'const request=axios.create(

{

baseURL:'http://127.0.0.1:8001',

timeout:5000}

)

export default request

调用接口

另外，再在src目录下新建api目录，api目录下新建test.js文件，可用于测试。

调用后台接口：

import request from '@/utils/request'export default {

getList(){

const req=request({

method:'get',

url:'/test/'})returnreq

}

}

在页面中进行调用接口，并传递给子组件进行渲染：

import Table from "../components/Table";import testApi from "../api/test"export default {

name:"Main",

components: { Table },

data(){return{

testList:[],

tableLoading:true

}

},

created(){

this.getData()

},

methods:{

getData(){

testApi.getList().then(response=>{

const {data, meta: {code,message}}=response.data;if(code===2000){

this.testList=data;

this.tableLoading=false

}

console.log('data',data,code,message)

})

}

}

};

Main.vue

子组件：

:data="testList"style="width: 100%">

prop="username"label="姓名"width="180">

prop="password"label="密码"width="180">

prop="position"label="职位">

name:"table",

data() {return{

}

},

props:{

testList:Array

}

};

Table.vue

此时，就可以正常开发，基于此进行下面的部署。

(二)项目部署

1、打包项目

在根目录下通过以下命令进行打包：

npm run build

此时会在项目里面有一个dist目录文件夹。

2、在服务器上新建文件夹

在服务器上新建一个fronted的文件夹，用于存放前台服务的一些文件夹和文件，将dist文件夹的压缩包上传，并且创建Dokcerfile和nginx.conf文件

[root@centos-7 fronted]#ls

dist.zip Dockerfile nginx.conf

将zip文件解压缩：

[root@centos-7 fronted]#unzip dist.zip

编写Dockerfile文件：

FROM nginx #基础镜像

COPY dist/ /usr/share/nginx/html/ #将dist下的文件拷贝到html目录下

COPY nginx.conf /etc/nginx/nginx.conf #用本地的nginx.conf配置文件替换nginx中的配置文件

编写nginx.conf文件：

worker_processes auto;

events {

worker_connections1024;

}

http {

include mime.types;

default_type application/octet-stream;

sendfile on;

keepalive_timeout65;

client_max_body_size 20m;

server {

listen80;

server_name localhost;

location/{

root/usr/share/nginx/html;

index index.html index.htm;

try_files $uri $uri/ /index.html;

}

error_page500 502 503 504 /50x.html;

location= /50x.html {

root html;

}

}

}

创建镜像

[root@centos-7 fronted]#docker build -t fronted:1.0 .

注意后面的点不要丢了。

运行容器

[root@centos-7 fronted]#docker run -d --name fronted -p 80:80 fronted:1.0

404153a8e7149113852dcdc7b76e464093bb9a07aa02fa26457e1f53c1e3ae0f

然后既可以访问本机地址的80端口了。