What is front-end automation

Front-end automation means not automatically generating code, but automating build projects.

Without automation, our front-end workflow from development to commissioning might look like this:

1. Write code on the local machine

2. On the CLI, run NPM run unit/lint to view the unit test/ESLint verification result

3. Commit code and push to git remote repository

4. Run NPM run build to build the project

5. Send packets to the test server using SSH/FTP

In this process, manual operation must be repeated at every step, which greatly increases the time cost and cannot guarantee the accuracy of operation. There is no automatic feedback mechanism for the results of unit or build, and manual check is required to run the results. Finally, manual login to the server to execute scripts is very tedious.

With the introduction of automation, the process becomes:

1. Write code on the local machine

2. Commit code and push it to git remote repository

3. Git hook triggers Jenkins build job

4. Pull project code from Jenkins Job, run NPM run unit/lint and NPM run build

5. Execute the deployment script of the test server in Jenkins Job

In the automated process, only step 1 and Step 2 need manual operation, the other steps are automatic operation, is a very standardized process, reduces the risk of manual operation, eliminates repetitive work, and enhances the visibility of the project.

rendering

implementation

The flow chart

  • Developers submit code to the code base
  • Trigger jenki build task
  • Build successful, send package to nginx server, update complete
  • Build failure, notify developers of code build failure by means of a spike notification/enterprise wechat/email etc

1. Preparations:

Prepare git project: github.com/wzc57073820…

Prepare the spike group (to receive NOTIFICATION of CI/CD results) : 35669766

Prepare a cloud server with Jenkins installed: Purchase it by yourself and refer to installing Jenkins on a Linux server

2. Access code submission notification

When you push code into the code base, git webhook automatically sends a message to the pin

2.1 Add Dingpin group robot (Intelligent Swarm Assistant)

Copy Webhook, which we’ll use next

2.2 Add nail Webhook to github corresponding Webhook

2.3 Test code submission notifications

Now that the configuration is complete, let’s submit the code for testing At this point, the code submission notification configuration is complete

3. Access project CI

After submitting the code, we need to check whether the code merge has fatal errors. In this case, we take a simple method, which is to allow NPM run build. If there is no error during the run, it means that the submission is passed. Failure indicates that the code has a fatal error and needs to be modified

3.1 Jenkins New Project

Here are the brief steps, please refer to the detailsBuild Github projects automatically using Jenkins

  • To create aBuild a free-style software projectThe job of
  • The source manager selects Git and fills in the address and credentials.
  • GitHub Hook Trigger for GITScm polling

  • Add node environment: System Administration/Global Tools Configuration – Add NodeJS

  • Build environment select Node and check the node you just downloaded
  • Build a choiceExecution of the shell: 
    npm install -g cnpm --registry=https://registry.npm.taobao.org&&
cnpm install&&
npm run build
Copy the code

  • Post-build operations (optional) :

We determine whether a CI is successful by the success and failure of jenkinsJob execution

3.1.1 test

Submits the code again, successfully triggering Jenkins’ jobBuilding a successful

3.2 Access build status spike notifications

  • Configure the pin custom robot, and select the security Settings custom keyword, set here#Can be
  • Download Jenkins pluginDingTalkFor nailing notifications

  • To configure the plug-in => System administration select pin and fill in the webhook address of the custom robot

  • Enable robot notifications in projects

  • Click Start build to test

    Wait for CI to endFailure to remind

At this point, the CI configuration is complete, and we have implemented the code submit pin alert, as well as the CI notification alert

4. Access to the CD

In the above steps we implemented the CI operation, that is, the package that can package the build environment is recommended to test the code for fatal errors. After this step we need to send the deployment package to the Nginx server

4.1 Sending Packets to the Server

  • Install Jenkins plugin Publish Over SSH

  • Configure plug-in Settings, fill in the server IP, advanced use password, set up the remote server folder/ Click to test connectivity

  • Project configuration

  • Modify build shell to add compression

npm install -g cnpm --registry=https://registry.npm.taobao.org&&
cnpm install&&
rm -rf dist&&
npm run build&&
cd ./dist&&
tar -zcvf dist.tar.gz *
Copy the code
  • Add post-build actionsSend build artifacts over SSH
  • Server Configurationnginx
location /testPage{
   alias     /home/test;
   index     index.html;
}
Copy the code

Wangzc. wang/testPage at this point, the CD integration is complete, now only need to submit the code, can achieve automatic packaging, automatic deployment.