The author has been working on the micro front-end project for more than a year. One team managed ten micro applications. After the deployment of Docker mirror, the release operation took tens of minutes instead of the original one minute for the script to connect directly to the server, especially uploading each application to its own Ali Cloud warehouse. Here is to write a script one key packaging Docker image and upload Ali cloud. This article is only about how to create a script to help ease the burden on developers. For the configuration of docker-compose, see: Deploy a micro-front-end project in a variety of comfortable poses (Part 1: Pack and upload).


Direct up code

/** * @name docker * @author weilan * @time 2021.02.22 */ const fs = require('fs'); const path = require('path'); const util = require('util'); const { log } = require('.. /utils/log'); const exec = util.promisify(require('child_process').exec); const sub_app_ath = path.resolve(); let sub_apps = fs.readdirSync(sub_app_ath).filter(i => /^subapp|master/.test(i)); const inquirer = require('inquirer'); // ** * @name const question = [{type: 'confirm', name: 'dist', message: 'Do you want to package front-end static resources? ',}, {type: 'confirm', name: 'env', message:' Please select whether you want to package to a non-networked Intranet deployment ', when: Function (answers) {// return answers.dist}}, {type: 'checkbox', name: 'apps', message: 'Please select the module to publish ', choices: sub_apps, validate: Function (val) {if (val.length) {return true;} return "not null "; ] /** * @Name */ Inquirer. PROMPT (Question). Then (async (Answer) => {let subApps = answer.apps; let buildScript = answer.env ? 'yarn build --Intranet' : 'yarn build'; let needDist = answer.dist; let now = +new Date(); // Log into AliCloud const {error: LoginError} = await exec('docker login --username= username --password='); If (loginError) {, 'Login center failed ') return; } console.log(' Start processing ${json.stringify (subApps)}...... `); subApps.reduce((chain, item) => { return chain.then(() => publishIamge(item, now, needDist, buildScript)) }, Promise.resolve()) }); /** * @Name package image and push AliCloud * @Param {String} ModuleName moduleName * @Param {String} now current version timestamp * @Param {Boolean} Needdist / async function publishIamge(moduleName, now, needDist, BuildScript) {if (NeedDist) {console.log(' Start packing static front-end resources' + Modulename); const { error } = await exec(buildScript, { cwd: path.resolve(moduleName) }); If (error) {, 'front-end code packing error: ', error) return; } + 'front-end code was successfully packaged ')} // packaging mirror console.log(' Start packaging mirror ${moduleName}...... `); const { stdout: buildStdout, error: buildError } = await exec('docker-compose build ' + moduleName); If (BuilderError) {, 'mirror-packing error ') return; } log.cyan(buildstDout)' The image is packaged, start making the image tag ') const imageName = 'ibp2fe_' + moduleName; const { error: tagError } = await exec(`docker tag ${imageName}${imageName}:${now}`); If (tagError) {, 'mirror-tag exception ') return; }' The last TAB has been updated, start updating the last TAB ') // Updating the last TAB const {error: tagLastError } = await exec(`docker tag ${imageName}${imageName}`); If (tagLastError) {, 'mirroring last tag exception ') return; }' mirrored last tag updated, start uploading ') const {stdout: pushStdout, error: pushError } = await exec('docker push' + imageName); If (PusHror) {, 'Image upload failed ') return; } log.cyan(pushStdout)' image upload successful ')} process.on('unhandledRejection', (reason, p) => { console.log('Unhandled Rejection at: Promise', p, 'reason:', reason); // application specific logging, throwing an error, or other logic here });

Implement ideas and matters needing attention

  1. Think first about how the command line will interact, selectively confirm the configuration that needs to be done to the developer, and finally select the module to publish
  2. Login your Aliyun account in advance
  3. Here you can choose to execute all the selected modules concurrently, but then the log output will be out of order, and the computer will temporarily crash under great pressure; So I’m going to do it sequentially here
  4. Package the front-end static resources of the selected module
  5. Do docker-compose build XXX to package the selected module image

One important thing to note here is that since this is handled by utility functions and the path of each module is read by node, it is better for your module name to be the same as the service name and container name in docker-compose.yml. Also note that the root of your image is linked to your docker-compose service name by an underscore outside of your docker-compose. YML, so it is best for your AliCloud image repository to be named in the same way as the name of the composite image. All of the above is for the convenience of the utility function to be able to handle each module image.

  1. Make mirrored labels. Here I’m going to make a version of this release timestamp and a version of lastet, so that I can roll it back, and then I can deploy it without worrying about the label version. You can also pull git tags to be mirrored tags.
  2. After making the image, upload it to Ali Cloud Image Center