Whole process of front-end project construction and deployment (V) : Automatic deployment based on Jenkins and Gitea

1. Introduction

Following on from the previous article, we can initialize a project based on a written scaffold project, and then commit to a Gitea service based on that project, implementing Jenkins based automated deployment and Gitea webhook hooks to automatically build the project when git push is executed.

2. Set up the Gitea hosting server

1. Download the Gitea installation fileDl. Gitea. IO/gitea,I downloadedGitea 1.13.1 - Windows - 4.0 - amd64. Exeversion
2. Once the download is complete, create a Gitea directory on your local disk and execute the installation file in that directory
3. Then open thelocalhost:3000You can see Gitea running as you know it
4. Click Register, the first time will pop up an initial configuration page, database selectionSQLite3, in addition tolocalhostChange your computer’s LAN address, for example, my computer’s IP address to192.168.0.118

PS:localhostchangeIPThis step I did not change, this is to borrow a picture of a great god online.

5. After filling in this information, click Install Now and wait for a while to complete the configuration
6. Continue to click register user, the first user to register will become the administrator
7. Open the Gitea installation directory and findcustom\conf\app.iniAdd a line of code to itSTART_SSH_SERVER = true. Now you can use SSH for push

8. If the project cannot be cloned using HTTP, cancel the Git proxy

git config --global --unset http.proxy
git config --global --unset https.proxy
Copy the code

3. The configuration Jenkins

3.1 to install the JDK

JDK has version requirements, must be 1.8, the official website has instructions, I stepped in this pit

1. Download Jenkins, Jenkins is divided into the installation file of EXE, WAR package and Docker image distribution. I started the installation of EXE, but couldn’t access it after the installation was completedUnlock JenkinsThis page, so I changed it to a WAR package,www.jenkins.io/zh/download…

2. Encountered during installationLogon Type“, select the first one

3. The default port is 8080, so I said 8000. It will open automatically after installationhttp://localhost:8000Web site
4. Follow the instructions to find the corresponding file (direct copy path in my computer to open), which has the administrator password

5. To install the plug-in, select the first one

6. To create an administrator, click Finish and save, then go to the next step

7. After the configuration is complete, the home page is automatically displayed. ClickManage Jenkins -> Manage pluginsInstalling a plug-in

8. Click on theOptional plug-in, type nodejs, search for plug-ins, and install
9. When the installation is complete, go back to the home page and clickManage Jenkins -> Global Tool ConfigurationConfiguration nodejs. If you are running Windows 7, the nodeJS version should not be too high and should be around V12

3.2. Create a local static Node server

1. Create a publishing directory on your local disk and executenpm init -y, initial project
2. performnpm i expressDownload express,
3. To create aserver.jsFile, which writes the following code:

const express = require('express')
const app = express()
const port = 3001

app.use(express.static('dist'))

app.listen(port, () = > {
    console.log(`Example app listening at http://localhost:${port}`)})Copy the code

It sets the dist folder in the current directory to the static server resources directory, and then executes Node server.js in the current directory to start the server.

Because there is no dist directory yet, you are running to access empty pages

3.3. Automated build and deployment

1. We create the demo project through scaffolding before using, then in your Gitea a new creation, the content of cloning to go in, here are how to clone to making existing projects, blog.csdn.net/north1989/a…

2. Open the Jenkins home page and clickThe new ItemCreate a project

3. chooseSource code management, enter the warehouse address on your Gitea

4. You can do it on a regular basis, like I did at 8,12,15, or you can do it manually without setting it

5. Then select the build environment and the plug-in NodeJS that you just configured

6. Click Add Build Step, Windows to selectexecute windows batch commandLinux to chooseexecute shell

7. Enter the following commands to install dependencies, build the project, and copy the built static resources to the specified directoryC:\tools\personal\github\JenkinsDeploy\dist\. This directory is the static server resource directory

npm config set registry https://registry.npm.taobao.org/ && npm i && npm run build && xcopy .\dist\* C:\tools\personal\github\JenkinsDeploy\dist\ /s/e/y
Copy the code

8. Modify the demo project created by scaffolding before, add build command

Replace compressed plug-insUglifyjsPlugin—>TerserPlugin

9. After saving the Settings, return to the home page. Click the small triangle next to the item and selectbuild now

10. To start building the project, click in to view the build process

11. The static Node server address is displayedhttp://localhost:3001/

3.4. Build the project using pipeline

Pipelining projects can be combined with Gitea’s Webhook hooks to automatically build projects when a Git push is performed

1. Click on the username in the upper right corner of the homepage and selectSet up the

2. Add new tokens and remember to save them.

3. Open the Jenkins home page and clickThe new ItemCreate a project

4. Click on theBuild trigger, the choice ofTriggering a remote build, fill in the token you just created

5. Select pipeline, enter as prompted, and clicksave

6. If exe is installed, findjenkins.xmlFile, find<arguments>Tag, put it inside-Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=trueIf the war package is running in Java add this sentence:

java -jar -Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true jenkins.war --httpPort=8000
Copy the code

It turns off CSRF validation, and Gitea’s Webhook will keep reporting 403 errors. After adding the parameters, restart Jenkins

7. Go back to the home page and configure global security options. On the hookThe anonymous user has the read permissionAnd then save

8. Open your Gitea repository page and selectThe warehouse is set.Managing Web Hooks.Adding a Web Hook, hook selectionGitea

9. Enter the target URL as Jenkins prompts. And then clickAdding a Web Hook

10. Click the created Web hook, drag it down, and click Test Push. No surprise, you should be able to see the success of the push message, at this point back to Jenkins home page, found that the project is already under construction

11. Because there is no configurationJenkinsfileFile, at which point the build will not succeed. So you need to configure itJenkinsfileFile. Copy the following code to your Gitea projectJenkinsfileFile. Jenkins will automatically read the contents of the file to perform build and deployment operations during build

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
				bat 'npm config set registry https://registry.npm.taobao.org/'
                bat 'npm i'
                bat 'npm run build'}}stage('Deploy') {
            steps {
                bat 'xcopy .\\dist\\* C:\\tools\\personal\\github\\JenkinsDeploy\\dist\\ /s/e/y'}}}}Copy the code

12. Each time you push code to Gitea in the future, Gitea will send a Post request to Jenkins via Webhook to perform the build action

4. References

www.mdeditor.tw/pl/pXrV