Hi Big Ben & Poor’s, two open-source Spring Boot + Vue items can be separated from the front and rear ends of the online experience

Toss the week yesterday finally get the domain name for the record.

Song Ge first thought quickly to deploy micro personnel and V tribes go up, I know a lot of small partners can not wait.

1. have also been on the line

In fact, these two items was just made, I put them on the server to deploy to help small partners better viewing. But that is a foreign server, have been buying foreign server, the main domestic record is too troublesome, of course, there are other reasons we know everything.

Foreign servers have convenient place, but also a lot of inconvenience, such as network instability, risks associated with any errors at any time. So I’m at the beginning of 2018, although these two projects are deployed on the server, but many small partners access experience is not good, mainly the problem of the network. Some time later, after several rounds of encirclement and counter-encirclement, and this server completely lost to the Song Ge.

After lost contact because of busy work, I will not bother to toss, resulting in micro-V personnel and tribal people online can not see the effects for a long period of time.

2. back online

Recently because there are some other plans, so the purchase of Ali cloud services, after bin is the record, after everything is done, I think first deployment of personnel and V micro tribes together, to facilitate viewing.

Went ahead, I first of two planned secondary domain name:


These two domain names are used to deploy two tribes and V micro personnel.

You can see the effect of these two addresses:

Micro Personnel

V tribe

In order to ensure that each small partners can see the full demonstration effect, preventing some small partner accidentally cleared of all data, leading to other small partners and consequently can not see, I just opened a demo account inquiries and some fields of update permissions, so when you view a demonstration effect, there may be some operations involving additions and deletions will fail to perform, do not take offense, after deploying the project to run locally, you can view the full effects.

3. skill tree

Since they wrote here, and we chat on the deployment of the two is how to achieve.

3.1 deployment choice

We all know that when the front and rear end of the separation deployment, we have two different scenarios:

    One is then packaged item compiler front end, a rear end into the project (for example src Spring Boot project / main / resources / static directory)

    In addition, after a static resource packed with Nginx sucked the tip to deploy, alone back-end deployments require only a simple interface can be provided.

In general, project, we are more of the latter. However, Song Ge deployed here in order to save, I used the first option. (I would later find time and we talk about the second deployment scenario)

3.2 Domain Name Mapping

This simple domain name mapping, log Ali cloud background, add two A record can be.

3.3 Starting Spring Boot

The micro personnel and V respectively tribes package uploaded to the server, the process should be no need for me to say it, and then start the two projects respectively, the default port for the two projects were 8081 and 8082, the following command:

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

The two projects are running log is written to vblog.log and vhr.log file.

After a successful start, we will be able to access these two items separately by and two ports. But it has not reached the goal of Song Ge, I would like to be accessed through two domain names, and want to access through port 80, it is necessary to use the Nginx.


After startup, you need to log Ali cloud background, 8081 and 8082 confirmed that the port has been opened.

3.4 Nginx configuration

Nginx’s basic usage, you can refer to this Old Man’s Song Ge:

    Nginx minimalist introductory tutorial!

Here we take a look at Nginx configuration.

Since there are two second-level domain, but also configure additional domain name servers in the future, so to be able to do dynamic domain name resolution, and therefore follows the specific configuration:

server {
    listen       80;
    server_name  *;

    if ($http_host ~* "^(.*?)\.itboyhub\.com$") {
            set $domain $1;
    # 其他配置...

    First of all listening ports 80

    Secondary domain is replaced by a wildcard *

    Then use the if statement, the expression extracted by the second-level domain names being handed variable $ domain, for later use.

Next, configure the forwarding rules:

location / {
  if ($domain ~* "vhr") {
  if ($domain ~* "vblog") {
  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;

    When $ domain contains vhr defined characters, forwards the request to

    When $ domain contains vblog defined characters, forwards the request to

    Finally, configure the user’s proxy server receives the information on to the real server

On the other hand, due to the back-end default home page is /index.html, if the user direct access or, rights management mechanism will be blocked (will be automatically redirected to / login_p), therefore, If the user does not access address /index.html, is automatically added to /index.html, configured as follows:

location /login_p {
   if ($domain ~* "vhr") {
     rewrite ^/(.*)$ permanent;
   if ($domain ~* "vblog") {
     rewrite ^/(.*)$ permanent;

Note that this configuration disposed in line location / prior meaning and if the preceding two as here omitted.

OK, so even after our configuration is completed (above nginx complete profile junior partner in the public can get reply nginx.conf number background).

Then we can access both the open source project by two second-level domain, a small partners to quickly test it.


4. Conclusion

Finally, again a small partners Amway two open source projects:


If you want to learn Spring Boot + Vue before and after the end of the separation project, both good information is rare. Where V tribes either from a technical or business point, it should be simpler, so if you are a novice, you can take a look at V tribes. Although micro personnel a little more complicated, but fortunately Song Ge with complete development documentation, according to development documents, I believe we can understand most of the function. Documentation as follows:

If you encounter problems during deployment, you can also refer to deploy video Song Ge hands:

    Micro-project personnel deployed video tutorials

Well, we said that, small partners have discussed questions please leave a message.

关注公众号【江南一点雨】,专注于 Spring Boot+微服务以及前后端分离等全栈技术,定期视频教程分享,关注后回复 Java ,领取松哥为你精心准备的 Java 干货!

Leave a Reply