Brush articles recently an article on the front end deployment automation caught my eye, heard that didn’t do it for a deployment automation beginners this is a fresh thing, so I step by step according to the process of deployment and found several middle the author did not mention a few questions, this article mainly is to do the whole process a record, and fill in the pit.
This document has been updated at: GitHub
Automated Deployment of front-end Projects – An ultra-detailed tutorial (Jenkins, Github Actions)
First, preparation
1, need to install JDK environment, this is not detailed, please find Baidu to install their own
2. Download Gitea, version 1.13 installed in this article, and choose your own version
3. Download Jenkins and select the Windows version
Install Gitea
1. Create a directory on the computer as the installation directory of Gitea, and move the downloaded Gitea files to this directory. The installation path had better not contain Chinese characters.
2, The gitea file does not need to install, double-click to use, right click the Gitea file to run with administrator rights, after running if this information is displayed, it means that it has been started, the default port is 3000.
3. Enter http://localhost:3000 in the browser and click register in the upper right corner to complete the initial configuration. Note the following points:
The best database choice is SQLite3
Set up a repository root to store all git code without Chinese paths
Set the SSH domain name to your LAN IP address.
4. After you click Install, wait a few minutes until the configuration is complete. After the configuration is complete, related configuration files are generated in the gitea installation directory, as shown in the following figure.
5. Click the registration button in the upper right corner after the configuration is complete. The first user registered will automatically become the administrator.
6. Edit the custom conf app.ini file in the gitea installation directory and add the following configuration: START_SSH_SERVER = true
7. If you cannot pull code using HTTP, cancel the Git proxy
git config --global --unset http.proxy
git config --global --unset https.proxy
Copy the code3. Install Jenkins
1. Double-click the downloaded Jenkins installation file to install the program. You can always click Next. At the Logon Type step, select the Run Service as localSystem option and proceed to the next step. After the installation is complete, the http://localhost:8000 website will open automatically.
2, in the open website to find the corresponding file, and then copy the content of the file into the administrator password input box, click “Continue”.
3. Select the recommended plugins to install in custom Jenkins
4. Fill in the administrator information and save it (both are required), then click Next to go to the configuration page.
5. It will automatically enter the Jenkins home page after all the plug-ins are installed.
4. Configure Jenkins
1. On the Jenkins homepage, click on the Manage Jenkins TAB and then click on Manage Plugins.
2, select “optional plug-ins”, then enter node to search, select NodeJS Plugin, click Directly install, because I have installed it here, so it is not displayed in the optional plug-ins.
3. Go back to the home page and click on the Manage Jenkins option. Then click on Global Tool Configuration to configure node.
4. In the NodeJS TAB, add NodeJS, fill in the alias, select the version of NodeJS you want to install, and click Save.
5. Automatically build Vue or React projects
1. Create a repository in the gitea you just created, but I won’t go into details here.
2. Create a Vue or React project locally and then commit the code to the repository you just created.
3. Click “New Items” on Jenkins home page.
4. Give items a name, select FreesStyle Project, and click ok at the bottom.
5. Select Git from source Control and enter the repository address you just created.
6. In the build environment, select the Provide Node & NPM bin/ Folder to PATH option and select the newly configured Node configuration. Click Save.
7. Select Add Build Step in Build and select Execute Windows Batch Command. In Linux, select Execute Shell.
Create a folder as the resource directory of the static server. I put it under C:\soft\ Jenkins \dist. You can modify it freely.
9. Enter NPM I && NPM run build && xcopy. Build * C: soft Jenkins dist /s/e/y and click save. Here C:\soft\ Jenkins \dist\ is the static server resource directory you just created. After running this command, Jenkins automatically installs and packages the dependencies, and then copies the packaged static resource files to the C:\soft\ Jenkins \dist directory.
10. Go back to the home page and you’ll see the Items we just created. Click the triangle next to the name and select Build Now from the drop-down box.
11. Click on the Build task in the Build Execution state to see the progress, or click on the name of the Items you just created and view the latest build history to see the progress.
12. If seccess is displayed in the console input log, the build is successful; otherwise, it fails.
13. If the build failed due to the following error, Jenkins probably did not have permission to operate on the directory.
1, the FATAL: Failed to rename C:\windows\system32\config\systemprofile\AppData\Local\Jenkins\.jenkins\tools\jenkins.plugins.nodejs.tools.NodeJSInstall Ation, node, the node - v10.15.3 - win - x64 to... 2, Java. IO. IOException: Failed to rename C:\windows\system32\config\systemprofile\AppData\Local\Jenkins\.jenkins\tools\jenkins.plugins.nodejs.tools.NodeJSInstall Ation, node, the node - v10.15.3 - win - x64 to...Copy the codeGo to the “C:\ Windows \ System32 \config\ SystemProfile \AppData\Local\Jenkins\ folder, right-click the” Jenkins “folder, select” Properties “, and click “Advanced Sharing” in “Share options”. Select “Share this folder” and click the Permissions button to give Everyone full control.
15, Build again, should be no problem, after the build is finished, we found that we just built the static file in the static server resource directory, we use Node to build a server, let’s see.
16. Open the command-line tools in the dist sibling directory and type NPM init -y and NPM install Express in sequence.
17. Then create a server.js file and copy the following commands into the file
const express = require('express');
const app = express();
const port = 9999;
app.use(express.static('dist'));
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
});
Copy the code
18. Enter Node server.js in the command line tool, and then http://localhost:9999 in the browser to see our packed page.
6. Use pipelining to build projects
Pipelining projects is used to build projects automatically when git push is executed, without the need for manual triggering.
1. Click on the user’s avatar and add a token to the Settings.
2. Return to Jenkins home page, click New Items, fill in an alias, select pipeline, and click OK.
3. Select “Trigger remote Build” in the build trigger and enter the token you just added.
4. Select Pipeline script from SCM and Git, and enter the address of the repository automatically triggered. If you need to specify a branch, you can also change the branch name.
5. Find Jenkins. XML in Jenkins installation directory. Add the following code in the < the arguments > tag – Dhudson. Security. CSRF. GlobalCrumbIssuerConfiguration. DISABLE_CSRF_PROTECTION = true, action is closed CSRF verification, Open the command line in the Jenkins directory and type./jenkins.exe restart to restart Jenkins.
6. Go back to the home page and click Configure Global Security in Manage Jenkins. Check “Anonymous user has readable permissions” in the authorization policy and click the Save button.
7. Go back to the Gitea warehouse and click Warehouse Settings.
8. In managing Web hooks, click the Add Hook button, and then click Gitea in the drop-down list.
9. Fill in the target URL and key text. Trigger conditions can be adjusted according to your own needs.
The target URL is the pipeline task address + Build? Token = create API token, such as I create assembly line tasks address and API token are http://localhost:8080/job/hook/ and admin, Then my goal URL is http://localhost:8080/job/hook/build? Token = admin.
The key text is the API token.
10. Click the test push button at the bottom to check whether the configuration is successful. If the above configuration is followed, Jenkins’ construction should be triggered, but the construction failed, because there is no Jenkinsfile script in the warehouse code.
Create Jenkinsfile in the root directory of your Vue project or React project and type C:\\soft\ Jenkins \dist\\.
Pipeline {agent any stages {stage('Build') {steps {// window uses bat, Linux uses sh bat 'NPM I' bat 'NPM run build'}} stage('Deploy') {steps {bat 'xcopy.\\build\ * C:\\soft\ Jenkins \dist\\ /s/e/y' // this needs to be changed to your static server resource directory}}}}Copy the code
12. Push the modified file to git repository with git push command. At this time, you can see that Jenkins pipeline task is building. The blue indicator indicates that the construction is successful, the red indicator indicates that the construction fails, and the blinking indicator indicates that the construction is in progress. At this point, the automated build project is deployed.
7. Summary of matters needing attention and problems
1, Java.io.IOException: Failed to rename error?
Solution: Please ensure that the Jenkins configuration folder has operation permissions. For details, refer to Article 14 of The Fifth Point.
Java.io.IOException: CreateProcess Error =2 The mistake?
Solution: Please make sure there is Jenkinsfile under Vue or React, and the script path in the Jenkins flow task configuration is correct. If it is not in the root directory, you need to use a relative path to modify it. For example, my script can be stored in the Jenkins /Jenkinsfile file of the React project. The script path in the stream task configuration should be changed to Jenkins /Jenkinsfile.
3, The build is successful but there are no static files in the static server resource directory?
Solution: Ensure that Jenkinsfile under react contains the correct path to the static server resource directory.