A journey of a thousand miles begins with a single step.

Don’t underestimate yourself, don’t be conceited; To get started, be sure to calm down and take your time with the reference documentation. Most of the steps come from this article

1. Install Jenkins runtime environment Java (if you are not familiar with setting environment variables, you can skip the following steps first, if you feel easy, you can start in order)

  • Install the Java JDK

Java JDK, Tsinghua University open source software image download after completion, direct decompression, is the green version of the software, you can run directly

  • Start configuring environment variables (computer system variables, are all system variablesNon-user variable)
JAVA_HOME:C:\Program Files\Java\jdk16.. 0 _43 // This is where your software folder is located
Path:%JAVA_HOME%\bin; // Add %JAVA_HOME%\bin to the path variable
Copy the code
  • Run CMD
C:\Users\YCR>java -version
openjdk version "1.8.0 comes with _292"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8. 0 _292-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.292-b10, mixed mode)
Copy the code
  • Congratulations on completing the Java environment configuration

2. Start configuring Gitea

Gitea is used to build Git LAN servers, and Jenkins is a CI/CD tool for deploying front-end projects.

  • Install gitea software software address

  • After downloading, create a new directory (for example, Gitea), place the downloaded Gitea software in this directory, and double-click to run it.

  • Open localhost:3000 and see that Gitea is already running on your computer.

  • Click Register and an initial configuration page will pop up for the first time with the database selected SQLite3

  • Change localhost to your IP address

  • Click Install Now and wait for a while to complete the configuration.

  • Go to the Gitea installation directory, go to Custom \conf\app.ini, Add a line of START_SSH_SERVER = true, and if localhost is still present, change the service address to your OWN IP address as shown in the figure, and then you can use SSH to push.

3. The configuration Jenkins

  • Install the software

Download address

  • Select the first Logon Type when encountered during installation.

  • There will be a firewall problem when installing the software, I directly next, if there is a problem do not understand next

  • If you are a VUE developer, you will know that the default port of vue is 8080, so as a VUE developer, you will have to follow vue, change this port to 8000, and the browser will automatically open http://localhost:8000

  • Locate the corresponding file as prompted. A message may be displayed indicating that the file does not exist in the direct copy path (because some directories require permission to access). You can perform operations step by step according to the directory

  • Install the plug-in (select the recommended one). The installation process is slow. If some errors occur after the installation, you can click Continue to repair them

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

  • May encounter between plug-in installation problem (pictured) examined the scarlet letter, there is a failure of the plug-in installation, can click on the correct and then click the optional plug-in, search plugin name, select the plug-in installation, after the completion of the can visit http://localhost:8000/restart to restart

  • Click On Manage Jenkins -> Manage Plugins to install the plugin

  • Click on optional plug-ins, type nodejs, search for plug-ins, and install.

  • Once installed, go back to the home page and configure NodeJS by going to Manage Jenkins -> Global Tool Configuration. Try to choose V12. I chose 14, which is the same version on my computer

4. Create a static server

  • Create an empty directory and execute NPM init-y to initialize the project.
  • Run the NPM I Express command to download the express.
  • Then create a server.js file with the following code:
const express = require('express')
const app = express()
const port = 8080

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 to start the server.

The site is empty because there is no dist folder now.

  • An error occurred in Build Now

5. Automatic build + deploy to server

I met a lot of potholes here

  • Start by creating a Vue scaffolding project locally (I’m a Vue lover to the bone), then create a repository on top of your Gite server and commit the code to it
  • Open the Jenkins home page, clickThe new Item

  • There is no attempt at a timed build
  • Select the build environment, in this case the nodeJS you just configured

  • Click Add build steps. Select Execute Windows Batch Command and Execute Shell in Linux.

  • The inputnpm i && npm run build && xcopy .\dist\* E:nodejs\dist\ /s/e/y, which installs dependencies, builds the project, and copies the built static resources to the specified directoryE:nodejs\dist\ . This directory is the static server resource directory.

To explain:.dist \* is all the files in your package project folder and then copy them to the folder you specify

  • After saving, return to the home page to build the project

  • Here is the error I encountered (solution config vue. Config.js) this solution is not good

module.exports = {
	css: {
		extract: false,}}Copy the code
  • Console output represents success

  • After the build is successful, accesshttp://localhost:8080/