Detailed tutorial on deploying SpringBoot + Vue project to Linux server

Preface

Let me share with you how I deployed a SpringBoot + Vue front-end and back-end separated project. The Linux distribution I used is CentOS7.5

With an e-commerce backend management system based on ElementUI, it will be much easier to develop a similar backend. However, the backend of the previous system is completed using node, which is not useful for us Java developers. I learned how to use ElementUI, which is enough, and then all the backend services can be completed by myself using SpringBoot

Recently, it seems that the official version of Vue3 has been released. If you have time, you can take a look.

Tip: The following is the main content of this article. The following cases can be used for reference

1. How to deploy Vue packaged projects?

1.1 Vue project packaging

Tips: If you don't have Vue installed on your computer, please install Node first. The following Express (an http framework that provides the function of quickly building a server) is also based on Node. Please Baidu for the specific installation method. I will not introduce how to install it here.

My project is built using vue cli4, a project built using scaffolding. If you don't know what version of your vue cli is, you can enter the following command to check

vue -V 

The advantage of using scaffolding is that everything is visualized. You can start the project with one click, compile the project with one click, and installing dependencies will become very, very convenient. The effect diagram is as follows

We click build, then run, and after the project is built, a dist folder will be generated in the project root path. This file stores all the contents of our vue project package.

1.2 Use Express to proxy static resource files

Of course, there are many ways to proxy static resources. This is a solution that I think is relatively easy. So how do you do it?

Tip: Whether it is a Linux environment or a Windows environment, the following solution is universal (the premise is that you have already installed node and npm, we need to use the npm package to install the environment)

• Create a new folder such as: myapp mkdir myapp and then go into the folder: cd myapp
• Then initialize the node environment: npm init ,
• Then it will let you choose to configure some JSON information
• Then install the Express environment: npm install express --save , --save means it is only used in the current environment. You will also be prompted to create a js file, you can ignore it or create
• Then create the app.js file: touch app.js and put it in the same directory as the dist folder.
• Write the code for Express proxy static resources, use a text editor in Windows environment and a vim editor in Linux environment

const express = require('express')
const app = express()

// Proxy static resources app.use(express.static('./dist'))

// Listen to port 4000 as the access path for resources app.listen(4000, () => {
 console.log('server running at http://127.0.0.1:4000')
})

After editing, save the code. We use a project management toolkit pm2

Windows

Install this so we can view the project status in real time

Using this, we don't have to run the project with node app.js. The disadvantage of running it directly is that when you close the shell or Linux shell, the project will automatically close. This will make project management very convenient

2. How to deploy the SpringBoot project?

2.1 Possible Problems in Database Deployment

• First, make sure the mysql database is installed on our server
• Then there is the relevant configuration of the database, setting up remote access, etc.
• The database does not support remote connections by default. If necessary, please enable it. Setting % means that external users can access it.

mysql> update mysql.user set host='%' where user='root' and host='localhost';
mysql> FLUSH PRIVILEGES;

// If the above does not work, please enter this command, which should solve the remote access problemmysql> grant all privileges on *.* to root@'%' identified by 'your database login password';

2.2 SpringBoot project package upload

By searching online, we learned that there are two ways to package the SpringBoot project.

• Run directly using embedded Tomcat
• Do not use the embedded Tomcat, package the project into a war package, deploy it to Tomcat and run it

I used the second solution in the Java EE stage, and now I use the first solution

To package the project, we need to add the following plugin to the Maven pom dependency:

<build>
 <plugins>
 <plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </plugin>
 </plugins>
 </build>

Open your Idea and click package on the right to complete the packaging. The generated files are in the target directory.

Then we can run the project directly on the command line through the command.

java -jar xxx.jar 

java -jar xxxx.war

3. Server Configuration

3.1 Starting and stopping the SpringBoot project in the Linux environment

Here we upload our packaged SpringBoot project and vue project to the server.

The vue project follows the above steps, which is universal for Windows and Linux platforms.

We know that it is convenient to run the project with java -jar, but we will also encounter a problem, that is, when the Linux Shell is closed, the service is also closed, so we need to use a script to ensure that our process (SpringBoot service) can keep running in the background.

We write a bash script, we only need to replace demo-0.0.1-SNAPSHOT with your own exported jar package

#!/bin/sh
nohup java -jar demo-0.0.1-SNAPSHOT.jar &

The & here cannot be omitted, which means the daemon process can run in the background.

Save and run the script

sh startup.sh

ps: If the command cannot be executed here, you need to grant read and write permissions to this folder chmod 777 *

Check if the process is running

ps -ef | grep java

Find the project name, the first column is your pid
Enter kill -9 pid to stop your java project

3.2 Nginx reverse proxy SpringBoot service

Since some businesses need to use https services, we need to reverse proxy our backend services into https services.

The premise is that we assume that you have configured the following environment. If not, please move to Nginx installation and SSL configuration

• You have installed Nginx server
• You have configured the SSL certificate and implemented the https service. If you don't know how to do it, you can check this article

Configure the alias of the backend service in http. The alias of the SpringBoot project cannot use '_'

upstream tikuApiServer {
 	server 127.0.0.1:9999;
 }

Then configure it like this in the service with server 443

 server {
 listen 443 ssl http2 default_server;
 listen [::]:443 ssl http2 default_server;
 server_name your domain name;
 The path to the root https project;
 index index.html index.htm;
#
 ssl_certificate "certificate.crt";
 ssl_certificate_key "certificate.key";
 ssl_session_cache shared:SSL:1m;
 ssl_session_timeout 10m;
 ssl_ciphers HIGH:!aNULL:!MD5;
 ssl_prefer_server_ciphers on;

 # Load configuration files for the default server block.
 include /etc/nginx/default.d/*.conf;
 include mime.types;
		default_type application/octet-stream;
		
		// ================== Here ======================
 location /tiku/
 	proxy_pass http://tikuApiServer/api/v1/;
 }

 error_page 404 /404.html;
 location = /40x.html {
 }

 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
 }
 }

In this way, our backend API can be directly accessed at https://domain/tiku/xxxx

Summarize

Tip: Here is a summary of the article:

1. Front-end and back-end separation SpirngBoot + Vue integrated deployment
2. Bash scripting (daemon running project)
3. mysql remote access

This is the end of this article about deploying the SpringBoot + Vue project to the Linux server. For more relevant SpringBoot + Vue deployment on Linux server content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!