Front-end one-click automatic deployment tool 🛠

As I have been in charge of many projects in the company recently, it is quite troublesome to deploy. There are also many deployment environments (including local development, testing and production), which take up a lot of time. I have also used continuous integration deployment tools such as Jenkins and GOCD. However, on the one hand, due to the troublesome configuration, many front-end colleagues do not configure these continuous integration tools and the company has a large number of projects. Both front-end and back-end users use the same Jenkins server, resulting in slow deployment. In addition, Jenkins could not be deployed in the production environment, which required VPN Intranet deployment. As a result, manual packaging and deployment were required for each deployment, which was very troublesome. So I made such a front-end one-click automatic deployment tool to reduce the waste of time brought by deployment projects.


Read the text below to familiarize yourself with the tool.

deploy-cli-service

The front-end one-click automated deployment scaffolding service supports development, test, and production multi-environment configurations. After the configuration is complete, the deployment is automatically completed with one click.

  • Making github.com/fuchengwei/…
  • Npm www.npmjs.com/package/dep…
  • Update log github.com/fuchengwei/…

1 installation

“Globally install deploy-cli-service“

npm install deploy-cli-service -g
Copy the code

“Install deploy-CLI-service locally“

npm install deploy-cli-service --save-dev
Copy the code

“If you view the version, the installation is successful“

deploy-cli-service -v
Copy the code

“Note: locally installed versions need to be added before callingnpx“

npx deploy-cli-service -v
Copy the code

2 Usage (The following uses global installation as an example)

“2.1 Viewing Help“

deploy-cli-service -h
Copy the code

“2.2 Initializing the Configuration File (In the Project Directory)“

deploy-cli-service init # or use the short deploy-cli-service I
Copy the code

The deploy.config.js file is generated in the root directory of the project. Only dev (development environment), test (test environment), and PROd (production environment) configurations are generated for initial configuration.


“2.3 Manually Creating or Modifying a Configuration File“

Those who do not use the initialization commands above can create the configuration file manually. Manually create the deploy.config.js file in the project root directory, copy the following code and modify as needed.

module.exports = {
  projectName: 'vue_samples'// Project name  privateKey: '/Users/fuchengwei/.ssh/id_rsa'.  passphrase: ' '.  dev: {
// Environment object name: 'Development Environment'// Environment name script: 'npm run build'// Package command host: '192.168.0.1'// Server addressPort: 22, // Server port number username: 'root', // Server login user name password: '123456'// Server login password distPath: 'dist'// Generate directory for local packaging webDir: '/usr/local/nginx/html', // Server deployment path (cannot be empty or'/') isRemoveRemoteFile: true// Whether to delete remote files (defaulttrue) },  test: { // Environment object name: 'Test environment'// Environment name script: 'npm run build:test'// Package command host: '192.168.0.1'// Server addressPort: 22, // Server port number username: 'root', // Server login user name password: '123456'// Server login password distPath: 'dist'// Generate directory for local packaging webDir: '/usr/local/nginx/html', // Server deployment path (cannot be empty or'/') isRemoveRemoteFile: true// Whether to delete remote files (defaulttrue) },  prod: { // Environment object name: 'Production environment'// Environment name script: 'npm run build:prod'// Package command host: '192.168.0.1'// Server addressPort: 22, // Server port number username: 'root', // Server login user name password: '123456'// Server login password distPath: 'dist'// Generate directory for local packaging webDir: '/usr/local/nginx/html', // Server deployment path (cannot be empty or'/') isRemoveRemoteFile: true// Whether to delete remote files (defaulttrue) } } Copy the code

“2.4 Deployment (In the Project Directory)“

Note: the command needs to be followed by a –mode environment object (e.g. “–mode dev”)

deploy-cli-service deploy --mode dev Or use deploy-cli-service d --mode dev
Copy the code

Enter Y or press Enter to start automatic deployment. If the following information is displayed, the deployment is complete


“2.5 Installing extensions locally“

If you use the local installation command, you can add the following code to the scripts in the package.json file in the project root directory

"scripts": {
  "serve": "vue-cli-service serve".  "build": "vue-cli-service build".  "lint": "vue-cli-service lint".  "deploy:dev": "deploy-cli-service deploy --mode dev". "deploy:test": "deploy-cli-service deploy --mode test". "deploy:prod": "deploy-cli-service deploy --mode prod" } Copy the code

Then use the following code to complete the deployment as well

npm run deploy:dev
Copy the code

Finally, if you think it is good and useful, please give a Star 😜😜😜.