著者は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); // アプリケーション固有のログ記録、エラーのスロー、その他のロジックをここに記述します }); 実装のアイデアと注意事項
ここで注意すべき点が 1 つあります。ツール機能によって処理されるため、各モジュールのパスはノードによって読み取られるため、モジュール名は docker-compose.yml 内のサービス名およびコンテナ名と一致している必要があります。また、イメージがパッケージ化された後、docker-compose.yml 外のルートディレクトリのアンダースコアが docker-compose サービス名に接続されるため、Alibaba Cloud イメージリポジトリの名前は結合されたイメージ名と一致している必要があることに注意してください。上記は、ツール機能がさまざまなモジュールのイメージを普遍的に処理できるようにするためです。
以下もご興味があるかもしれません:
|
画像の色を変更するための CSS テクニックは非常にシンプルです。具体的なコードは次のとおりです。ヒ...
ソースからApacheをインストールする1. Apacheソースコードをアップロードして必要なソフト...
1. レンダリングJD効果シミュレーション効果 2. 原則高さと幅が0のボックスを用意しますこのボ...
テストでは、ページ定義がutf-8でエンコードされている場合、 js ファイルに中国語などのマルチバ...
さまざまな理由で、誰もが MySQL を再インストールする必要があると思います。 MySQL と Q...
単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...
この記事では、vue+echart を使って二重列チャートを実現するための具体的なコードを参考までに...
CSS の開発履歴についてはここでは紹介しません。ブログを書いている理由の 1 つは、フロントエンド...
1. ノーフープハングアップ信号を無視してプログラムを実行する追加メモnohup コマンドは、ハン...
1.ダウンロードして解凍する1. Zookeeperの紹介分散サービス フレームワークとして、Zoo...
CSSとは# CSS (Cascading Style Sheets の略) は、「カスケーディング...
この記事では、WeChatアプレットでジグソーパズルゲームを実装するための具体的なコードを参考までに...
目次方法1方法2 nginxをインストールした後、PHPコードを解析できないことがわかりました。解決...
背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...