使用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 executable in 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 (583 kB)
Installing collected packages: setuptools
Successfully installed setuptools-45.1.0

2、創建項目

• 在虛擬環境中安裝django包

(django-vue-demo) C:\Users\Administrator>pip install django==2.0
Collecting django==2.0
  Using cached Django-2.0-py3-none-any.whl (7.1 MB)
Collecting pytz
  Using cached pytz-2019.3-py2.py3-none-any.whl (509 kB)
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 (47 kB)
Installing collected packages: pymysql
Successfully installed pymysql-0.9.3

• 在__init__.py文件中導入pymysql

在與settings同級的__init__.py文件中導入pymysql：

import pymysql

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.

為了解決這個問題，我們在后台可以進行一些配置來解決這個問題，詳情查看我的這篇博客：https://www.cnblogs.com/shenjianping/p/11718925.html

5、寫一個測試API

def test(request):
    result = {
        "meta":{
            "code":2001,
            "message":"請求失敗"
        },
        "data":[]
    }
    try:
        UserSet = models.UserInfo.objects.values('id','username','password','position','age')
        result["meta"]["code"]=2000
        result["meta"]["message"]="請求成功"
        result["data"]=list(UserSet)
        print(UserSet)
    except Exception 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 id is 8

mysql> 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.2
RUN 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 runserver 0.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
√ Installed 1 packages
√ Linked 3 latest versions
√ Run 0 scripts
√ All packages installed (4 packages installed from npm registry, used 2s(netwo
rk 2s), speed 62.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/'
    })
    return req
  }
}

在頁面中進行調用接口，並傳遞給子組件進行渲染：

<template>
    <div>
    <Table v-bind:testList="testList" v-loading="tableLoading"></Table>
    </div>
</template>

<script>
  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)
        })
      }
    }
  };
</script>

<style scoped>

</style>

子組件：

<template>
    <el-table
            :data="testList"
            style="width: 100%">
        <el-table-column
                prop="username"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密碼"
                width="180">
        </el-table-column>
        <el-table-column
                prop="position"
                label="職位">
        </el-table-column>
    </el-table>
</template>

<script>
  export default {
    name: "table",
    data() {
      return {
      }
    },
    props:{
      testList:Array
    }
  };
</script>

<style scoped>

</style>

此時，就可以正常開發，基於此進行下面的部署。

（二）項目部署

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_connections  1024;
}
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    keepalive_timeout  65;
 
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  localhost;
        location / {
           root   /usr/share/nginx/html;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
        }
        error_page   500 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端口了。