Linux之Nginx

Nginx:

1.什么是nginx
Nginx是一款高性能的Web服务器，最初由俄罗斯程序员Igor Sysoev开发，自2004年问世以来，凭借其高性能、高可靠、易扩展等优点，在反向代理、负载均衡、静态文件托管等主流场合得到了广泛的应用。

2.CentOS7中使用yum安装Nginx的方法

1. 添加 nginx 官方提供的 yum 源(需要联网且时间较长)
   rpm -Uvh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.14.2-1.el7_4.ngx.x86_64.rpm

2. 使用 yum 安装 nginx
   yum install nginx

 注1：yum方式安装nginx，它的安装根目录为/etc/nginx
 注2：查看nginx版本
      rpm -qa | grep nginx
1
2
3

3. 启动及设置开机启动
   systemctl start nginx.service
   systemctl enable nginx.service

4. 设置防火墙开放 80 端口
   firewall-cmd --zone=public --add-port=80/tcp --permanent
   firewall-cmd --reload && firewall-cmd --list-port

5. 测试 nginx 是否可被访问，应该显示nginx的欢迎界面
   http://服务器IP地址:80/

3.mysql数据库数据导出/导入
Navicat导出表结构及少量数据

4.项目部署到虚拟机

本案例采用tomcat双节点方式进行案例演示（tomcat集群模式）

注0：由于tomcat双节点都是部署在同一个虚拟机中，请配置两个不同的端口号，以免冲突；
注1：重启虚拟机后，发现有时候linux中的tomcat启动失败，应该将tomcat服务在mysql服务启动后启动。重要
注2：可将WEB项目部署到不同的tomcat中，可做集群测试

5. 将SPA项目压缩并上传到/usr/nginx/html目录，再解压
   mkdir /usr/nginx/html
   unzip crm.zip
   #重启nginx

   #重新修改window中的hosts文件
   注1：通过虚拟域名访问，还要修改window的hosts文件添加虚拟域名映射，文件位置如下：
   C:\Windows\System32\drivers\etc\hosts
   另外，此文件有可能出现由于当前用户权限不够，出现无法修改的情况？解决方案
   将此文件复制到d硬盘任一目录，修改后，再复制替换C:\Windows\System32\drivers\etc\hosts原文件

5.通过nginx对tomcat进行集群及代理
#进入conf.d目录，并对default.conf进行备份
cd /etc/nginx/conf.d && cp default.conf default.conf.bak

#修改default.conf，添加tomcat集群和动态代理配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;


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

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

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

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

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

systemctl restart nginx && systemctl status nginx

注1：查看nginx的访问日志和错误日志
/var/log/nginx/access.log
/var/log/nginx/error.log

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

1.CentOS7安装mysql三种方式
1.yum
2.tar.gz
3.*.deb安装包

附录一：linux 里rpm包到底是干什么用的
Linux RPM全称是“RedHat Package Manager”，最早是Red Hat公司开发的，后来在CentOS、Fedora、SUSE都用它。
而rpm包则是软件编译完成后按照RPM机制打包起来的一个文件，可以用rpm命令安装的一个软件安装包，
它省去了Linux软件安装中编译的步骤，安装成功后软件就可以用了。

附录二：centos7中虚拟域名设置
vim /etc/hosts

附录三：
在进行Nginx+Tomcat 负载均衡的时候遇到了这个权限问题，在error.log日志中，我们可以看到如下：
connect() to 127.0.0.1:8080 failed (13: Permission denied) while connecting to upstream
解决方案(执行以下代码):

setsebool -P httpd_can_network_connect 1

附录四：hbuilderX打包vue项目白屏问题
将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件
build: {
// assetsPublicPath: ‘/’,//修改前
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
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’,
// 解决icon路径加载错误
publicPath:‘…/…/’
})
} else {
return [‘vue-style-loader’].concat(loaders)
}