インターフェーステストプラットフォームを構築するための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 アニメーション – ステップ機能の説明

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

推薦する

mysql8.0.11 winx64 手動インストールと設定チュートリアル

まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...

Vueは左上と右上のスライドナビゲーションを実装します

ナビゲーションなどは日々の開発でよく使うので、記録として記事を書きます。ナビゲーションは終了/開始位...

MySQL 8.0 以降の一般的なコマンドの詳細な説明

リモートアクセスを有効にする次のコマンドを実行して、root ユーザーのリモート アクセス権を有効に...

Mysql binlog ログファイルが大きすぎる場合の解決策

目次1. 関連するbinlog設定2. binlogに関する詳細設定2.1 バイナリログモードの変更...

ウェブページ作成のテスト問題を全て解けますか?

Web ページのデザインに関する質問です。すべてに答えられるでしょうか? 1. 単一選択の質問 (...

HTML フォーマットの json のサンプルコード

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...

あなたが知らない Linux KDE アプリケーション 11 選

翻訳Kool Desktop Environment の略称。 Linux、Unix、FreeBSD...

MySql でメモリ使用量を削減する方法の詳細な説明

序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...

詳細なアイデアを備えたシンプルな計算機の HTML 実装

コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...

CSS3 マウスホバー遷移ズーム効果

以下は、純粋な CSS で記述された画像マウスホバーズーム効果です。実際、基本原理は非常に単純です。...

JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明

目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...

セマンティックタグを使用して、IE6、7、8と互換性のあるHTMLを記述します。

HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

docker+devpi を使用してローカル pypi ソースをビルドする方法

以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...