Implementation of one-click packaging and publishing of Vue projects using Jenkins

Jenkins installation

Jenkins is an open source CI&CD software used to automate various tasks including building, testing, and deploying software.

Jenkins supports various ways of running, either through a system package, Docker, or through a standalone Java program.

Install

The operating system here is WSL Ubuntu. For installation of other systems, please refer to the official documentation of Jenkins.

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
sudo apt-get install jenkins

Change the port number (the default port is 8080)

The jenkins configuration file is in /etc/default/jenkins ; find HTTP-PORT and modify it

run

sudo systemctl start jenkins
# OR
sudo service jenkins start

If you want to start the machine automatically

sudo systemctl enable jenkins

If you encounter the following error during runtime, please install jdk first

Basic Configuration

After successful startup, enter the corresponding address (ip:port) to enter jenkins管理界面- as shown below

Get the default administrator password in上圖中紅色字體對應的文件- specific command

cat /var/lib/jenkins/secrets/initialAdminPassword

After the command is executed, the following figure is returned

After entering the password, enter the自定義Jenkins interface (as shown below)

In this interface, we choose安裝推薦的插件the plug-in will start to be installed; as shown below

插件安裝完成后it will automatically enter設置用戶名密碼interface (as shown below)

After the input is completed, click the button保存并完成to enter the next interface實例配置

Click the button保存并完成to enter a new interface. Click the button開始使用Jenkins to enter jenkins的主界面(as shown below). At this point, the installation and basic configuration of Jenkins are completed.

Release the Vue project

> Packaging the Vue project requires nodejs. After packaging, the packaged files need to be uploaded to the target server via ssh. So below we will install the Jenkins nodejs plug-in and the Publish Over SSH plug-in.

Install the plugin-nodejs

In the Jenkins main interface工作臺, click系統管理>插件管理to enter the plugin management interface (as shown below)

The search results are as follows

After checking the plug-in and clicking Install, you will enter the plug-in download interface (as shown below)

Configure the nodejs plugin

In the Jenkins main interface工作臺, click系統管理>全局工具設置to enter the plug-in management interface and find the NodeJs option (as shown below)

Install Publish Over SSH plugin and configure it

The installation of Publish Over SSH plugin is the same as nodejs插件. After the installation is complete, start configuring the plugin.

In the Jenkins main interface工作臺, click系統管理>系統配置to enter the plug-in configuration interface, scroll to Publish over SSH , and then click新增按鈕under SSH Servers (as shown below)

Click the高級button and the interface appears as follows

Create a task

At this point, the jenkins plug-ins required for packaging vue have been installed. Now we start creating the task of packaging the vue project.

The specific operation is as follows

After clicking the button確定, as shown below

After installing the configuration mentioned in the figure above, click the保存button to jump to the details interface of the created task.

So far, we have implemented a simple one-click packaging Jenkins configuration for the front-end project.

This is the end of this article about using Jenkins to package and publish Vue projects with one click. For more relevant content about Jenkins packaging and publishing Vue projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!