致我的前端女友（二）——前后端分离架构的部署模式

简述

• 前后端分离架构的主要意义在于前后端解耦、独立部署，有利于各自的可扩展性、高可用性。
• 前后端分离的常见部署方式是使用nginx部署前端项目，java后端用java系服务器或者用集大成的SpringBoot框架，前端访问接口时，通过nginx代理访问后端服务接口获取数据
• 前后端分离也有一些不是完全分离的部署模式，比如Thymeleaf模板引擎等
• 本文将以上述两种部署模式做示例

部署方案

本文以部署单个后端服务为例（单机模式），分布式架构请见

1、linux + nginx + React + SpringBoot2.x

架构图

流程说明

• 1、客户端通过请求nginx前端项目路径获取页面
• 2、页面请求接口至nginx，nginx根据路由去请求后台服务获取数据，然后返回数据给页面

环境说明

• linux系统CentOs7.x
• nginx1.16.0
• 后端：SpringBoot2.x
• 前端：react开发 webpack打包（单页面应用）

部署步骤

1、安装nginx

安装nginx依赖插件

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

下载nginx

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

解压并安装

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

添加全局命令

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

查看版本号，验证安装成功

nginx -V

启动nginx

nginx

查看nginx进程

ps -ef|grep nginx

配置nginx服务开机自启

systemctl enable nginx

安装完毕 ，配置文件在:

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

nginx基本命令

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

隐藏版本号

nginx的版本号默认是打开的，可以在默认的错误页面和http响应头中查看到。不同版本，特别是低版本的nginx可能存在漏洞，所以如果不希望被别人获取到版本号的话，可以选择进行版本号隐藏。**

nginx.conf文件的server_tokens修改成off

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

再修改fastcgi.conf

vim fastcgi.conf

修改如下行

fastcgi_param SERVER_SOFTWARE nginx/$nginx_version;

改为：

fastcgi_param SERVER_SOFTWARE nginx;

隐藏版本号完毕

2、部署前端项目

前端项目打包上传至服务器以下目录