To my front-end girlfriend (2) - Deployment mode of front-end and back-end separation architecture

brief description

• The main significance of the front-end and back-end separation architecture is that the front-end and back-end are decoupled and deployed independently, which is conducive to their own scalability and high availability.
• The common deployment method for front-end and back-end separation is to use nginx to deploy the front-end project, and the java back-end uses a java-based server or the integrated SpringBoot framework. When the front-end accesses the interface, it accesses the back-end service interface through the nginx proxy to obtain data
• There are also some deployment modes that are not completely separated, such as Thymeleaf template engine, etc.
• This article will use the above two deployment modes as examples

deployment plan

This article takes the deployment of a single backend service as an example (stand-alone mode), see the distributed architecture

1、linux + nginx + React + SpringBoot2.x

architecture diagram

Flow Description

• 1. The client obtains the page by requesting the nginx front-end project path
• 2. The page requests the interface to nginx, and nginx requests the background service to obtain data according to the route, and then returns the data to the page

Environmental description

• linux system CentOs7.x
• nginx1.16.0
• Backend: SpringBoot2.x
• Front end: react development webpack packaging (single page application)

deployment steps

1. Install nginx

Install nginx dependency plugin

#安装必要依赖插件
yum install -y gcc gcc-c++ pcre \
pcre-devel zlib zlib-devel openssl openssl-devel wget

download nginx

cd /usr/local
mkdir install-file && cd install-file
wget https://nginx.org/download/nginx-1.16.0.tar.gz

unzip and install

tar zxvf nginx-1.16.0.tar.gz
cd nginx-1.16.0
./configure --prefix=/usr/local/nginx
make && make install

Add global command

ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx

Check the version number to verify that the installation was successful

nginx -V

start nginx

nginx

View nginx process

ps -ef|grep nginx

Configure nginx service to start automatically at boot

systemctl enable nginx

After installation, the configuration file is in:

vim /usr/local/nginx/conf/nginx.conf

nginx basic commands

#启动nginx
nginx
#此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。            
nginx -s stop
#此方式停止步骤是待nginx进程处理任务完毕进行停止。
nginx -s quit
#重启nginx
nginx -s reload

hide version number

The version number of nginx is enabled by default and can be viewed in the default error page and http response header. Different versions, especially lower versions of nginx may have vulnerabilities, so if you do not want the version number to be obtained by others, you can choose to hide the version number. **

The server_tokens of the nginx.conf file is changed to off

cd /usr/local/nginx/conf
vim nginx.conf
#修改配置文件
http {
    
    
...
server_tokens off;
...
} 

Modify fastcgi.conf again

vim fastcgi.conf

Modify the following line

fastcgi_param SERVER_SOFTWARE nginx/$nginx_version;

Change to:

fastcgi_param SERVER_SOFTWARE nginx;

Hidden version number completed

2. Deploy the front-end project

The front-end project is packaged and uploaded to the following directory on the server

mkdir /usr/local/front

Copy the content of the file

to a copy of nginx.conf to the directory apps

cd /usr/local/nginx/conf/
mkdir apps
cp nginx.conf /apps/front.conf

Modify the nginx configuration file

vim /usr/local/nginx/conf/nginx.conf

Modified content: use include apps/*.conf; import the front-end project configuration file front.conf

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include apps/*.conf;

modify front.conf

vim /usr/local/nginx/conf/apps/front.conf

Modify content

server {
    
    
    listen       8888;
    location /   {
    
    
        root   /usr/local/front;
        index  index.html index.htm;
    }
    }

restart nginx

nginx -s reload

Enter the address in the browser to access the project: http://127.0.0.1:8888/

3. Deploy the backend project

Use the maven plugin to build the SpringBoot project as a jar package

cd /项目根目录
#maven构建jar命令
mvn -U clean package -Dmaven.test.skip=true

Upload the jar package to the server directory: /usr/local/back

cd /usr/local/ && mkdir back
cd back && ls
xxxxxx.jar

Start jar, take port 9000 as an example

nohup java -Xms256m -Xmx512m -jar xxx.jar >/dev/null 2>&1 &
echo $! > /usr/local/back/xxx\.PID 

Modify front.conf, /api is the unified prefix for the front-end access to the back-end interface (for example: http://127.0.0.1:8888/api/back-end interface url), used to match the route

server {
    
    
    listen       8888;
    location /   {
    
    
        root   /usr/local/front;
        index  index.html index.htm;
    }
    location /api   {
    
    
        proxy_pass http://127.0.0.1:9000/;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
 }

restart nginx

nginx -s reload

Visit the project, http://127.0.0.1:8888/, browser capture packet view request interface
deployment completed

2、linux + React + oss + SpringBoot2.x + Thymeleaf

architecture diagram

Flow Description

• 1. The client obtains the page by requesting the backend service interface
• 2. After returning to the page, request oss static resources
• 3. The page requests the background interface to obtain data, and then returns the data to the page

Environmental description

• linux CentOs7.x
• Backend SpringBoot2.x + Thymeleaf
• Front-end React Webpack packaging (single-page application)

deployment steps

1. Front-end deployment

• 1. The front end uploads the css, js and static files after the build to oss
• 2. Notify the backend of the file path

2. Deploy the backend

Create a SpringBoot project and introduce thymeleaf dependencies

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency> 

Add configuration to the SpringBoot configuration file:

spring:
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    check-template-location: true
    suffix: html
    encoding: UTF-8
    content-type: text/html
    mode: HTML5

Provide an interface to return to the front-end static page

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.env.Environment;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.HashMap;
import java.util.Map;

/**
 * @author feiyang
 */
@Controller
@RequestMapping("/")
public class IndexController {
    
    

    @Autowired
    private Environment environment;

    @RequestMapping({
    
    ""})
    public ModelAndView index() {
    
    
        //前端版本或者分支
        String frontVersion = environment.getProperty("frontversion", "daily/1.0.0");
        //前端build之后的css及js文件的oss根路径
        String prefix = environment.getProperty("prefix", "feiyang-fe.oss-cn-beijing.aliyuncs.com/demo-front");
        Map<String, String> versionMsg = new HashMap<String, String>();
        //将前端分支以及目录信息通过modelAndView传至页面，页面根据key取得变量
        versionMsg.put("frontVersion", frontVersion);
        versionMsg.put("prefix", prefix);
        //index为静态文件名，不带后缀。
        //modelAndView将会找到index.html，然后返回给前端
        ModelAndView modelAndView = new ModelAndView("index");
        modelAndView.addAllObjects(versionMsg);
        return modelAndView;
    }
}

Create index.html

<!doctype html>
<html lang="en">
<head>
    <title>demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--引入css文件，${prefix}、{frontVersion}从后台传入-->
    <link th:href="|https://${prefix}/${frontVersion}/main.css|" rel="stylesheet">
</head>
<body>
<!--引入js文件，${prefix}、{frontVersion}从后台传入-->
    <script type="text/javascript" th:src="|https://${prefix}/${frontVersion}/main.js|"></script>
</body>
</html>

deployment complete

Summarize

There are many deployment modes under the front-end and back-end separation architecture, but all changes remain the same, so the focus is on mastering the principles