Automatic upload of front-end code
The H5 project of our company was deployed in the cloud by ourselves after front-end development. Before, we manually uploaded the code after packaging for each development test. In line with the principle that repetitive work can be handed over to the machine, I decided to write a script command to achieve automatic upload;
1. Get started;
Our company uses Ali Cloud; Start with documentation; https://help.aliyun.com/document_detail/32070.html?spm=a2c4g.11186623.6.786.P96P8G; Refer to the documentation to learn that you can use Node to perform uploads in your project;Copy the code
- 1.1 First configure the script command in the package.json of the project; (The project uses the VUE technology stack)
- And install ali-OSS plug-in;
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"."devbuild": "cross-env NODE_CONFIG=dev node build/build.js && cross-env NODE_CONFIG=dev node file"."build": "cross-env NODE_CONFIG=pro node build/build.js && cross-env NODE_CONFIG=pro node file"
},
"devDependencies": {
"ali-oss": "^ 6.0.0",}Copy the code
- 1.2 Add a file.js file to the project directory. The specific uploading work of the file is negated;
const fs = require('fs');
const co = require('co'); // Asynchronous process control co module; const path = require('path');
const filePathRoot = path.resolve(__dirname, './dist');
const OSS = require('ali-oss');
const files = [];
const uploadFlagList = [];
let bucket = ' '; // The bucket space name of the OSSlet remotePath = ' '; // Remote OSS file name (as required) const NODE_CONFIG = process.env.node_config;if (NODE_CONFIG == 'dev') {
bucket = 'xxx';
remotePath = 'xxx';
} else if (NODE_CONFIG == 'pro') {
bucket = 'xxx';
remotePath = 'xxx'; } // Build the OSS object, here you can ask your background or operation and maintenance personnel to open the upload OSS account permission; const client = new OSS({ region:'xxx',
accessKeyId: 'xxx',
accessKeySecret: 'xxx', bucket }); (() => {// Recursively fetch after packing./dist folder path of all filesfunction readDirSync(filePath) {
const filePaths = fs.readdirSync(filePath);
filePaths.forEach((item) => {
const cur_path = `${filePath}/${item}`;
const info = fs.statSync(cur_path);
if (info.isDirectory()) {
readDirSync(cur_path);
} else{ files.push(cur_path); }}); }readDirSync(filePathRoot);
co(function* () {
try {
for (letindex = 0; index < files.length; index += 1) { const fileObj = files[index]; // Submit file to OSS, note here, Ali cloud does not need to create a new folder, as long as there is a path, Const result = yield client.put(fileobj.replace (filePathRoot, remotePath), fileObj); uploadFlagList.push(result);if(! result)break; } const uplaodFlag = uploadFlagList.find(item => item.res.statusCode ! = 200);if (uplaodFlag) {
console.log('Upload failed');
} else {
console.log('Upload successful');
}
} catch (e) {
console.log('Upload failed, please check log:', e);
}
});
})();
Copy the code
Two. Have fun packing the test.
"devbuild": "cross-env NODE_CONFIG=dev node build/build.js && cross-env NODE_CONFIG=dev node file"
Copy the code
Execute the package command NPM run devbuild(develop test package, next time, configure output package for different environments and multi-page application output configuration); NODE_CONFIG=dev node file.js file is executed immediately after the project is packaged.
The js recursively traverses the path of all the files in the./dist folder and uploads them to your designated OSS space. If there is a console that failed to upload, it will print log(‘ upload failed! ‘) to remind you;
The common problem is that there is no space name, or the space name is wrong; Upload failed, please check log: Error: Please create a bucket first at Client.proto._objectRequestParams (C:\xxxxx\node_modules\ali-oss\lib\object.js:530:11) at Client.putStream (C:\xxxxxxxxx\node_modules\ali-oss\lib\object.js:122:23) at Client.put (C:\xxxxxx\node_modules\ali-oss\lib\object.js:69:23) at <anonymous>Copy the code