The front-end project in this article takes vue as an example (in fact, the operation methods of the front-end engineering projects are the same), and it is deployed on the Linux system (centos).
Before deploying front-end projects, I always manually run the packaging command, and the packaging is completed. Then use tools such asFTP, etc. to upload to the server.XshellThis method is not only inefficient, but also prone to errors, and it is accidentally misplaced. Or the company has operation and maintenance, just need to package the front-end project code and send it to the operation and maintenance, but the general small company does not have operation and maintenance. So, I was looking for any tools that can automatically complete these operations for me, so I found the following product, the name isJenkins. As I use it more and more, it becomes more and more comfortable, and this little old man also looks more and more pleasing to the eye! ! !
The main purpose of this article is to automatically deploy the code to the corresponding server when github pushthe code is forwarded or merged into the project masteror other branches .jenkins
1. Installation and configuration of Jenkins
JenkinsIt is an open source software project,Javaa continuous integration tool based on development, used to monitor continuous and repetitive work, and aims to provide an open and easy-to-use software platform to make continuous integration of software possible. (From Baidu Encyclopedia)
1. The establishment of java environment
Because it depends on the environment, the environment Javamust be installed first , otherwise an error will be reported when starting the service. Execute the following command to install JDK in one step. It is recommended to install version 1.8 or higherjavaJenkins
yum install java-1.8.0-openjdk
2. Install Jenkins
I'm generally used to using yuminstaller software. Since yumthere repois no default in Jenkins, you need to Jenkinsadd the library to yum repos, and execute the following commands in sequence:
cd /etc/yum.repos.d/
wget http://pkg.jenkins.io/redhat/jenkins.repo
rpm --import http://pkg.jenkins.io/redhat/jenkins.io.key
yum install -y jenkins
Grant Jenkinsread and write permissions in the root directory of the website. The root directory of my website is/usr/share/nginx/hxkj
chown -R jenkins.jenkins /usr/share/nginx/hxkj
start upJenkins
service jenkins start
Because the port jenkinsis used by default 8080, if you are using a cloud server, you also need to open the port in the security group 8080(if you do not want to use 8080the port, or the port is occupied, you can Jenkinsmodify the default port in the configuration file)
3. Initialization of Jenkins
3.1. Enter in the browser http://服务器IP:8080to open jenkins, the first time you open it, you need to obtain the password of the administrator, as shown in the figure:
You can find the password in the server according to the prompt on the page, and enter the following command: ( catthe path after the command is the red text displayed on the page, and everyone’s may be different)
cat /var/lib/jenkins/secrets/initalAdminPassword
3.2. Install the default plug-in: Enter the password, and after submitting, it will jump to the plug-in installation page, select the first one and install it, as shown in the figure:
In this step, you don’t need to do anything, just wait slowly. . .
Next, after the default plug-in installation is complete, create an administrator account, and after completing the configuration, you can log Jenkinsin
3.3. Install the NodeJs plug-in for packaging and building the vue project.
Open 系统管理=> 管理插件Search NodeJsand then check Install
Open 系统管理=> 全局工具配置Pull to the bottom to configure the node version, as shown in the figure:
4. Configure automatic deployment tasks
4.1. Create a new task: click 新建任务=> 输入任务名称, select 构建一个自由风格的软件项目and confirm
4.2. Configure git, enter 任务配置, select 源码管理, because my project is open source, so there is no need to fill in the account password
4.3. Set up the build environment, select Provide Node & npm bin/ folder to PATHand then select the node version configured when installing the plugin before
4.4. Configure the automatic packaging of the project, select 增加构建步骤=> Excute shellthis is to run the relevant sh command (this step recommends time-consuming operation separation steps)
all commands
cd /var/lib/jenkins/workspace/hxkj #进入Jenkins工作空间下hxkj项目目录
node -v #检测node版本（此条命令非必要）
npm -v #检测npm版本（此条命令非必要）
npm config set registry https://registry.npm.taobao.org #把npm源设置为淘宝源（这个你懂的）
npm config get registry #检测npm是否切换成功（此条命令非必要）
npm install #安装项目中的依赖
npm run build #打包
cd dist
rm -rf hxkj.tar.gz #删除上次打包生成的压缩文件（一般建议备份，不要直接删除，这边测试就无所谓啦）
tar -zcvf hxkj.tar.gz * #把生成的项目打包成压缩包，方便移动到项目部署目录
cd /usr/share/nginx/hxkj #进入web项目根目录
mv /var/lib/jenkins/workspace/hxkj/dist/hxkj.tar.gz ./ #移动刚刚打包好的项目到web项目根目录
tar -zxvf hxkj.tar.gz -C dist/ #解压项目到dist目录
rm -rf hxkj.tar.gz #删除压缩包
After the steps are separated, as shown below
4.5. After saving, click 立即构建to check whether the task can be successfully built, and 控制台输出you can view the build log in the menu.
So far, the Jenkins build has been configured, and the next step is to cooperate with github to complete the show operation!
2. GitHub+Jenkins linkage configuration
1. Create a github AccessToken
Enter githubthe settings page, selectDeveloper settings
select Personal access tokens=>Generate new Generate
Check the following configuration, and then click Generate Generate, be sure to save this token, it will only be displayed once.
2. Jenkins add github plugin
Open 系统管理=> 管理插件Search Github Pluginand then check the installation
Then enter 系统管理=> 系统设置=> Github Serveradd information
凭据Click there and 添加add the following information
After adding, remember to select the credential information we just added
Finally click 连接测试If the following is displayed, the configuration is correct
3. Git push test
The push operation of Git will not be demonstrated here
After completing pushthe operation, return to Jenkinsthe management page, and you will see that a new record has been added to the build queue.
Moreover, looking at the build log, it also prompts success! ! !
At last, if you don't understand anything after reading it, you can leave a message for feedback.
Please indicate the source for reprinting: https://www.jianshu.com/p/4c4f92209dd1
Author: TSY
Personal Space: https://hxkj.vip