How Do Vue and React Projects Call the Back-end Interface

Foreword

For deploying Vue and React projects, please refer to Kato deploying Vue and React projects

In the past, after deploying the front-end project, we called the back-end interface in the following scenarios:

The back-end interfaces are not unified and scattered, for example: /system/user,/tool/gen.

Usually we will write the backend ip directly in the project’s global configuration file .env.production, for example:

 ENV ='production'
 VUE_APP_BASE_API = '192.168.6.66:8080'

Although this writing can be accessed normally, it will cause a cross-domain problem.

The back-end interface is unified, for example: /api/system/user, /api/tool/gen.

Most of the friends will also directly write IP + suffix to the project global configuration file, for example:

 ENV ='production'
 VUE_APP_BASE_API = '192.168.6.66:8080/api'

Of course, writing this way will have the problem of cross-domain.

So how do we solve the cross-domain problem of inconsistent interfaces or unified interfaces?

​Answer: Use Nginx reverse proxy.

​Most small partners use nginx to throw the packaged dist package into nginx, configure a location proxy_pass reverse proxy backend, and then fill in the Nginx address in the project’s global configuration. Soy sauce will still cross 😋. How to deal with it, please look down 👇

There are several ways to solve cross-domain for different scenarios:

Interface is Not Unified

If the number of interfaces is small, for example, there are only a few interfaces system tool monitor login getmenu etc.

First, you need to modify the request api of the global configuration file .env.production to /. When the Jiangzi write front-end initiates a request, it will be directly forwarded to nginx.

ENV ='production'
VUE_APP_BASE_API ='/'

Secondly, modify the Nginx configuration file and add multiple **locations, which will match the nginx location rules when requested by the browser, for example:

​The browser requests the menu: http://192.168.6.66/getmenu, which will match the location /getmenu rule to reverse proxy to the backend.

server {
      listen 5000;
         #Static pages
      location / {
          root /app/www;
          try_files $uri $uri/ /index.html;
          index index.html index.htm;
      }
      
      location /getmenu{
          proxy_pass http://127.0.0.1:8080/;
      }
  }

This method is certainly possible, but it is troublesome to configure one by one for dozens or hundreds of interfaces.

Similarly, you also first need to modify the global configuration file .env.production, modify the request interface to api, this interface is customized. Some friends are in doubt, I don’t have this interface, please read on.

ENV ='production'
VUE_APP_BASE_API ='/api'

Then modify the Nginx configuration file, add location /api to the nginx configuration file, and add rewrite, proxy_pass, this rewrite is the URL rewrite write.

For example: request http://192.168.6.66/api/system/menu, the Jiangzi request is sent to the backend normally, and the backend will report an error that there is no such interface.

We use rewrite to rewrite the URL, at this time the URL will become http://192.168.6.66/system/menu and reverse proxy to the backend through proxy_pass, and then send an interface request/ system/menu, the backend returns normally.

server {
    listen 5000;

    location / {
        root /app/www;
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }

    location /api {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://192.168.2.182:8080;
    }
}

rewrite ^/api/(.*)$ /$1 break For details, please refer to Nginx official document rewrite_module module, here is a brief introduction :

rewrite ^/api/(.*)$ /$1 break

Keyword Regular alternative content flag

Unified Interface

It is better to deal with this.

Also, first modify the project’s global configuration file .env.production, and modify the request interface to /prod-api. This unified interface is provided by the backend.

ENV ='production'
VUE_APP_BASE_API ='/prod-api'

Modify the Nginx configuration file and add a location to reverse proxy to the back-end address.

At this time, the URL requested in the browser is: http://192.168.6.66/prod-api/system/menu.

server {
    listen 5000;

    location / {
        root /app/www;
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }

    location /prod-api {
        proxy_pass http://192.168.2.182:8080;
    }
}

The cross-domain problem is solved, then we start to practice it once 😁.

The front-end configuration this time is the method of interface unified mentioned above

Next, deploy a SpringBoot back-end project to work with the front-end.

Source Code Deployment Backend

The source code address of this project https://gitee.com/zhangbigqi/RuoYi-Vue.git Fork open source project RuoYi

The backend is SpringBoot + Mysql + Redis architecture.

Dockerfile Source Code Build and Deploy Mysql

Refer to the blog post Build and run applications with Dockerfile in Kato

  1. Build and deploy Mysql through Dockerfile source code. Reference document Dockerfile source code build

    • Dockerfile source code construction needs to place the Dockerfile file in the Sql directory required by the project to automatically initialize the database.

    • Dockerfile file can refer to https://gitee.com/zhangbigqi/RuoYi-Vue.git the sql directory under this project

  2. Fill in the source code repository address, fill in the Mysql subdirectory sql, and build Mysql.

  3. Confirm the creation of the component, the platform will automatically recognize the language as dockerfile.

  4. Create and wait for the build component to complete.

  5. After the build is completed, open the internal service in Component> Port and modify the alias, click to modify it and change it to MYSQL_HOST for back-end connection.

Docker Image Deployment Redis

  1. Deploy redis through docker image, refer to the official document docker image build

  2. Use redis official mirror, redis:latest

  3. Confirm the creation, the platform will detect some mirror information, just create it directly.

  4. After the build is complete, open the internal service in Components> Port. For backend connection

Java Source Ccode Build and Deploy SpringBoot

  1. The configuration file ruoyi-admin/src/main/resources/application-druid.yml in the back-end project is modified in advance to connect to the database configuration, changed to environment variable connection, and the port alias modified above is used here . And modified the connection Redis configuration in the ruoyi-admin/src/main/resources/application.yml file
# Main database data source
  master:
      url: jdbc:mysql://${MYSQL_HOST}:${MYSQL_PORT}/ry-vue?
  redis:
      # Address
      host: 127.0.0.1
      # Port, the default is 6379
      port: 6379
  1. Build the project with Java source code, refer to the official document JAVA source code build

  2. Fill in the source code repository address to build the SpringBoot project.

  3. The platform will detect what the project is based on the pom.xml file in the root directory of the project. Here it is a multi-module project.

  4. Enter the multi-module construction, check the ruoyi-admin module, this module is runnable, and other modules are dependent. For specific module functions, please refer to Ruoyi official document

  5. Maven build parameters can be modified, no special requirements without modification.

  6. Confirm the creation and wait for the completion of the build.

    • It should be noted here that the platform uses openjdk by default, and this project needs to use oraclejdk to generate the front-end verification code.

    • You need to modify the JDK type in Components> Build Source to a custom JDK, and fill in the custom JDK download path.

    • Custom JDK download address: https://registry.gitlab.com/gridworkz/kato/jdk/jdk1.8.0.tgz

You need to turn on the Disable Cache Button to prevent strange and strange problems with different packages. After the build is successful, disable the cache again, and the correct package will be cached next time you build.

After modification Save the modification. Build the component, wait for the completion of the build, and modify the port to 8080. Enter the topology map interface, switch to edit mode, and establish component dependencies.

  • ruoyi-ui Connect ruoyi-admin.
  • ruoyi-admin Connect Mysql, Redis. Update the component ruoyi-ui ruoyi-admin, and this is done.

Final effect, topology diagram:

Page effect: