SpringBoot front-end and back-end separation projects, packaging and deployment to the server detailed graphic process

Implementation steps

1. Modify the configuration file address

1. Modify MySQL configuration

Modify the MySQL address, modify the data name, account and password that need to be deployed

2. Modify Redis configuration

Modify the Redis address and modify the Redis password that needs to be deployed (if necessary)

3. Modify log path and character set configuration

Modify the storage address of logs in logback.xml

Reset the log character set (to prevent the log from appearing garbled after being placed on the server)

2. Compress the source code and upload it to the server

1. Upload front-end files

• Compress the complete source code file locally into .zip format in advance
• Create a folder on the server (/workspace) to store the project source code
• Upload the packaged front-end project source code to the corresponding folder of the server through the xftp tool
• Use commands unzip ruoyi-ui.zipto decompress the project source code
• Use the command rm -rf ruoyi-ui.zipto delete the original compressed file
• Use the command cd ruoyi-ui/to enter the source code folder

2. Upload the backend files (same as above)

3. Front-end project packaging

1. Install dependencies

• Use the command cd ruoyi-ui/ to enter the source code folder
• npm install --unsafe-perm --registry=https://registry.npm.taobao.orgInstall front-end project dependencies (node.js must be installed on the server)
• --unsafe-permPrevent permission issues
• --registry=https://registry.npm.taobao.orgTaobao mirror source, faster in China

2. Project packaging

• Use commandnpm run build:prod
• After packaging is completed, a dist directory will be generated (the default directory name is dist)
  

4. Back-end project packaging

1. Project packaging (jar package)

• Use the command mvn package(requires server to install maven environment)
• Use the command cd target/to enter the directory and you will see the prepared jar package (the jar package here is ruoyi.jar)
• Copy the jar package to the upper-level directory to prevent the jar package from being lost due to target directory cleaning.

2. Project packaging (war package)

• Modify pom file
  

• Exclude the built-in Tomcat so that it can be deployed to an external tomcat
  

• Add a new startup class pointing to the original startup class
  

• Upload the two modified files to the server (just upload the corresponding files and replace them)

• Use command mvn cleanto clean directory

• Use command mvn packageto build war package

• Use the command cd targetto find the war package in this directory

5. Deploy front-end projects

1. Use Nginx to deploy front-end projects

• Use the command cd /usr/local/nginx/to enter the nginx directory
  

• Modify the Nginx configuration file (modify the nginx.conf file under the conf folder)

• Change the path following the root of the location to the file address of the packaged front-end project.
  

• To prevent permission-related issues, change user at the beginning of the file to root.
  

• Use the command cd sbin/to enter the corresponding directory

• ./nginxStart nginx using the command

• At this point, you can enter the corresponding IP address in the browser to access the front end.

6. Deploy back-end projects

1. How to deploy jar package

• Use the command in the corresponding directory nohup java -jar ruoyi.jar &to run the back-end project in the background.

• At this time, the front-end project may still report error 404. This is because the addresses of the front-end and back-end are not related.

• Re-configure the proxy in the nginx.conf file
  

• Go to the nginx directory and reload it.nginx/usr/local/nginx/sbin/nginx -s reload

• At this time, when you revisit the front-end project, no errors will be reported anymore.

• Congratulations on completing the deployment of your project!

2. How to deploy war package

• ps -aux | grep javaView current java process
• kill -9 进程号shut down process
• Navigate to the tomcat foldercd /usr/local/tomcat/
• Place the war package you just packaged in the directory webapps
• cd webapps/Then execute the command cp /root/workspace/ruoyi/ruoyi.war ./to copy the war package to the current directory.
• start uptomcatservice tomcat start
• There will be a problem at this time. Directly accessing the IP will open the tomcat homepage. You need to add /ruoyi after the original address to access the backend.
• To solve this problem, you need to modify the tomcat configuration, navigate to the conf directory under the tomcat folder, and find server.xml
• Add a new piece of configuration information to change the original access method to root directory access.
  
• Stop tomcat service tomcat stopand restart itservice tomcat start

3. Configure the cluster

• Modify nginx.conf file
  

• Modify the proxy forwarding configuration to the upstream modified above
  

• Restartnginx/usr/local/nginx/sbin/nginx -s reload

• Monitor the logs in real time to see which backend is being accessed nowtail -f 日志文件名

Deployment considerations

When the non-homepage part of the front-end page is refreshed, the page 404 problem occurs.

Modify the nginx configuration file and put the following code into nginx

location / {
    
    
    ……
    try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}

Reference article: https://www.jb51.net/article/261803.htm

Deployment backend project failed to start

Check whether the port number of the back-end project is occupied
netstat -anp | grep 端口号

Save server space

Both front-end and back-end project packaging can be completed locally. The upload server can minimize the upload of jar packages and dist folders. This method saves server space resources the most.

• Just keep the jar package for the back-end project
• The front-end project only needs to keep the dist folder