This article will automate the deployment of my previous front-end code for building a mobile shelf based on VUe-CLI3.0 to the target server at 🌰.
Achieve the goal
Push the code locally to GitHub, Webhook automatically triggers the build action on Jenkins, completes the installation and packaging of the Node plug-in, and then publishes Over SSH plug-in to deploy the packaged file to the target server.
preparation
- Github accounts and projects
- Centos server;
- Java SDK is installed on the server.
- Server installation nginx + start;
- Jenkins + boot on server;
Jenkins is introduced
Jenkins is an open source, continuous integration tool written in Java that can be installed directly on Centos via the Yum command line. Jenkins is just a platform, and all that really works are plug-ins. That’s why Jenkins is so popular, because Jenkins has all kinds of plugins.
First, log in to the server to update the system software
$ yum update
Copy the code
Install Java and Git
$ yum install java
$ yum install git
Copy the code
Install nginx
$yum install nginx // $service nginx startCopy the code
Redirecting to /bin/ Systemctl start nginx.service
Nginx has started successfully. Visit http://ip /. If the installation is successful, the default welcome page will be displayed
Install Jenkins
$ wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key $yum install Jenkins // Use the yum command to install Jenkins $service Jenkins Restart // Start JenkinsCopy the code
Jenkins will start on port 8080 by default. Enter your server IP address and port 8080 to access the browser.
Input the cat/var/lib/Jenkins/secrets/initialAdminPassword view the initial password
Here, we just choose the recommended universal plug-in installation, and wait for the plug-in installation and account initialization
Then install the two recommended plugins Rebuilder SafeRestart
Install the nodeJs plug-in in Jenkins
Since we will be using node packaging for our project, we will first install the nodeJs plug-in in Jenkins, and then go to the global tool configuration to configure the version of Node we will use.
Create a task
-
Click Create a New task
-
Jenkins associated GitHub project address
-
Select the build environment and write the shell commands
When the configuration is complete, click Build now, wait until the build is complete, click workspace, and you can see that an extra dist directory has been packaged. Click on the console output to see the detailed build log
You can pull and package the code by clicking build on Jenkins. The next step is to put the packaged dist directory on the target server.
Install the Publish Over SSH plug-in, and we will use this tool to implement server deployment.
After the installation, go to System Management > System Settings >Publish over SSH and set the server information
Path to key: copy the private key to this box (either Path to key or key). SSH Server Name: Hostname: Hostname or IP address (recommended) Username: Username Remote Directory: Advanced configuration: Use password authentication, or Use a different key: Passphrase/Password: Password for login mode Port: Port (default 22) Timeout (ms) : Timeout (milliseconds) Default: 300000Copy the code
In this section, the login is configured with the account and password. After filling in the password, click Test. If Success is displayed, the configuration is successful
Select Send Build Artificial over SSH from testJenkins. Select send Build artificial over SSH.
Name: select one of the SSH servers you have configured. Source files: write the path to the file you want to transfer. Remove prefix: Do not write the prefix. Write to the directory where you want to deploy to the remote server. Otherwise, it is the default remote directory Exec in the SSH Servers configurationcommand: After transferring the command to be executed, I execute the entry heretestDirectory, decompress, and delete the compressed package after decompressionCopy the code
Note the addition of the compressed dist directory command to the build
When complete, execute the build. After successfully logging in to our target server, we found the file to run in the test directory
Access The Domain discovery project is now accessible
After the push code is developed locally on Github, the Webhook is triggered and Jenkins automatically executes the build.
- Jenkins installs the Generic Webhook Trigger plugin
- Github adds triggers
Configuration method
1. Select Generic Webhook Trigger from Build Trigger in testJenkins project and fill in the token
Select Settings->Webhooks> Add Webhook in the Github project. The configuration mode is to trigger Webhook when code is pushed according to the format in the red box above. After success, a small green tick will appear at the bottom
Test this by putting 9900 on the vUE project homepage, then push the code to Github, and find that the build in Jenkins has been automatically executed.
A simple workflow of front-end automation is set up, whether the code is pushed and built manually in Jenkins or pushed and built automatically, depending on the company.
The last
Write a little verbose, there are mistakes I hope you point out, also hope this article is helpful to you.