SpringBoot + Angular front-end and back-end separation project deployment (update) record

zero, preface

This is the first time the system is launched. Although other students in the team have already written the deployment document https://segmentfault.com/a/1190000041273079 , we need to add some details in this article to make the operation easier

This article is mainly supplementary content, so it is assumed that the running environment, database and nginx have been deployed on the server.

1. Connect to the server

We usually use SSH to connect to a Linux server and use the scp command to transfer files between the local and the server.
So is there a more convenient way? The answer is yes.
You can use the SFTP tool to transfer files graphically, just like operating on your own computer.

Windows -> WinSCP

Official website address: https://winscp.net/eng/index.php
This tool can establish an SSH connection with the server, and browse the files on the server graphically, and supports drag and drop.

MacOS -> Termius

Official website address: https://www.termius.com/
Same as WinSCP, it can manage files and execute Bash commands.
And Termius supports MacOS, Linux, Windows, Android, and harmonious versions can be found online.

With this visual SFTP tool, there is no need to use the command line to copy files.

2. Compile the project

Angular：

// 编译Angular项目
ng build

Then the dist folder can be generated, and the angular code is all compiled into native JavaScript code.
All files in dist will be needed later

SpringBoot：

// 编译SpringBoot项目
mvn clean package

We only need to use the appName.jar file in the target.

It should be noted that the compilation process will encapsulate all files including configuration files, which means that various configuration information such as port numbers and databases cannot be changed at will after compilation. Therefore, before compilation, each parameter needs to be adjusted to match The production environment is the same.

3. Copy files

Open the SFTP tool and find the original code location.
To be on the safe side, don't just delete the code from the previous version, but rename them (and restore them in case something goes wrong).
Then just drag and drop the folder.

4. Close the process of the historical project and start a new process

Angular

Since the HTML three-piece set used in the front end and the server is in charge of Apache or Nginx, when the code file on the server is changed, the new code can be loaded as soon as it is refreshed, so there is no need to restart the service.

SpringBoot

But once the Java project is running, changes cannot be automatically detected, so the Java process must be restarted.

// 查看端口占用情况
sockstat -4l | grep 后端的端口号

// 举例
sockstat -4l | grep 8093

// 返回值（本例中，2279为进程号）
// log    java       2279  26 tcp46  *:8080                *:*

//  关闭进程
sudo kill 进程号

// 举例
sudo kill 2279

Check the port occupancy again, there is no process occupying this port.

At this time, you can enter in the project root directory

// 在服务器后台运行jar包，不会随着终端退出而停止运行
nohup java -jar test.jar

After a successful run, the console will not output any information.
However, there will be a nohup.out file in the same level directory of the jar package. The log information seen on the terminal before is written to this file, and you only need to check this file to know whether the project has been started successfully.