Spring Boot project deployment scheme, packaging + one-click deployment, a stable batch

Cloud Server


We need a cloud server. I used a beggar version before, with 1 core and 1G memory, and the pagoda panel has been installed.
This is the server configuration details seen from the front page of the Pagoda panel.

It's 618 soon, and there should be a lot of cloud server merchants starting to revamp, and the friends who need to pay attention to it.

MySQL


Log in to the pagoda panel, click "Database" → "Add Database", fill in the database name, the pagoda panel will automatically create an account with the same name as the database for us, pay attention to select "local server" for access rights.

In the codingmore column, click "Import" and "Upload from local" to program the database file. After the upload is complete, click Import.

DB files are placed in the coding-more/doc directory.

It is recommended to make a backup first. Click "No Backup" and "Backup" to back up our database files. If you want to restore it later, just click "Restore".

Remember the username, and copy the password, then click Manage in the database entry

After filling in the username and password, click Execute.

You can see the database file of the programming meow.

Nginx


Nginx is a high-performance HTTP and reverse proxy web server, which basically becomes one of the prerequisites that a server must install.
It is relatively simple to install Nginx in the pagoda panel, just search for "Nginx" in the software store and click to install.

Redis


It is also relatively simple to install Redis in the pagoda panel. Just search for "Redis" in the software store and click to install.

Project packaging


1) codingmore-admin
Programming the management backend of Meow, pay attention to modify the MySQL username and password in the production environment, in the application-prod.yml file.

Then change the active in the application.yml file to the prod production environment.

Replace the OSS configuration.

2) codingmore-web
Programming Meow's web front-end (web portal, article display/article details, etc.), pay attention to modify the MySQL username and password in the production environment, in the application-prod.yml file.

Then change the active in the application.yml file to the prod production environment.

Then you can double-click the Maven package to package it.

3) codingmore-admin-web
The front-end interface of the admin management terminal. In Visual Studio Code, now execute yarn install in the terminal to install the project's dependencies.

Then execute yarn run build to build the static page of codingmore-admin-web.

A dist directory will be generated in the root directory of the project, which contains the packaged management-side static pages.

There are two main points to add when packaging. There are three configuration files in the config directory. dev.env.js is some configuration in the development environment, index.js is the main configuration, and prod.env.js is in the production environment. configuration.
In order to improve the performance of the website, we need to close the source map, set productionSourceMap: false, and enable the file compression function of js and css.

In this way, the size of the packaged file will be much smaller, and placing it on the server can also reduce the response time of network requests.
It can be seen that the largest js file is 3.7M, and the compressed version is only 662kb, which is five times smaller in size.

Upload the packaged file to the server


Click "FTP" and "Add FTP" in the pagoda panel.

Click "Root Directory"

Jump to the document page.

Click Upload, and select the two uploaded jar packages, admin and web, in the target directory.

Click "Start Upload"

There are also static files for codingmore-admin-web.

One-click deployment


Search for the keyword "Java" in the software store, and you can see a plugin for "One-click Deployment 3.5 for Java Projects", install it.

Go to the "One-click Java Project Deployment" panel.

You can select Tomcat 8 installation in the "Container Management" panel. If JDK is not installed, a JDK 1.8 will be installed by default when Tomcat 8 is installed.

Enter the Spring Boot panel, click "Add Project", click the folder icon on the right side of "Project Path", you can upload and deploy our Spring Boot project.

codingmore-web (website front end)
Select codingmore-web first.

Fill in the domain name (the domain name of Programming Meow is codingmore.top), and modify the port number to 8081, which is defined in the application.yml file.

Click OK.

You can see that the service has been started, click "Log" to see it.

no problem.
You can also use the terminal tool to view the log in this path.

Check in the security panel to see if port 8081 is open.

After confirming the release, open the incognito mode of the Chrome browser and enter the IP + port number.

It can also be accessed in the form of domain name + port number.

codingmore-admin (website management terminal)
Go to the "One-click Java Project Deployment" Spring Boot panel again and add the codingmore-admin project.

Wait a moment and look at the log.

No problem to start.
codingmore-admin is just a backend service, and the interface is done with vue, so we can use Swagger to confirm whether the interface can be accessed normally.
Allow port 9002 first.

Enter http://www.codingmore.top:9002/doc.html in the browser address bar, you can see the API documentation interface we generated with Knife4j+Swagger.

