① Nginx部署前后端项目时的跨域问题
最近在准备一个小项目来着，使用tomcat部署后端的SpringBoot项目，然后使用Nginx部署前端界面并转发后端请求到相应的tomcat集群时，发生了跨域问题，解决过程欲仙欲死，特在此记录一下。
Nginx跨域配置方法一
严格说来，这种方式并不算是跨域请求，因为这种配置要求后端请求的url必须为 http://shop.mk-shop.com/mk-shop-api/xxxx 的形式，也就是说前端项目的请求地址必须进行更改为和客户端页面访问时的url地址一样，这样貌似也就没有跨域问题了。如果前端项目不同模块的请求地址不一样，则都需要进行更改。
Nginx跨域配置方法二
注意： api.mk-shop.com 是后端api的请求前缀，也就是客户端异步加载时的请求地址，以我的项目的后端请求地址为例:
SpringBoot后端处理跨域时可以配置过滤器来实现
注意： 使用过程中，新版本的springboot可能会报错不允许在setAllowedOrigins包含 * ，此时需要使用setAllowedOriginPatterns代替。
② 使用Tomcat和Nginx部署前端项目
第一种方式，将我们的前端项目放置在webapps目录下
进入tomcat安装路径下的conf目录，在server.xml文件中<Host>标签内配置虚拟路径
简单的解释一下参数
path 对应用户请求过来的url路径, /static 匹配所有以 /static 开头的请求
docBase 表示实际匹配到的路径，这里可以使用绝对路径，也可以使用相对路径
reloadable 如果为true，则tomcat会自动检测应用程序的/WEB-INF/lib 和/WEB-INF/classes目录的变化。（对于静态资源来说，个人觉得这个配置用处不大）
总结起来就是，对于ip:8080/static的资源请求，会通过虚拟路径匹配到我们实际的资源路径music_client/static。
配置好后重启，我们可以发现已经能够看到我们的前端项目了
对于ROOT目录下的资源，tomcat可以直接在根目录下进行访问。通过这种方式，我们可以让项目的路径去适配tomcat访问的路径。
但是这种方式不是特别推荐，当有多个项目在同一个tomcat服务器上的时候，会不方便管理。
Nginx是当下热门的服务器，使用起来只需要进行简单的配置即可。对于Nginx的安装大家可以自行网络解决。
我们先进入到usr/local/nginx（具体以实际nginx安装目录为准）下的conf目录，vim编辑nginx.xml。主要进行下面的配置
简单的解释一下
listen 表示nginx监听的端口号，也就是你希望暴露哪个端口给用户进行访问
server_name 表示nginx接受请求的域名，一般默认localhost就行
location 模块用于响应请求，这里的 / 表示匹配8082端口的所有请求
root 表示静态资源/项目的路径
index 表示默认的访问资源
配置完成后，进入 sbin 目录下，通过 ./nginx -t 检查配置文件的格式是否正确
如正确 ./nginx 进行启动或者 ./nginx -s reload 进行重启
启动完，我们就可以直接ip:8082直接访问我们的前端项目啦
开启nginx的反向代理也比较简单，只需要加上proxy_pass 配置即可
出现这个问题的原因是： 在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我们直接在浏览器输入这个地址的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。
我们可以通过把所有请求都转发到首页上来解决这个问题。只需要在 Nignx 中的配置文件加入如下配置：
事实上，上面的解决方式也是Vue-Router官方推荐的解决方式（ https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx ）。
那上面的 try_files 为什么能帮助我们解决这个问题呢？我们可以看一下这个属性的作用
try_files ：按选项所指定的顺序去检查用户请求的文件是否存在，如果本地存在的话则返回该请求；不存在的话将该请求转发到指定的其它路径。也就是说，比如我们当前的前端项目部署在 /usr/myproj 目录下，现在我们在浏览器发起 ip:port/testApi 请求，那么此时 uri 为testApi,nginx会先去 $root/testApi （即/usr/local/myproj/testApi）找是否存在该静态资源，若不存在，则继续寻找 $root/testApi/index （即/usr/local/myproj/testApi/index）文件是否存在，如果还是不存在，则会把请求转发到首页。
而我们的项目本事就是由Vue-Cli创建的 单页面应用 ，当index页面接收到请求的时候，对应的history模式路由就可以发挥作用了，根据浏览器的路由跳转到对应的页面，这也就保证了我们的路由请求都能够转发给index页面来进行处理。
这种问题一般是出现在服务器一开始安装Nginx的时候，没有安装SSL模块。在不重装Nignx的情况下，可以安装如下方式进行操作：
执行如下命令
这一步只是以防万一，可以省略
也可以直接执行 ./usr/local/nginx/sbin/nginx -t 看还会不会报错就行
nginx报错: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:50
③ Docker 搭建 Nginx 集群
实现负载均衡其实并不难、只是很多人不敢去尝试而已,简单来说就是:
在nginx里面配置一个upstream，然后把相关的服务器ip都配置进去。然后采用轮询的方案，然后在nginx里面的配置项里，proxy-pass指向这个upstream，这样就能实现负载均衡.
nginx的负载均衡有4种模式：
1)、轮询（默认）
每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。
2)、weight
指定轮询几率，weight和访问比率成正比，用于后端服务器性能不均的情况。
3)、ip_hash
每个请求按访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可以解决session的问题。
4)、fair ， url_hash（第三方）
按后端服务器的响应时间来分配请求，响应时间短的优先分配。
docker pull nginx ( docker pull cloud.io/nginx 这个稍微快点 )
docker run -itd --name nginx1 -p 8080:80 nginx /bin/bash -- 主
docker run -itd --name nginx2 nginx /bin/bash
docker run -itd --name nginx3 nginx /bin/bash
docker ps 查看
docker network ls
docker nerwork inspect d530da7ebbd3
进入nginx1 (主)
docker exec -it d530da7ebbd3 /bin/bash
安装 vim 编辑器 (如有其他、尽可随意) --- 注意:nginx2、nginx3 均安装 编辑器、下文不再赘述
1. apt update 2. apt install vim
cd /etc/nginx/
vim nginx.conf
进入nginx2
docker exec -it e59de010efff /bin/bash
cd /usr/share/nginx/html/
vim index.html
Welcome to nginx! 后添加: From 172.17.0.3:80 即可
进入nginx3
docker exec -it 0f12240cb622 /bin/bash
cd /usr/share/nginx/html/
vim index.html
Welcome to nginx! 后添加: From 172.17.0.4:80 即可
重启三个nginx服务 service nginx restart
此时如果 docker容器会关闭、因此需要再次重启
docker start d530da7ebbd3
docker start e59de010efff
docker start 0f12240cb622
测试结果
补充:
上述说到 负载均衡有4种模式、
配置分别如下:
轮询模式:
upstream webname {
server192.168.0.1:8080;
server192.168.0.2:8080;
}
weight 模式:
upstream webname {
server192.168.0.1:8080 weight=2;
server192.168.0.2:8080 weight=1;
}
ip_hash模式:
upstream webname {
ip_hash;
server192.168.0.1:8080;
server192.168.0.2:8080;
}
其他配置:
设置某一个节点为backup，那么一般情况下所有请求都访问server1，当server1挂掉或者忙的的时候才会访问server2
upstream webname {
server192.168.0.1:8080;
server192.168.0.2:8080 backup;
}
设置某个节点为down，那么这个server不参与负载。
upstream webname {
server192.168.0.1:8080;
server192.168.0.2:8080 down;
}
④ nginx部署前端纯页面
1.进入nginx配置文件vim .../nginx-1.9.12/conf/nginx.conf。
如上图所示：第一个红框中的内容就是应用服务器的地址；第二个红框中的内容就是前端包的位置。
此时，配置文件已经准备完毕。这个包和端口可以存在多个。
2.进入.../nginx-1.9.12/sbin 找到nginx的启动程序。
nginx -c ../nginx-1.9.12/conf/nginx.conf 启动nginx程序，并指定配置文件。
3.如果要替换包，则直接替换就行，nginx为热加载自动更新的。但是以防有缓存之类的存在，可以使用nginx -s reload命令进行重载一次。
追加 一 ：
如果前端包的构造如下图
则location配置依然如下图
但是访问地址则需要指定到具体的html文件上。。
绑定： http://127.0.0.1:48110/binding.html
成功： http://127.0.0.1:48110/success.html
失败： http://127.0.0.1:48110/error.html
追加 二：
同一个端口部署多个页面：
一个server下，多个 location。
location的作用就是是否有后缀，并且这个后缀会去拼接root后的地址。
比如第二个location /sis/。
则在访问127.0.0.1:8080/sis时，会去自动寻找/apps/svr/nginx-1.9.12/pagefile/0921/sis这个包。 （Ps：location后的地址一定要用 / 关闭，比如 location /sis/，不然访问127.0.0.1:8080/sis时，会报错，只有用127.0.0.1:8080/sis/才行。）
这样就部署好了一个 端口支持多个页面。
⑤ linux下安装nginx部署多个前端项目
1.先安装nginx所需要的环境
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
也可按照如下命令一键安装
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
2.安装nginx，安装在/usr/local下
wget -c https://nginx.org/download/nginx-1.10.1.tar.gz
# 解压缩
tar -zxvf linux-nginx-1.12.2.tar.gz
cd nginx-1.12.2/
# 执行配置
./configure
# 编译安装(默认安装在/usr/local/nginx)
make
make install
安装完直接访问 http://121.36.107.248/ 默认端口是80
Nginx常用命令
测试配置文件：${Nginx}/sbin/nginx -t
启动命令：${Nginx}/sbin/nginx
停止命令：${Nginx}/sbin/nginx -s stop/quit
重启命令：${Nginx}/sbin/nginx -s reload
查看进程命令：ps -ef | grep nginx
平滑重启：kill -HUP [Nginx主进程号(即ps命令查到的PID)]
喜欢请关注 “蛋皮皮” 微信公众号！更多干货等你来学习哦。
⑥ 利用nginx部署站点,前端资源默认放在
部署springboot+vue项目的时候，我们一般是将打包好的前端项目放在我们后端的resources目录下，然后前后端一起打包成jar包或者war包部署上服务器的。也就是说，如果前端项目发生修改的话，那么即使后端不用修改，前后端项目也要重新放在一起重新打包、重新部署。但是，前端项目打包往往是几mb大小，而后端项目打包却要几十mb。因此，为了方便，我们可以使用Nginx独立部署前端项目。
一、 Nginx安装步骤
1、安装GCC、automake、pcre、zlib和openssl
用rpm -qa 命令查看是否安装
如果没有安装，执行以下命令
yum -y install gcc gcc-c++ automake pcre pcre-devel zlib zlib-devel openssl openssl-devel
1
2、下载Nginx
我是安装在 /www/server目录的
cd /www/server
1
weget命令下载
wget http://nginx.org/download/nginx-1.16.1.tar.gz
1
tar zxvf 解压
tar zxvf nginx-1.16.1.tar.gz
1
重命名 nginx-1.16.1文件夹
mv nginx-1.16.1 nginx
1
3、安装Nginx,默认安装目录：/usr/local/nginx
进入nginx文件夹，运行configure脚本
cd nginx
./configure
1
2
编译、安装
make
make install
1
2
切换到安装目录
cd /usr/local/nginx
1
注意：html：存放了两个后缀名为.html的静态文件，前端项目打包后的文件放在此处，编辑好配置文件，启动Nginx服务器即可成功部署前端项目。
4、修改配置文件、开放端口
vim /usr/local/nginx/conf/nginx.conf
1
端口改为 8051
5、启动Nginx
cd /usr/local/nginx
./sbin/nginx
1
2
6、其他命令
查看进程
ps -ef|grep nginx
1
重启Nginx
/usr/local/nginx/sbin/nginx -s reopen
1
停止Nginx
/usr/local/nginx/sbin/nginx -s stop
1
重载Nginx配置文件
/usr/local/nginx/sbin/nginx -s reload
1
7、访问
curl 127.0.0.1:8051
1
如果访问不了，服务器安全组开放端口以及防火墙放行端口
firewall-cmd --zone=public --add-port=8051/tcp --permanent
1
firewall-cmd --reload
1
二、前端项目独立部署
1、将打包的前端项目上传到/usr/local/nginx/html目录
2、 重新启动即可成功访问到前端项目
/usr/local/nginx/sbin/nginx -s reopen
1
可能遇到的问题
1、刷新页面查询404的情况，也就是页面找不到
修改Nginx配置文件
try_files $uri $uri/ /index.html;
1
重新加载配置文件重启Nginx
⑦ nginx部署多个前端项目
这里就不介绍同一端口和同一nginx.conf，有需要的童鞋自行网络。
这里介绍不同项目的不同配置。
服务器中已经部署了其他项目，这里做一个简单的页面做测试：
1、新建目录：
/root/nginx/8571/
/root/nginx/8571/html/
/root/nginx/8571/log/
2、将文件：/usr/sbin/nginx 拷贝至 /root/nginx/8571/
3、新建index.html：/root/nginx/8571/html/index.html
4、新建配置文件：/root/nginx/8571/nginx.conf
5、启动 nginx
./nginx -c /root/nginx/8571/nginx.conf
注意：
若 nginx.conf 配置 location 后，重启 nginx 再访问，如果访问提示：Nginx 403 Forbidden，则需要在 nginx.conf 头部加入一行：
user root;
查看nginx端口使用情况：netstat -apn
启动成功后输入ip和端口8571访问：
⑧ nginx负载均衡以及集群是怎么搭建的
需要下载一个apk和一个zip。apk用于控制，zip里面包含了 nginx mysql pgsql php 的二进制文件和配置文件。如果apk里面有一键安装，如果不行就打开anmpp.sh，自己看着办。
环境搭建完成之后，我们打开bftpd、nginx、php-fpm这三个，然后启动环境。
浏览器输入172.0.0.1，看到phpinfo了，说明成功运行。
⑨ nginx 部署多个前端vue项目的3种方式，一篇文章搞定
首先我们看一下nginx.conf配置文件
为了方便管理，在/usr/local/nginx/conf.d/ 创建自己的*.conf配置文件。没有conf.d目录，直接mkdir 创建conf.d
*.conf 详细可参考：
这种方式只需要开放80端口，然后访问二级域名。
这种方式的好处是只有一个server ,而且不需要二级域名、用路径location就能实现。
但是这种方式的一个缺点，就是vue项目前端需要改配置。修改地方如下：
react 配置请参考： https://blog.csdn.net/mollerlala/article/details/96427751?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBai-2&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBai-2
vue 配置请参考： https://blog.csdn.net/weixin_33868027/article/details/92139392
⑩ 我有三台nginx服务怎么集群到一起，这三台服务器都用来解析html页
简单的说两种方案：
1，一台 nginx 服务器做反向代理，第二台文件服务器，第三台做数据库服务器
2， 一台 nginx 脚本服务器，第二台做主库数据库服务器，第三台做从库数据库服务器加静态服务器。
这三台服务使用一个静态 IP，它们之间的关系为局域网，主服务器挂静态IP，nginx.conf 设置域名 sever，访问直接到主服务器，主库数据库服务器限制数据库的读权限，端口为3306，从库数据库限制写权限，端口为 3307；两台数据库服务器进行数据同步，实现数据库读写分离，从库挂载网站静态内容，如 CSS ,JS, images, flash 等静态文件，实现动静分离。
集群的作用主要就是负载均衡，分流负压流量，数据库读写分离也是为了减缓数据库读写压力，动静分离的好处自然是更科学地规划文件分类，便于服务器文件的管理。
但一般来说，这些静态的东西全部用第三方的 SDN 来负载掉。