Django+Vue+Docker搭建接口測試平台實戰

一. 開頭說兩句

大家好，我叫林宗霖，是一位測試工程師，也是全棧測開訓練營中的一名學員。

在跟着訓練營學習完

Docker

容器技術系列的課程後，理所應當需要通過實操來進行熟悉鞏固。正好接口自動化測試平台需要遷移到新的測試伺服器上，就想要體驗一番

Docker

的“一次建構，處處運作”。這篇文章簡單介紹了下這次部署的過程，其中使用了

Dockerfile

定制鏡像和

Docker-Compose

多容器編排。

二. 項目介紹

項目采用的是前後端分離技術來實作的，前端是

Vue+ElementUI

，後端是

Django+DRF

，資料庫是

MySQL

，目前部署版本沒有其他中間件。

2.1 安裝docker和docker-compose

下述所有操作，皆在

Centos 7

環境下進行

1.清理或解除安裝舊版本：

sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine
           

2.更新yum庫

sudo yum install -y yum-utils
sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
           

3.安裝最新版本

sudo yum install docker-ce docker-ce-cli containerd.io
           

4.啟動Docker服務

sudo systemctl start docker
           

5.下載下傳docker compose安裝包

采用curl安裝的方式比直接用pip安裝好處是不怕缺少某些依賴

sudo curl -L "https://github.com/docker/compose/releases/download/1.28.6/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
           

6.修改docker compose的權限

sudo chmod +x /usr/local/bin/docker-compose
           

2.2 Dockerfile定制python容器

1. 首先把需要部署的django項目代碼放到特定目錄下（這裡是

   /data/test_object

   ）
2. 把django項目依賴封包件

   requirements.txt

   也放在該目錄下
3. 建立Dockerfile檔案：

   vim Dockerfile

4. Dockerfile内容：（注意：注釋别跟在語句後面，有些語句執行時會是以出現問題）：

# 基礎鏡像
FROM python:3.6.8

# 把輸出及時重定向到檔案，替代python -u
ENV PYTHONUNBUFFERED 1

# 建立目錄并切換工作目錄
RUN mkdir /code && mkdir /code/db
WORKDIR /code

# 添加檔案
ADD ./requirements.txt /code/

# 執行指令
RUN pip install -r requirements.txt

# 添加檔案
ADD . /code/
           

2.3 編寫Docker Compose容器編排

1. 同樣的目錄，建立docker-compose.yml檔案：

   vim docker-compose.yml

   ，内容（編排Python容器和Mysql容器）

# docker compose版本
version: "3.9"

# 服務資訊
services:

  # mysql容器，名字自定義
  db:
    image: mysql:5.7
    expose:
      - "3306"
    volumes:
      - ./db:/var/lib/mysql
    #設定資料庫表的資料集
    command: [
      '--character-set-server=utf8',
      '--collation-server=utf8_unicode_ci'
      ]
    environment:
      - MYSQL_DATABASE=xxxx
      - MYSQL_ROOT_PASSWORD=yyyy
    restart: always


  # django服務
  web:
    # 基于本路徑的Dockerfile建立python容器
    build: .
    command: bash -c "python ./test_plat_form/manage.py migrate && python ./test_plat_form/manage.py runserver 0.0.0.0:8000"
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    expose:
      - "8000"
    # 目前服務所依賴的服務，會先啟動依賴服務再啟動目前服務
    depends_on:
      - db
    # 容器ip是可變的，替代配置檔案中mysql的HOST的值；名字和上面的mysql容器服務的名字一緻
    links:
      - db
    volumes:
      - ./files/suites:/code/test_plat_form/suites
      - ./files/debugs:/code/test_plat_form/debugs
      - ./files/reoprts:/code/test_plat_form/reports
      - ./files/run_log:/code/test_plat_form/run_log
           

修改django項目setting.py檔案中的mysql的host，改成上面web節點中links的值

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'xxxx',
        'USER': 'root',
        'PASSWORD': 'yyyy',
        'HOST': 'db',  # 這裡進行修改
        'PORT': 3306
    }
}
           

執行指令

所在路徑：和Dockerfile等檔案同個路徑下

建構容器：

docker-compose build

運作容器：

docker-compose up

或者 背景運作容器：

docker-compose up -d

2.4 Vue項目的搭建

vue使用傳統的搭建方式即可:

• 伺服器配置node npm環境
• 安裝全局pm2
• 修改項目中api的host為伺服器的ip或域名
• 打包vue項目：

  npm run build

• 編寫個

  app.js

  啟動腳本，主要目的是是讀取dist目錄下的單頁面檔案(index.js)，監聽8080端口

const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();

app.use(express.static(path.resolve(__dirname, './dist')))
//讀取目錄下的單頁面檔案(index.js)，監聽8080端口。
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})

app.listen(8080);
           

1. 把打包好的dist目錄、app.js、package.json複制到項目目錄下
2. 進入項目目錄，安裝依賴：

   npm install

3. 啟動服務：

   pm2 start app.js

5、最終效果

運作容器日志：

三、總結