目录

一、Nginx简介

二、Nginx使用

Nginx安装

tomcat负载均衡 

 Nginx配置

三、Nginx部署项目

项目打包前

将前端项目打包（测试本地项目打包后没问题）

ip/host主机映射

完成Nginx动静分离的default.conf的相关配置

将前台项目打包(配合Nginx动静分离)

一、Nginx简介

1.负载均衡：流量分摊

2.反向代理：处理外网访问内网问题

3.动静分离：判断动态请求还是静态请求，选择性的访问指定服务器

二、Nginx使用

Nginx安装

 添加 nginx 官方提供的 yum 源(需要联网且时间较长)

 rpm -Uvh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.14.2-1.el7_4.ngx.x86_64.rpm

 使用 yum 安装 nginx

 yum install nginx

 注1：yum方式安装nginx，它的安装根目录为/etc/ngin

注2：查看nginx版本
 rpm -qa | grep nginx

 启动及设置开机启动

 systemctl start nginx.service
 systemctl enable nginx.service

 设置防火墙开放 80 端口

firewall-cmd --zone=public --add-port=80/tcp --permanent
 firewall-cmd --reload && firewall-cmd --list-port

 测试 nginx 是否可被访问，应该显示nginx的欢迎界面

 http://服务器IP地址:80/

tomcat负载均衡 

准备2个tomcat

cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20_8081/

 第2个tomcat修改的配置

在apache-tomcat-8.5.20/conf/目录下的server.xml文件

HTTP端口，默认8080，改为8081

远程停服务端口，默认8005，改为8006

AJP端口，默认8009，改8010

 启动tomcat、防火墙开放8081端口

 修改tomcat界面

apache-tomcat-8.5.20&apache-tomcat-8.5.20_8081下的webapp/ROOT/index.jsp

 Nginx配置

查看Nginx目录

 systemctl status nginx

在etc/nginx目录下的nginx.conf中添加

upstream  tomcat_list {  #服务器集群名字
    server    127.0.0.1:8080  weight=1;   #服务器1   weight是权重的意思，权重越大，分配的概率越大。
    server    127.0.0.1:8081  weight=1; #服务器2   weight是权重的意思，权重越大，分配的概率越大
} 

在default.conf添加，把原有的用#注掉

location / {
      #root   /usr/share/nginx/html;
      #proxy_pass   http://172.17.0.3:8080;
      proxy_pass   http://tomcat_list;
      index index.html index.htm;
  }

 重启Nginx服务，让配置生效

systemctl restart nginx

 出现权限问题

#现象：connect() to 192.168.195.139:8080 failed (13: Permission denied) while connecting to upstream
#解决方案：执行下面命令
setsebool -P httpd_can_network_connect 1

 测试Nginx负载2个tomcat的效果

来回切换tomcat:8080、tomcat:8081两个服务器的类容

负载均衡后台项目发布

#保障以下3个链接都能访问项目
http://192.168.228.130:8080/T216_SSH/vue/treeNodeAction.action
http://192.168.228.131:8081/T216_SSH/vue/treeNodeAction.action
http://192.168.195.130/T216_SSH/vue/treeNodeAction.action
#注意：确保云数据库中是有数据的

#附录
#查看端口号
#查看所有端口号
lsof -i
#查看指定端口号
lsof -i:端口号
#杀死指定端口号进程    kill -9 PID
kill -9 42177

#查看nginx的访问日志和错误日志
cat /var/log/nginx/access.log
cat /var/log/nginx/error.log 

最终的结果就是，Nginx访问一个网址，是由两个tomcat共同承担压力 

三、Nginx部署项目

项目打包前

确保前台项目能用

action.js更改配置

hbuilderX打包vue项目白屏问题
将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”

hbuilderX打包vue项目，element-ui的icon图标无法正常显示问题
问题：使用vue-cli3脚手架搭建的项目，在打包文件上服务器的时候，其他的css，js样式都能正确加载出路径，
但是element的icon图标却不能正常加载出来

问题分析：
加载的路径https://yxq.linksign.cn/static/css/static/fonts/element-icons.535877f.woff
本应该加载的路径https://yxq.linksign.cn/static/fonts/element-icons.535877f.woff
打包的路径
事实上是打包时候读取的文件路径多了两层；
找到build文件的utils.js 中有打包的路径，看看generateLoaders();
Extract CSS when that option is specified, 指定该选项时提取CSS
发现少了个公共路径，加上pubilcPath

将前端项目打包（测试本地项目打包后没问题）

生成dist文件夹，点击index.html访问项目测试

npm run build

ip/host主机映射

在C:\Windows\System32\drivers\etc\hosts中增加映射关系

将虚拟机ip映射域名www.maomao.com

完成Nginx动静分离的default.conf的相关配置

定义规则：URL符合xxx标准 走动态请求，不符合走静态请求

default.conf添加

location / {
            #该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍 
        try_files $uri $uri/  /index.html;
    }
    location  ^~/api/ {
        #^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/*后面的路径直接拼接到后面，即移除api
        proxy_pass http://tomcat_list/;
    }

 修改action.js

将前台项目打包(配合Nginx动静分离)

重启Nginx

systemctl restart nginx

将前端构建好的dist项目上传到云服务器/usr/local/...

default.conf添加

listen       80;            #监听80端口，可以改成其他端口
        #server_name  localhost;    #当前服务的域名
    server_name  www.maomao.com; #当前服务的域名(虚拟域名也可以)
    root         html/crm;      #将要访问的网站的根目录，nginx节点会自动继承父节点的配置

能运行出来就是配置好了