Detailed explanation of Django+Vue+Docker to build an interface testing platform

1. Two words at the beginning

Hello everyone, my name is Lin Zonglin. I am a test engineer and a student in the full-stack testing training camp.

After completing the Docker container technology series of courses in the training camp, it is natural to familiarize yourself with it through practical operations. The interface automation testing platform happened to need to be migrated to a new test server, so I wanted to experience Docker 's "build once, run everywhere". This article briefly introduces the deployment process, which uses Dockerfile custom images and Docker-Compose multi-container orchestration.

2. Project Introduction

The project is implemented using front-end and back-end separation technology. The front-end is Vue+ElementUI , the back-end is Django+DRF , the database is MySQL , and the current deployed version has no other middleware.

2.1 Install docker and docker-compose

All the following operations are performed in Centos 7 environment

1. Clean up or uninstall old versions:

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

2. Update the yum library

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

3. Install the latest version

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

4. Start the Docker service

sudo systemctl start docker

5. Download the docker compose installation package

The advantage of using curl to install is that you don't have to worry about missing some dependencies.

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. Modify the permissions of docker compose

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

2.2 Dockerfile custom python container

First, put the Django project code to be deployed in a specific directory (here is /data/test_object )

Put the Django project dependency package file requirements.txt in this directory

Create a Dockerfile file: vim Dockerfile

Dockerfile content: (Note: Do not put comments after statements, as this may cause problems when executing some statements):

# Base image FROM python:3.6.8

# Redirect the output to the file in time, replacing python -u
ENV PYTHONUNBUFFERED 1

# Create a directory and switch the working directory RUN mkdir /code && mkdir /code/db
WORKDIR /code

# Add file ADD ./requirements.txt /code/

# Execute the command RUN pip install -r requirements.txt

# Add file ADD ./code/

2.3 Writing Docker Compose Containers

Arrange the same directory and create a docker-compose.yml file: vim docker-compose.yml , content (orchestrate Python container and Mysql container)

# docker-compose version: "3.9"

# Service information services:

  # mysql container, custom name db:
    image:mysql:5.7
    expose:
      - "3306"
    volumes:
      - ./db:/var/lib/mysql
    #Set the dataset of the database table command: [
      '--character-set-server=utf8',
      '--collation-server=utf8_unicode_ci'
      ]
    environment:
      -MYSQL_DATABASE=xxxx
      -MYSQL_ROOT_PASSWORD=yyyy
    restart: always


  # Django serves web:
    # Create a python container based on the Dockerfile in this path 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"
    # The service that the current service depends on will start the dependent service first and then start the current service depends_on:
      -db
    # The container IP is variable, replacing the HOST value of mysql in the configuration file; the name is consistent with the name of the mysql container service above 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

Modify the mysql host in the Django project setting.py file to the value of links in the web node above

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'xxxx',
        'USER': 'root',
        'PASSWORD': 'yyyy',
        'HOST': 'db', # Modify here 'PORT': 3306
    }
}

Execute Command

Path: docker-compose build build
Run the container: docker-compose up or run the container in the background: docker-compose up -d

2.4 Vue project construction

Vue can be built using the traditional method:

Server configuration node npm environment

Install global pm2

Modify the host of the API in the project to the server's IP or domain name

Package the vue project: npm run build Write an app.js startup script, the main purpose of which is to read the single page file (index.js) in the dist directory and listen to port 8080

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

app.use(express.static(path.resolve(__dirname, './dist')))
//Read the single page file (index.js) in the directory and listen to port 8080.
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})

app.listen(8080);

Copy the packaged dist directory, app.js, and package.json to the project directory

Enter the project directory and install dependencies: npm install install

Start the service: pm2 start app.js 5. Final effect

Run container logs:

Use the browser to access http://ip:8080 and log in:

Conclusion

The composition of this project is relatively simple at present, and only two containers are used for orchestration. But taking this as an example, when building more containers, we first customize different containers according to the project composition, and then plan the organizational relationship and dependency relationship between the containers. I believe that they can be built smoothly.

This is the end of this article about the practical application of Django+Vue+Docker to build an interface testing platform. For more relevant Django+Vue+Docker interface testing content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!