スクリプトを使用して、ワンクリックでDockerイメージをパッケージ化してアップロードします。

スクリプトを使用して、ワンクリックでDockerイメージをパッケージ化してアップロードします。

著者は1年以上マイクロフロントエンドプロジェクトに取り組んできました。チームは10個のマイクロアプリケーションを管理しています。Dockerイメージのデプロイに切り替えた後、リリース操作は、元のスクリプトがサーバーに直接接続する場合の1分から、特に各アプリケーションをそれぞれのAlibaba Cloudウェアハウスにアップロードする場合に数十分に変わりました。ここでは、Docker イメージをワンクリックでパッケージ化し、Alibaba Cloud にアップロードするための別のスクリプトを作成します。

この記事では、開発者の負担を軽減するためのスクリプトの作成方法についてのみ説明します。docker-compose の設定については、「さまざまな姿勢でマイクロフロントエンドプロジェクトを快適にデプロイする (パート 1: パッケージ化とアップロード)」を参照してください。

レンダリング

コードに直接

/**
 * @name docker イメージのパッケージ化とアップロード スクリプト * @author weilan
 * @時刻 2021.02.22
 */
定数 fs = require('fs');
定数パス = require('path');
'util' が必要です。
const { log } = require('../utils/log');
const exec = util.promisify(require('child_process').exec);
定数sub_app_ath = path.resolve();
sub_apps = fs.readdirSync(sub_app_ath).filter(i => /^subapp|master/.test(i)); とします。
const inquirer = require('inquirer'); // コマンドラインインタラクション用/**
 * @name コマンドラインインタラクション設定項目*/
const 質問 = [
 {
  タイプ: '確認'、
  名前: 'dist',
  メッセージ: 'フロントエンドの静的リソースをパッケージ化する必要がありますか? '、
 },
 {
  タイプ: '確認'、
  名前: 'env',
  メッセージ: 「オフラインイントラネット展開用にパッケージ化する必要があるかどうかを選択してください」
  when: function (answers) { // 現在の質問は、回答が真の場合にのみ尋ねられます return answers.dist
  }
 },
 {
  タイプ: 'チェックボックス',
  名前: 'アプリ',
  メッセージ: '公開するモジュールを選択してください'
  選択肢: サブアプリ、
  検証: 関数 (val) {
   if (val.length) { // チェック true を返す;
   }
   「選択範囲を空にすることはできません」を返します。
  }
 },
]

/**
 * @name コマンドインタラクション構成結果に基づいて論理処理を実行します*/
inquirer.prompt(質問).then(async (回答) => {
 subApps = answer.apps; とします。
 buildScript を answer.env とします。'yarn build --Intranet' : 'yarn build';
 needDist = answer.dist; とします。
 now = +new Date(); とします。
 // Alibaba Cloud にログイン const { error: loginError } = await exec('docker login --username=哈哈哈--password=嘿嘿registry.cn-zhangjiakou.aliyuncs.com');
 (ログインエラー) {
  log.red(loginError, 'ミラーセンターへのログインに失敗しました')
  戻る;
 }
 console.log(`${JSON.stringify(subApps)} の処理を​​順番に開始します......`);
 subApps.reduce((チェーン、アイテム) => {
  戻り値 chain.then(() => publishIamge(item, now, needDist, buildScript))
 }, Promise.resolve())
});

/**
 * @name イメージをパッケージ化して Alibaba Cloud にプッシュします* @param {String} moduleName モジュール名* @param {String} now 現在のバージョンのタイムスタンプ* @param {Boolean} needDist フロントエンドの静的リソースをパッケージ化するかどうか* @param {String} buildScript フロントエンドの静的リソースのパッケージ化コマンド*/
非同期関数 publishIamge(moduleName, now, needDist, buildScript) {
 //フロントエンドの静的リソースをパッケージ化する if (needDist) {
  console.log('フロントエンドの静的リソースのパッケージ化を開始します' + moduleName);
  const { error } = await exec(buildScript, { cwd: path.resolve(moduleName) });
  if (エラー) {
   log.red(moduleName, 'フロントエンドコードのパッケージエラー:', error)
   戻る;
  }
  log.green(moduleName + 'フロントエンドコードが正常にパッケージ化されました')
 }
 // イメージのパッケージ化 console.log(`イメージ ${moduleName} のパッケージ化を開始します ......`);
 const { stdout: buildStdout、エラー: buildError } = await exec('docker-compose build ' + moduleName);
 ビルドエラーの場合
  log.red(buildError, 'ミラーパッケージエラー')
  戻る;
 }
 log.cyan(ビルドStdout)
 log.green('イメージのパッケージ化が完了しました。イメージタグの作成を開始します')
 // 画像タグを更新 const imageName = 'ibp2fe_' + moduleName;
 const { エラー: tagError } = await exec(`docker tag ${imageName} registry.cn-zhangjiakou.aliyuncs.com/futureweb/${imageName}:${now}`);
 タグエラーの場合
  log.red(tagError, 'ミラータグ例外')
  戻る;
 }
 log.green('ミラー バージョン タグが更新されました。最後のタグの更新を開始します')
 // イメージタグの最新バージョンを更新します。const { error: tagLastError } = await exec(`docker tag ${imageName} registry.cn-zhangjiakou.aliyuncs.com/futureweb/${imageName}`);
 if (タグ最終エラー) {
  log.red(tagError, '最後のタグ例外をミラーします')
  戻る;
 }
 log.green('最後のタグをミラーリングして、アップロードを開始します')
 const { stdout: pushStdout、エラー: pushError } = await exec('docker push registry.cn-zhangjiakou.aliyuncs.com/futureweb/' + imageName);
 プッシュエラーの場合
  log.red(pushError, '画像のアップロードに失敗しました')
  戻る;
 }
 log.cyan(pushStdout)
 log.green('画像のアップロードに成功しました')
}

