基于Mysql与Redis数据库集群的前端项目搭载与负载均衡

前言

在前面的文章中算是完成了对于后端项目的搭载与负载均衡，使用到了nginx负载均衡与keepalived实现多nginx的双机来保证稳定与可靠，这一篇文章就主要来讲一讲如何实现前端项目的稳定运行与高可用。

部署

之前我们在运行前后端分离项目的前端项目中，可以使用到很多的前端运行工具，但是本质上也都是在node下运行的，我们打包以后可能就要在nginx服务器上进行运行。

配置

首先是对于配置文件的更改，对于前端项目可以去前端项目地址进行下载，在自己本地进行运行。
我们进入到以下的目录中找到如下配置：

如下修改：

 window.SITE_CONFIG['baseUrl'] = 'http://192.168.99.151:6201/renren-fast-server';

进入到前端项目所在的目录执行：

cnpm run build

执行完以后会出现一个叫做dist的文件夹，将dist下的所有文件拷贝到nginx下。
build目录的文件拷贝到宿主机的/home/fn1/renren-vue、/home/fn2/renren-vue、/home/fn3/renren-vue的目录下面。
注意： 这里的文件夹是自己创建的。

创建3节点的Nginx，部署前端项目

节点1

宿主机/home/fn1/nginx.conf的配置文件如下

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

	proxy_redirect          off;
	proxy_set_header        Host $host;
	proxy_set_header        X-Real-IP $remote_addr;
	proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
	client_max_body_size    10m;
	client_body_buffer_size   128k;
	proxy_connect_timeout   5s;
	proxy_send_timeout      5s;
	proxy_read_timeout      5s;
	proxy_buffer_size        4k;
	proxy_buffers           4 32k;
	proxy_busy_buffers_size  64k;
	proxy_temp_file_write_size 64k;

	server {
		listen 6501;
		# nginx端口
		server_name  192.168.99.101;
		# 宿主机的网络
		location  /  {
			root  /home/fn1/renren-vue;
			# 映射到容器内部。
			index  index.html;
		}
	}
}

-v /home/fn1/renren-vue:/home/fn1/renren-vue： 目录的映射：

#启动第fn1节点
docker run -it -d --name fn1 -v /home/fn1/nginx.conf:/etc/nginx/nginx.conf -v /home/fn1/renren-vue:/home/fn1/renren-vue --privileged --net=host nginx

节点2

宿主机/home/fn2/nginx.conf的配置文件

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
   
    worker_connections  1024;
}

http {
   
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local]