1.前后端分离项目介绍

1.什么是前后端项目？

简单来说，就是将前端项目和后端项目进行独立部署，互相之间通过token进行数据交互。

2.前后端分离与动静分离有什么区别？

动静分离，是将动态页面编译成静态，然后缓存到CDN上面。
前后端分离，前端项目被编译成HTML，但是JS会通过Ajax获取数据，所以前端页面内容依然是动态的。

3.前后端项目采用renren-fast来实现

4.前后端项目环境

PS:
1.先导入数据库；
2.后端所有节点都需要连接MySQL、Redis
3.前端项目需要连接后端项目

2.后端MySQL集群配置

数据库集群架构图如下：

1.安装数据库（配置PXC集群）

[[email protected] ~]# yum install mariadb mariadb-server -y
[[email protected] ~]# systemctl start mariadb
[[email protected] ~]# systemctl enable mariadb
[[email protected] ~]# mysqladmin password 123456
[[email protected] ~]# mysql -uroot -p123456
MariaDB [(none)]> grant all privileges on *.* to 'all'@'%' identified by '123456';
MariaDB [(none)]> flush privileges;
MariaDB [(none)]> create database renren_fast charset utf8;
[[email protected] ~]# systemctl restart mariadb

3.后端Redis集群配置

Redis集群架构图如下：

1.安装Redis

[[email protected] ~]# yum install redis-server -y
[[email protected] ~]# vim /etc/redis.conf +61
bind 127.0.0.1 172.16.1.52
[[email protected] ~]# systemctl restart redis
[[email protected] ~]# systemctl enable redis

4.后端项目配置集群

后端项目编译后，连接MySQL、Redis集群架构图如下：

1.克隆renren_fast后端项目

[[email protected] ~]# git clone https://gitee.com/renrenio/renren-fast.git
[[email protected] ~]# cd renren-fast/

2.配置renren-fast后端项目连接数据库

1.导入数据至数据库
[[email protected] renren-fast]# mysql -h10.0.0.51 -uall -p123456 -B renren_fast < db/mysql.sql

2.修改连接数据库的配置
[[email protected] renren-fast]# vim src/main/resources/application-dev.yml
spring:
    datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        druid:
            driver-class-name: com.mysql.cj.jdbc.Driver
            url: jdbc:mysql://10.0.0.51:3306/renren_fast?
useUnicode=true&characterEncoding=UTF-8&serverTimezone=As
ia/Shanghai
            username: all
            password: 123456

3.使用mvn编译renren-fast后端项目【10.0.0.7】，在web02,web03上进行部署

1.编译项目
[[email protected] renren-fast]# yum install java maven -y
[[email protected] renren-fast]# mvn install -Dmaven.test.skip=true

2.拷贝jar包至其他机器，然后通过java命令运行
[[email protected] renren-fast]# scp target/renren-fast.jar [email protected]:~
[[email protected] renren-fast]# scp target/renren-fast.jar [email protected]:~
[[email protected] ~]# yum install java -y
[[email protected] ~]# java -jar ~/renren-fast.jar &
[[email protected] ~]# yum install java -y
[[email protected] ~]# java -jar ~/renren-fast.jar &

3.配置Nginx负载均衡，调度到后端多台Java项目
[[email protected] conf.d]# cat fast.cheng.com.conf
upstream fast {
    server 172.16.1.8:8080;
    server 172.16.1.9:8080;
}

server {
    listen 80;
    server_name fast.cheng.com;

    location / {
    proxy_pass http://fast;
    proxy_set_header Host $http_host;
    }
}

[[email protected] conf.d]# nginx -t
[[email protected] conf.d]# systemctl restart nginx

4.域名解析：10.0.0.7  fast.cheng.com

4.通过浏览器访问http://fast.cheng.com/renren-fast/swagger/index.html后端进行测试

5.验证用户登录接口，测试后端项目是否成功

6.通过post测试是否成功

7.至此，后端集群项目部署成功。

5.前端项目集群配置

renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。前端集群架构图如下：

1.克隆项目

[[email protected] ~]# git clone https://gitee.com/renrenio/renren-fast-vue.git
[[email protected] ~]# cd renren-fast-vue/

2.安装依赖包

[[email protected] renren-fast-vue]# curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -
[[email protected] renren-fast-vue]# yum install nodejs npm -y --skip-broken
[[email protected] renren-fast-vue]# npm install -g cnpm --registry=https://registry.npm.taobao.org
[[email protected] renren-fast-vue]# cnpm install

3.修改前端连接后端的配置

[[email protected] renren-fast-vue]# vim static/config/index-prod.js
/**
 * 生产环境
 */
;(function () {
  window.SITE_CONFIG = {};

  // api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://fast.cheng.com/renren-fast';
...............

4.编译项目，然后推送到各个web节点

[[email protected] renren-fast-vue]# cnpm rebuild node-sass
[[email protected] renren-fast-vue]# cnpm run build

拷贝到各个节点
[[email protected] renren-fast-vue]# mkdir /code/renren-fast -p
[[email protected] renren-fast-vue]# cp -rp dist/* /code/renren-fast/
[[email protected] ~]# scp -rp /code [email protected]:/
[[email protected] ~]# scp -rp /code [email protected]:/

5.拷贝编译后的静态资源，在【10.0.0.5、10.0.0.6】进行部署

[[email protected] conf.d]# yum install nginx -y
[[email protected] conf.d]# cat renren.cheng.com.conf
server {
    listen 80;
    server_name renren.cheng.com;
    root /code/renren-fast;

    location / {
    index index.html;
    }
}
[[email protected] conf.d]# nginx -t
[[email protected] conf.d]# systemctl restart nginx

[[email protected] conf.d]# cat renren.cheng.com.conf
server {
    listen 80;
    server_name renren.cheng.com;
    root /code/renren-fast;

    location / {
    index index.html;
    }
}
[[email protected] conf.d]# nginx -t
[[email protected] conf.d]# systemctl restart nginx

6.在【10.0.0.4】安装Nginx并接入负载均衡，调度至后端web主机

[[email protected] ~]# yum install nginx -y
[[email protected] conf.d]# cat proxy_renren.cheng.com.conf
upstream renren {
    server 10.0.0.5:80;
    server 10.0.0.6:80;
}

server {
    listen 80;
    server_name renren.cheng.com;

    location / {
    proxy_pass http://renren;
    proxy_set_header Host $http_host;
    }
}
[[email protected] conf.d]# nginx -t
[[email protected] conf.d]# systemctl restart nginx

域名解析：10.0.0.4  renren.cheng.com

7.通过浏览器访问renren-fast前端，测试是否能正常登陆后台

原文地址：https://www.cnblogs.com/yinwu/p/11620432.html