文章目录
前言
在前面的文章中算是完成了对于后端项目的搭载与负载均衡,使用到了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] "$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