インターフェーステストプラットフォームを構築するためのDjango+Vue+Dockerの詳細な説明

インターフェーステストプラットフォームを構築するためのDjango+Vue+Dockerの詳細な説明

1. 冒頭の2つの単語

みなさんこんにちは。私の名前はLin Zonglinです。私はテストエンジニアであり、フルスタックテストトレーニングキャンプの学生です。

トレーニングキャンプでDockerコンテナ技術シリーズのコースを修了した後は、実践的な操作を通じて自然に理解できるようになります。たまたまインターフェース自動化テスト プラットフォームを新しいテスト サーバーに移行する必要があったため、 Dockerの「一度ビルドすればどこでも実行できる」機能を体験したいと考えました。この記事では、 Dockerfileカスタム イメージとDocker-Composeマルチコンテナ オーケストレーションを使用するデプロイメント プロセスについて簡単に説明します。

2. プロジェクトの紹介

このプロジェクトは、フロントエンドとバックエンドの分離技術を使用して実装されています。フロントエンドはVue+ElementUI 、バックエンドはDjango+DRF 、データベースはMySQLであり、現在デプロイされているバージョンには他のミドルウェアはありません。

2.1 dockerとdocker-composeをインストールする

以下の操作はすべてCentos 7環境で実行されます

1. 古いバージョンをクリーンアップまたはアンインストールします。

sudo yum dockerを削除します\
                  dockerクライアント\
                  docker-client-最新 \
                  docker-common \
                  docker-最新 \
                  docker-最新-logrotate \
                  docker-logrotate \
                  dockerエンジン

2. yumライブラリを更新する

sudo yum インストール -y yum-utils
sudo yum-config-manager \
    --リポジトリを追加\
    https://download.docker.com/linux/centos/docker-ce.repo

3. 最新バージョンをインストールする

sudo yum インストール docker-ce docker-ce-cli containerd.io

4. Dockerサービスを開始する

sudo systemctl dockerを起動します

5. docker composeインストールパッケージをダウンロードする

curl を使用してインストールする利点は、依存関係が不足することを心配する必要がないことです。

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コンテナ

まず、デプロイするDjangoプロジェクトコードを特定のディレクトリ(ここでは/data/test_object )に配置します。

Djangoプロジェクトの依存パッケージファイルrequirements.txtをこのディレクトリに置きます。

Dockerfileファイルを作成する: vim Dockerfile

Dockerfile の内容: (注: ステートメントの後にコメントを入れないでください。一部のステートメントの実行時に問題が発生する可能性があります):

# ベースイメージ FROM python:3.6.8

# python -u を置き換えて、出力をファイルにリダイレクトします。
環境変数 PYTHONUNBUFFERED 1

# ディレクトリを作成し、作業ディレクトリを切り替えます。RUN mkdir /code && mkdir /code/db
WORKDIR /コード

# ファイルを追加 ADD ./requirements.txt /code/

# コマンド RUN pip install -r requirements.txt を実行します。

# ファイルを追加 ADD ./code/

2.3 Docker Compose コンテナの作成

同じディレクトリを配置し、docker-compose.yml ファイルを作成します: vim docker-compose.yml 、コンテンツ (Python コンテナと Mysql コンテナをオーケストレーション)

# docker-compose バージョン: "3.9"

# サービス情報サービス:

  # mysql コンテナ、カスタム名 db:
    イメージ:mysql:5.7
    さらす:
      - 「3306」
    ボリューム:
      - ./db:/var/lib/mysql
    #データベーステーブルのデータセットを設定するコマンド: [
      '--character-set-server=utf8',
      '--collat​​ion-server=utf8_unicode_ci'
      ]
    環境:
      -MYSQL_DATABASE=xxxx で始まる
      -MYSQL_ROOT_PASSWORD=yyyy
    再起動: 常に


  # Django は Web を提供します:
    # このパスの Dockerfile に基づいて Python コンテナを作成します。build: 。
    コマンド: bash -c "p​​ython ./test_plat_form/manage.py migrate && python ./test_plat_form/manage.py runserver 0.0.0.0:8000"
    ボリューム:
      - .:/コード
    ポート:
      - 「8000:8000」
    さらす:
      - 「8000」
    # 現在のサービスが依存するサービスは、まず依存サービスを起動し、次に現在のサービスを起動します。depends_on:
      -db
    # コンテナの IP は可変で、構成ファイル内の mysql の HOST 値を置き換えます。名前は、上記のリンクの mysql コンテナ サービスの名前と一致します。
      -db
    ボリューム:
      - ./files/suites:/code/test_plat_form/suites
      - ./files/debugs:/code/test_plat_form/debugs
      - ./files/reoprts:/code/test_plat_form/レポート
      - ./files/run_log:/code/test_plat_form/run_log

