[Complete details] Use the Alibaba Cloud Toolkit plug-in to deploy front-end and back-end separation projects with one click

Foreword: In actual project development, if you need to update the project’s jar package or dist folder, you need to manually replace the current jar package or dist folder of the server, and then restart it through a shell script. Over time, this will become repetitive and cumbersome. If you are tired of the operation, this blog will show you how to achieve one-click deployment through a plug-in.

Other deployment tutorials from bloggers:

1. Docker deployment of front-end and front-end separation projects: step-by-step deployment of front-end and front-end separation projects through Docker (available for personal testing)

2. Deploying Tomcat on Linux system: Detailed tutorial on deploying Tomcat on Linux system (explanation with pictures and texts)

3. Deploying Nginx on Linux system: Detailed tutorial on deploying Nginx on Linux system (picture and text explanation)

4. Linux system configuration Maven: Detailed tutorial on Linux system configuration Maven environment (graphic explanation)

5. Linux system configuration Node.js: Detailed tutorial on Linux system configuration Node.js environment (graphic explanation)

6. Install and deploy MySQL on Linux system: Complete tutorial on installing and deploying MySQL on Linux system (detailed explanation with pictures and text)

7. Install and deploy Redis on Linux system: Complete tutorial on installing and deploying Redis on Linux system (detailed explanation with pictures and text)

8. Install and deploy MongoDB on Linux system: Complete tutorial on installing and deploying MongoDB on Linux system (detailed explanation with pictures and text)

9. Install and deploy Jenkins on Linux system: Detailed tutorial on installing and deploying Jenkins on Linux system (graphic explanation)

10. Pagoda Panel Deployment and Front-end Separation Project: Step-by-step tutorial on using Pagoda Panel to deploy front-end and front-end separation projects (full details)

11. Jenkins deployment and front-end separation project: The most complete graphic tutorial on Jenkins deployment and front-end separation project (step-by-step teaching)

12. Linux system deployment depends on the front-end and back-end separation project: Linux system deployment depends on the front-end and front-end separation project (step-by-step tutorial)

13. Use the Docker plug-in to deploy the front-end and back-end separation projects with one click: [Complete details] Use the Docker plug-in to deploy the front-end and front-end separation projects with one click in IntelliJ IDEA

Table of Contents

1. Install the Alibaba Cloud Toolkit plug-in

2. Deploy the SpringBoot project

3. Deploy Vue project

4. Summary


1. Install the Alibaba Cloud Toolkit plug-in

Note: I use Webstorm and Idea for front-end and back-end development respectively, so the installation methods are the same. Here I choose to demonstrate the installation method of Idea.

Open settings.

?

Click on the plug-in and search for the Alibaba Cloud Toolkit plug-in in the store. I have already installed it. You can install it yourself and then restart Idea.

?

2. Deploy SpringBoot project

1. Open the panel to add a host.

?

2. Fill in the host information.

?

connection succeeded.

?

After the test is successfully completed, click Add.

3. Click Tools in the menu and select Deploy to host.

?

4. First configure the deployment parameter information.

?This It is the directory where the jar package of my server is stored and the location where the shell script is stored. It is recommended that the shell script be stored in the directory at the same level as the jar package.

?

Complete project.sh script content:

Note: You only need to replace this line of /opt/douyin/back/ruoyi-admin.jar code with your own jar package address, nothing else needs to be touched.

#!/bin/bash
export JAVA_HOME=/root/tools/jdk1.8.0_181
export JRE_HOME=/$JAVA_HOME/jre
export CLASSPATH=.:$JAVA_HOME/jre/lib/rt.jar:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin

APP_NAME=/opt/douyin/back/ruoyi-admin.jar
#Instructions for use, used to prompt for input parameters
usage() {
    echo "Usage: sh log.sh [start|stop|restart|status]"
    exit 1
}

#Check if the program is running
is_exist(){
  pid=`ps -ef|grep $APP_NAME|grep -v grep|awk '{print $2}'`
  #If it does not exist, return 1, if it exists, return 0
  if [ -z "${pid}" ]; then
   return 1
  else
    return 0
  fi
}

#Startup method
start(){
  is_exist
  if [ $? -eq 0 ]; then
    echo "${APP_NAME} is already running. pid=${pid}"
  else
    nohup java -jar ${APP_NAME} >log.out 2> & amp;1 & amp;
  fi
}

#Stop method
stop(){
  is_exist
  if [ $? -eq "0" ]; then
    kill -9 $pid
  else
    echo "${APP_NAME} is not running"
  fi
}

#Output running status
status(){
  is_exist
  if [ $? -eq "0" ]; then
    echo "${APP_NAME} is running. Pid is ${pid}"
  else
    echo "${APP_NAME} is NOT running."
  fi
}

#restart
restart(){
  stop
  sleep 5
  start
}

#According to the input parameters, choose to execute the corresponding method. If you do not enter, the instructions will be executed.
case "$1" in
  "start")
    start
    ;;
  "stop")
    stop
    ;;
  "status")
    status
    ;;
  "restart")
    restart
    ;;
  *)
    usage
    ;;
esac

Secondly, the uploaded file does not have executable permissions, so you need to execute the following command.

chmod u + x project.sh

5. Configure advanced parameter information.

Move to the bottom to configure the pre-execution parameters and click Add to run the Maven target.

Select the main project in the red box, enter clean install, and click OK.

6. Click Run.

7. Information printed by the console.

?

3. Deploy Vue project

1. Because the Idea software has configured the host information, Webstrom automatically recognizes it and does not need to configure it again.

2. Click Tools in the menu and select Deploy to host.

3. Configure deployment parameters.

4. Configure advanced parameters.

Add npm script.

5. Just configure one script and keep the others as default.

6. Finally click Run

7. Information printed by the console.

Four. Summary

The above is a complete tutorial on using the Alibaba Cloud Toolkit plug-in to deploy front-end and back-end separation projects with one click. If you have any questions, please feel free to add them in the comment area.

The knowledge points of the article match the official knowledge files, and you can further learn related knowledge. Java Skill TreeHomepageOverview 139166 people are learning the system