process.on('unhandledRejection', (reason, p) => {
 console.log('Promise での未処理の拒否', p, '理由:', reason);
 // アプリケーション固有のログ記録、エラーのスロー、その他のロジックをここに記述します
});

実装のアイデアと注意事項

  • まず、コマンドライン対話方式を検討し、開発者が選択的に行う必要がある構成を確認させ、最後にリリースするモジュールを選択します。
  • 事前にAlibaba Cloudアカウントにログインしてください
  • ここでは、選択したすべてのモジュールを同時に実行することを選択できますが、ログ出力は順序どおりに行われず、コンピュータは大きな負荷のために一時的にフリーズします。そのため、ここでは順次処理方式を使用します。
  • 選択したモジュールのフロントエンドの静的リソースをパッケージ化します
  • 選択したモジュールイメージをパッケージ化するには、docker-compose build xxx を実行します。

ここで注意すべき点が 1 つあります。ツール機能によって処理されるため、各モジュールのパスはノードによって読み取られるため、モジュール名は docker-compose.yml 内のサービス名およびコンテナ名と一致している必要があります。また、イメージがパッケージ化された後、docker-compose.yml 外のルートディレクトリのアンダースコアが docker-compose サービス名に接続されるため、Alibaba Cloud イメージリポジトリの名前は結合されたイメージ名と一致している必要があることに注意してください。上記は、ツール機能がさまざまなモジュールのイメージを普遍的に処理できるようにするためです。

  1. ミラータグを作成します。ここでは、今回のリリースのタイムスタンプ付きバージョンと最新バージョンを作成します。前者はロールバックに便利で、後者はタグバージョンを気にせずに運用・保守展開するのに便利です。 Git タグをプルしてイメージ タグを作成することもできます。
  2. イメージを作成したら、Alibaba Cloud Image Centerにアップロードします。
以下もご興味があるかもしれません:
  • Dockerイメージ内のnoneイメージ操作を削除する
  • Dockerイメージが消える問題を解決する
  • Dockerとイメージの操作方法
  • Docker イメージのインポートとエクスポートのコード例
  • Docker イメージのダウンロードが遅すぎる場合の解決策
  • Dockerイメージ構築原理の分析(Dockerをインストールしなくてもイメージを構築できる)
  • Dockerビルドキットを使用して、Raspberry Piで使用できるDockerイメージを構築します。
  • Dockerイメージを完全にアンインストールする手順

<<:  HTML コード例: ハイパーリンクの詳細な説明

>>:  HTML/CSSにおける記号論の詳細な説明

推薦する

指定フィールドによるMySQLカスタムリストのソートの実装

問題の説明ご存知のとおり、MySQL でフィールドを昇順に並べ替える SQL は次のとおりです (i...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

MySQL フェイルオーバー ノート: アプリケーション対応設計の詳細な説明

1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...

Linux でファイアウォールがオフになっているかどうかを確認する方法

1. サービス方法ファイアウォールのステータスを確認します。 [root@centos6 ~]# サ...

カルーセルバナーの自動回転効果を実現する純粋な CSS

さっそくコードを見てみましょう * { マージン: 0; パディング: 0; } 。容器 { マージ...

Win10 DVWA のダウンロード、インストール、構成のグラフィック チュートリアルの詳細な説明 (初心者向け学習侵入)

コンピュータ システムが再インストールされ、侵入テスト学習環境 DVWA を再インストールする必要が...

さまざまなHTTPリターンステータスコードの詳細な説明

サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...

フォームファイル選択ボックスのスタイルをカスタマイズする例

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

入力選択スタイルを変更する CSS 疑似クラスのサンプルコード

注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...

Tomcat で server.xml と content.xml を変更した後の自動復元の問題の解決方法

設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...

mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します

シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...

アバター変更機能を実装するJavaScript

この記事では、アバター変更機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

Vue でのカスタムディレクティブの基本的な使用方法

目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...

メタビューポートタグ(モバイルブラウジングズームコントロール)の使用方法

OP が現在のファームウェアで Web ページを開くと、常に 50% にズームアウトされてから表示さ...

最もよく使われるHTMLエスケープシーケンス

HTML では、<、>、& などは特別な意味を持ち (<、> はリン...