SpringBoot e-Commerce project mall (25K + STAR) address: github.com/macrozheng/…

Abstract

Last time we talked about using Jenkins to package and deploy SpringBoot applications with one click. This time we will talk about how to package and deploy front-end applications with one click. Taking Vue front-end applications as an example, here we use the code in Mall-admin-Web to demonstrate.

Pre-school preparation

Jenkins and Nginx are required to learn more about Jenkins and Nginx in this article.

  • Use Jenkins to package and deploy SpringBoot applications with one click.
  • Nginx has some amazing features that you don’t know about!

Automated deployment in Jenkins

The packaging of the Vue front-end application relies on the NodeJS plug-in, so we install and configure the plug-in, and then create tasks to package and deploy it.

Install the NodeJS plug-in

  • Choose System Settings -> Plug-in Management to install the plug-in.

  • searchNodeJSPlug-in and install;

Configure the NodeJS plug-in

  • Plug-in configuration in System Settings -> Global Tools Configuration;

  • chooseNew NodeJSAfter the version number is configured, click save to complete the setting;

Create a task

We need to create a task to package and deploy our front-end application, using my mall-Admin-Web project as an example.

  • The task execution process is as follows:

  • Build a free-style software project:

  • Add Git repository configuration to source control. Here I am using the code above Gitee at gitee.com/macrozheng/…

  • In the build environment put ournodeContext added:

  • Add aExecution of the shellBuild to compile and package our front-end code:

  • The build script is as follows:
# Check version information
npm -v
[Fixed] Sass on Github cannot be downloaded
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
# Replace the mirror source with taobao's accelerated access
npm config set registry https://registry.npm.taobao.org
Install project dependencies
npm install
# Project packaging
npm run build
Copy the code
  • Add aUse SSH to execute remote scriptsTo publish our packaged code to Nginx:

  • Remotely execute the following script:
docker stop nginx
echo '----stop nginx----'
rm -rf /mydata/nginx/html
echo '----rm html dir----'
cp -r /mydata/jenkins_home/workspace/mall-admin-web/dist /mydata/nginx/html
echo '----cp dist dir to html dir----'
docker start nginx
echo '----start nginx----'
Copy the code
  • After clicking “Save”, click “Run” in the task list to complete automatic deployment:

In the pit of

Node-sass could not be downloaded and the build failed

Since the source of Node-sass is on Github and is often inaccessible, we need to set the download address of Node-sass separately during construction.

# linux
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
# window
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass&& npm install node-sass
Copy the code

Some dependencies cannot be downloaded and the build fails

Due to the slow access of NPM sources, some sources may not be downloaded, which can be solved by using The NPM source of Taobao.

# Set as the mirror source of Taobao
npm config set registry https://registry.npm.taobao.org
# set as the official mirror source
npm config set registry https://registry.npmjs.org
Copy the code

The project address

Github.com/macrozheng/…

The public,

Mall project full set of learning tutorials serialized, attention to the public number the first time access.