OK, so we can verify that our admin-side service is also running correctly.
Then, in order to reduce the possibility of the server being attacked, we close the port 9002.
Nginx configuration
codingmore-web
Although the domain name + port number can be accessed, it is not elegant enough. We want to directly access the domain name codingmore.top, what should we do?
You can use Nginx for port forwarding.
The implementation principle of Nginx is to use Nginx to monitor port 80. When an HTTP request arrives, the HOST and other information of the HTTP request are matched with the configuration file and forwarded to the corresponding port.
For example, when a user accesses codingmore.top, Nginx knows from the configuration file that this is an HTTP request, so it forwards the request to the application on port 8081 for processing.
upstream codingmore_web_pool{
server 127.0.0.1:8081;
}

server {
listen 80;
server_name codingmore.top;
access_log logs/codingmore_web.log;
error_log logs/codingmore_web.error;

#Forward all requests to the application processing of the pool pool
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_web_pool;
}
}

This is the so-called port forwarding. The software uniformly monitors a certain port (usually port 80) on a certain domain name. When the domain name and port of the access server meet the requirements, it will be forwarded to the specified Tomcat server for processing according to the configuration. Our commonly used Nginx also has port forwarding function.
OK, after understanding the principle, we copy this configuration to the Nginx configuration in the pagoda panel.

Click "Save".
Then visit codingmore.top in your browser to request the content.

In this case, we turn off port 8081 by the way to reduce the possibility of a server being attacked.
OK, so we have completed the deployment of codingmore-web, which is the front-end service deployment of programming meow🐱.
codingmore-admin-web
The packaged file of codingmore-admin-web is static, so we only need to add the configuration path of admin in Nginx and it will be OK.
upstream codingmore_web_pool{
server 127.0.0.1:8081;
}

server {
listen 80;
server_name codingmore.top;
access_log /home/www/codingmore_web.log;
error_log /home/www/codingmore_web.error;

location /admin {
alias /www/wwwroot/itwanger/dist/; # root directory
index index.html;
}

#Forward all requests to the application processing of the pool pool
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_web_pool;
}
}

We have added an admin location to the server, that is, when we visit codingmore.top/admin, we will request static files in the /www/wwwroot/itwanger/dist/ directory.
Here is the difference between root and alias:

root: The address prefix of the actual access is root + the requested path path, that is, admin => /www/wwwroot/itwanger/dist/admin
alias: The actual visit is /www/wwwroot/itwanger/dist

Note the difference between the two. Let's visit codingmore.top/admin:

OK.
Programming Meow🐱 is a front-end and back-end separation project. How do front-end requests access the back-end API interface? Just chat.
Open the codingmore-admin-web/config/prod.env.js file, there is a VUE_APP_BASE_API property, its value is /api, which means that the front-end request will be sent to the /api prefix path.
'use strict'
module.exports = {
NODE_ENV: '"production"',
VUE_APP_BASE_API: '"/api"'
}

Then our codingmore-admin backend service runs on port 9002, which means that we need to add a path to Nginx to forward the api prefix request to 9002.
OK, let's take a look at the complete configuration content.
upstream codingmore_web_pool{
server 127.0.0.1:8081;
}

upstream codingmore_admin_pool{
server 127.0.0.1:9002/;
}

server {
listen 80;
server_name codingmore.top;
access_log /home/www/codingmore_web.log;
error_log /home/www/codingmore_web.error;

location /admin {
alias /www/wwwroot/itwanger/dist/; # root directory
index index.html;
}

location /api/ {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_admin_pool;
}

#Forward all requests to the application processing of the pool pool
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_web_pool;
}
}

ok, log in to the admin side, you can see our article management page.

website domain name

Programming Meow web terminal: www.codingmore.top
Codingmore admin terminal: www.codingmore.top/admin
Programming Meow GitHub repository: github.com/itwanger/co…


There's nothing to stop me—except for purpose, even if there are roses, shades, and quiet harbors on the shore, I'm not a boat.
This article has been included in the open source column "The Road to Advanced Java Programmers" starred 2.6k+ on GitHub. It is said that every excellent Java programmer likes her, which is humorous and easy to understand. The content includes Java basics, Java concurrent programming, Java virtual machine, Java enterprise-level development (Git, Nginx, Maven, Intellij IDEA, Spring, Spring Boot, Redis, MySql, etc.), Java interviews and other core knowledge points. If you learn Java, you will look for the advanced path of Java programmers😄.
github.com/itwanger/to…
Staring this repository means you have the potential to become a good Java engineer.

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00