22.前后端項目部署實戰

1.前后端分離項目介紹

1.什么是前后端項目？

簡單來說，就是將前端項目和后端項目進行獨立部署，互相之間通過token進行數據交互。

2.前后端分離與動靜分離有什么區別？

動靜分離，是將動態頁面編譯成靜態，然后緩存到CDN上面。
前后端分離，前端項目被編譯成HTML，但是JS會通過Ajax獲取數據，所以前端頁面內容依然是動態的。

3.前后端項目采用renren-fast來實現

4.前后端項目環境

服務	台數	地址	功能
MySQL	3台	10.0.0.51,10.0.0.52,10.0.0.53	配置pxc集群，保證高度一致性
Redis	3台	10.0.0.54,10.0.0.55,10.0.0.56	配置RedisCluster集群
后端	3台	10.0.0.7,10.0.0.8,10.0.0.9	Nginx負載+Java動態環境
前端	3台	10.0.0.4,10.0.0.5,10.0.0.6	Nginx負載+Nginx靜態環境

PS:
1.先導入數據庫；
2.后端所有節點都需要連接MySQL、Redis
3.前端項目需要連接后端項目

2.后端MySQL集群配置

數據庫集群架構圖如下：

1.安裝數據庫（配置PXC集群）

[root@db01 ~]# yum install mariadb mariadb-server -y
[root@db01 ~]# systemctl start mariadb
[root@db01 ~]# systemctl enable mariadb
[root@db01 ~]# mysqladmin password 123456
[root@db01 ~]# 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;
[root@db01 ~]# systemctl restart mariadb

3.后端Redis集群配置

Redis集群架構圖如下：

1.安裝Redis

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

4.后端項目配置集群

后端項目編譯后，連接MySQL、Redis集群架構圖如下：

1.克隆renren_fast后端項目

[root@web01 ~]# git clone https://gitee.com/renrenio/renren-fast.git
[root@web01 ~]# cd renren-fast/

2.配置renren-fast后端項目連接數據庫

1.導入數據至數據庫
[root@web01 renren-fast]# mysql -h10.0.0.51 -uall -p123456 -B renren_fast < db/mysql.sql

2.修改連接數據庫的配置
[root@web01 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.編譯項目
[root@web01 renren-fast]# yum install java maven -y
[root@web01 renren-fast]# mvn install -Dmaven.test.skip=true

2.拷貝jar包至其他機器，然后通過java命令運行
[root@web01 renren-fast]# scp target/renren-fast.jar root@172.16.1.8:~
[root@web01 renren-fast]# scp target/renren-fast.jar root@172.16.1.9:~
[root@web02 ~]# yum install java -y
[root@web02 ~]# java -jar ~/renren-fast.jar &
[root@web03 ~]# yum install java -y
[root@web03 ~]# java -jar ~/renren-fast.jar &

3.配置Nginx負載均衡，調度到后端多台Java項目
[root@web01 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;
	}
}

[root@web01 conf.d]# nginx -t
[root@web01 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.克隆項目

[root@lb01 ~]# git clone https://gitee.com/renrenio/renren-fast-vue.git
[root@lb01 ~]# cd renren-fast-vue/

2.安裝依賴包

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

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

[root@lb01 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節點

[root@lb01 renren-fast-vue]# cnpm rebuild node-sass
[root@lb01 renren-fast-vue]# cnpm run build

拷貝到各個節點
[root@lb01 renren-fast-vue]# mkdir /code/renren-fast -p
[root@lb01 renren-fast-vue]# cp -rp dist/* /code/renren-fast/
[root@lb01 ~]# scp -rp /code root@10.0.0.6:/
[root@lb01 ~]# scp -rp /code root@10.0.0.5:/

5.拷貝編譯后的靜態資源，在【10.0.0.5、10.0.0.6】進行部署

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

	location / {
	index index.html;
	}
}
[root@lb01 conf.d]# nginx -t
[root@lb01 conf.d]# systemctl restart nginx

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

	location / {
	index index.html;
	}
}
[root@lb02 conf.d]# nginx -t
[root@lb02 conf.d]# systemctl restart nginx

6.在【10.0.0.4】安裝Nginx並接入負載均衡，調度至后端web主機

[root@lb03 ~]# yum install nginx -y
[root@lb03 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;
	}
}
[root@lb03 conf.d]# nginx -t
[root@lb03 conf.d]# systemctl restart nginx

域名解析：10.0.0.4  renren.cheng.com

7.通過瀏覽器訪問renren-fast前端，測試是否能正常登陸后台