Shulou(Shulou.com)06/02 Report--

This article mainly introduces "sharing two open source Spring Boot + Vue front and back-end separation projects". In daily operation, I believe many people have doubts about sharing two open source Spring Boot + Vue front-end separation projects. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "sharing two open source Spring Boot + Vue front-end separation projects". Next, please follow the editor to study!

First, two second-level domain names are planned:

Vblog.itboyhub.com

Vhr.itboyhub.com

These two second-level domain names are used to deploy V tribes and micro personnel respectively.

You can view the results through these two addresses:

Micro personnel

V tribe

In order to ensure that each partner can see the complete demonstration effect, and prevent some partners from inadvertently emptying all the data, resulting in other partners not seeing anything, I only opened the query of the demonstration account and the update permission of some fields. Therefore, when you check the demonstration effect, some operations involving additions, deletions and modifications may fail. Please do not mind, after the project is deployed to run locally. You can see the full effect.

Skill tree

Now that it's all written here, let's talk to you about how these two deployments are implemented.

Deployment option selection

As you know, when the front and rear ends are deployed separately, we have two different solutions:

One is to package and compile the front-end project and put it into the back-end project (for example, under the src/main/resources/static directory of the Spring Boot project)

The other is to deploy the static resources packaged at the front end with Nginx, while the separate deployment at the back end only needs to provide interfaces.

Generally speaking, in the company project, we use the latter more. However, Brother Song was deployed here to save trouble, so I adopted the first scheme. (I will talk to you about the second deployment plan in the future.)

Domain name mapping

Domain name mapping is simple. Log in to Aliyun backend and add two A records.

Start Spring Boot

I don't need to say much about the process of packaging and uploading Weir personnel and V tribe to the server respectively, and then start these two projects with default ports of 8081 and 8082, respectively. The command is as follows:

Nohup java-jar vblog.jar > vblog.log & nohup java-jar vhr.jar > vhr.log &

Write the run logs of the two projects to the vblog.log and vhr.log files, respectively.

After the startup is successful, we can access the two projects through the itboyhub.com:8081 and itboyhub.com:8082 ports respectively. But this has not reached Songge's goal, I want to access through the second-level domain name, and want to access through port 80, which is based on Nginx.

Be careful

After the startup is completed, you need to log in to the Aliyun backend to make sure that ports 8081 and 8082 have been enabled.

Nginx configuration

Here we mainly look at the configuration of Nginx.

Since there are two second-level domain names, and other domain names will be configured on the server in the future, the domain name should be able to be resolved dynamically, so the specific configuration is as follows:

Server {listen 80; server_name * .itboyhub.com; if ($http_host ~ * "^ (. *?)\ .itboyhub\ .com $") {set $domain $1;} # other configurations.}

The first listening port is 80

The secondary domain name is replaced by a wildcard character *.

Next, in the if statement, extract the name of the secondary domain name through the regular expression and give it to the variable $domain for later use.

Next, configure the forwarding rules:

Location / {if ($domain ~ * "vhr") {proxy_pass http://itboyhub.com:8082;} if ($domain ~ * "vblog") {proxy_pass http://itboyhub.com:8081;} tcp_nodelay on; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; index index.html }

Forward the request to http://itboyhub.com:8082 when the defined $domain contains the vhr character

Forward the request to http://itboyhub.com:8081 when the defined $domain contains the vblog character

Finally, configure to transmit the user's information received by the proxy server to the real server.

On the other hand, since the default backend home page is / index.html, if the user accesses vblog.itboyhub.com or vhr.itboyhub.com directly, it will be blocked by the rights management mechanism (it will be automatically redirected to / login_p). Therefore, if the user does not have / index.html in the access address, / index.html will be added automatically, as configured as follows:

Location / login_p {if ($domain ~ * "vhr") {rewrite ^ / (.*) $http://vhr.itboyhub.com/index.html permanent;} if ($domain ~ * "vblog") {rewrite ^ / (.*) $http://vblog.itboyhub.com/index.html permanent;}

Note that this line of configuration is configured before location /, and the meaning of the two if here is the same as the previous one, so I won't repeat it.

At this point, the study on "sharing two open source Spring Boot + Vue front-end and back-end separation projects" is over. I hope to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.