Djangoプロジェクトのsetting.pyファイル内のmysqlホストを、上記のWebノードのlinksの値に変更します。

データベース = {
    'デフォルト': {
        'エンジン': 'django.db.backends.mysql',
        '名前': 'xxxx',
        'ユーザー': 'root',
        'パスワード': 'yyyy',
        'HOST': 'db', # ここで変更 'PORT': 3306
    }
}

コマンドを実行

パス: docker-compose build build
コンテナを実行します: docker-compose upまたは、コンテナをバックグラウンドで実行します: docker-compose up -d

2.4 Vueプロジェクトの構築

Vue は従来の方法で構築できます。

サーバー構成ノードnpm環境

グローバルpm2をインストールする

プロジェクト内のAPIのホストをサーバーのIPまたはドメイン名に変更します

vueプロジェクトをパッケージ化します: npm run build app.js起動スクリプトを記述します。主な目的は、distディレクトリ内の単一ページファイル(index.js)を読み取り、ポート8080をリッスンすることです。

定数 fs = require('fs');
定数パス = require('path');
定数 express = require('express');
express() は、定数です。

app.use(express.static(path.resolve(__dirname, './dist')))
// ディレクトリ内の単一ページ ファイル (index.js) を読み取り、ポート 8080 をリッスンします。
app.get('*', 関数(req, res) {
    定数 html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})

アプリをリッスンします(8080);

パッケージ化されたdistディレクトリ、app.js、package.jsonをプロジェクトディレクトリにコピーします。

プロジェクトディレクトリに入り、依存関係をインストールします: npm install install

サービスを開始する: pm2 start app.js 5. 最終効果

コンテナログを実行します。

ブラウザを使用してhttp://ip:8080にアクセスし、ログインします。

結論

現時点ではこのプロジェクトの構成は比較的シンプルで、オーケストレーションに使用されるコンテナは 2 つだけです。しかし、これを例にとると、より多くのコンテナを構築する際には、まずプロジェクトの構成に合わせて異なるコンテナをカスタマイズし、その後コンテナ間の組織関係や依存関係を計画することで、スムーズに構築できると考えています。

Django+Vue+Docker を実際に使用してインターフェース テスト プラットフォームを構築する方法については、これで終わりです。Django+Vue+Docker インターフェース テストに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Django Admin+HttpRunner1.5.6 によるシンプルなインターフェース テスト プラットフォームの実装
  • Djangoはクロスドメインを構成し、テストインターフェースを開発します
  • Python 自動テスト三部作リクエスト + Django によるインターフェーステストの実現
  • Python Django でインターフェースを記述し、Jmeter でテストする方法

<<:  CSS3 アニメーション – ステップ機能の説明

>>:  フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する

推薦する

Vueはタブナビゲーションバーを実装し、左右のスライド機能をサポートしています

この記事では主に、Vue を使用してタブ ナビゲーション バーを実装し、flex レイアウトを使用し...

MyBatis 動的 SQL の包括的な説明

目次序文動的SQL 1. まずモジュールのディレクトリ構造を見てみましょう2. 物理モデリングと論理...

MySQLの連結関数CONCATの使い方の詳しい説明

前回の記事では、MySQL の置換関数 (Replace) とセグメンテーション関数 (SubStr...

ファイルアップロードスタイルの詳細を実装するjs

目次1. 概要2. オブジェクト作成のパラメータ3. 監視例4. 使用方法5. ソースコード1. 概...

MySQL 8.0.12 のインストールと設定方法のグラフィック チュートリアル (Windows10)

この記事は、参考のためにMySQL 8.0.12のインストールグラフィックチュートリアルを記録してい...

MySQLのスロークエリの詳細な説明

MySQL操作情報のクエリ show status -- すべての MySQL 操作情報を表示します...

CSSでプロセスナビゲーション効果を実現する(3つの方法)

CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip...

Linux で Sudo を使用して権限を委譲する

sudo 権限委譲の概要su スイッチ ID: su –l ユーザー名 –c 'コマンド&#...

CentOS 7 で PHP 5.4 を 5.6 にアップグレードする方法の簡単な分析

1.ターミナルに入ったらPHPのバージョンを確認するphp -v出力は次のようになります。 PHP ...

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...

【HTML要素】画像の埋め込み方法

img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。画像を埋め込むには、...

CSSアニメーションがJSによってブロックされるかどうかについての簡単な議論

CSS のアニメーション部分は JS によってブロックされますが、transform のアニメーショ...

CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明

最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...

ネイティブJavaScriptカルーセル実装方法

この記事では、JavaScriptカルーセルの実装方法を参考までに紹介します。具体的な内容は次のとお...

HTML 要素 (タグ) とその使用法

a : ハイパーリンクの開始位置または宛先位置を示します。頭字語: 単語の最初の文字からなる略語を示...