Linux3使用Nginx部署前端项目

目录

一、Nginx介绍

二、Nginx使用

三、部署前端项目

前言：

我们上次成功使用Linux部署了后端项目，这次我们同样使用虚拟机中的Linux部署前端项目 

一、Nginx介绍

①什么是Nginx？

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，第一个公开版本0.1.0发布于2004年10月4日。2011年6月1日，nginx 1.0.4发布。

②Nginx特点：

其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。在全球活跃的网站中有12.18%的使用比率，大约为2220万个网站。

Nginx 是一个安装非常的简单、配置文件非常简洁（还能够支持perl语法）、Bug非常少的服务。Nginx 启动特别容易，并且几乎可以做到7*24不间断运行，即使运行数个月也不需要重新启动。你还能够不间断服务的情况下进行软件版本的升级。

Nginx代码完全用C语言从头写成。官方数据测试表明能够支持高达 50,000 个并发连接数的响应。

③Nginx的功能：

Nginx主要的三个功能：

1）负载均衡

负载均衡的意思就是比如我们单个项目的日常访问量增加，单个的服务器无法再支持庞大的访问量，就要同时部署多个服务器来缓解用户的访问量以保持项目的正常运转。

在增加服务器的数量的同时，也需要一个代理服务器来分配用户具体访问哪一个服务器，那么Nginx的负载均衡就是作用于此以便达到访问量均衡分配的功能。避免服务器崩盘。

2）动静分离

动静分离的意思就是区分用户的访问类型，第一种是动态访问是需要调用后台数据的访问；第二种是静态的访问只需静态资源的访问（如：css、html、jpg、js等等文件）。那么Nginx动静分离就是区分用户的访问类型，然后分配访问不同的服务器。提高资源响应的速度。

3）反向代理

反向代理的意思就是，比如我们有些系统只能在规定的内网中才能访问，比如我们的公司的系统，只能在公司的内网才能登录公司系统。但是我们想要在家里或者在外网也能访问该系统怎么办？

这时Nginx反向代理就可以解决这个问题，我们恭公司系统配置好Nginx代理服务器后，只需将我们外网的ip加入到Nginx白名单中即可实现：指定的外网ip也可以访问内网系统！

④ Nginx下载

我们在这里也是使用虚拟机下的Linux系统下载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

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/

到这里我们便安装Nginx成功了！！！

二、Nginx使用

①负载均衡的使用实例

想要实现负载均衡的效果那我们就在这里进行简单的实现：在虚拟机中用两个Tomcat服务器实现多台服务器配置同一个项目效果，用我们刚刚下载的Nginx作为代理服务器

2）修改第二个Tomcat的配置（找到tomcat目录/conf/server.xml），修改的配置如下：
        1. HTTP端口，默认8080，如下改为8081

        2.远程停服务端口，默认8005，如下改为8006

        3.AJP端口，默认8009，如下改,8010

用客户端MobaXterm可以直接双击编辑！

3）设置防火墙开放 8081 端口
 firewall-cmd --zone=public --add-port=8081/tcp --permanent
 firewall-cmd --reload && firewall-cmd --list-port

 4）测试两个服务器是否能够启动使用

进入连个服务器的bin目录执行启动服务器命令：./startup.sh

测试：

http://192.168.26.128:8080/

http://192.168.26.128:8081/

重要的来了！！！

5）Nginx配置*********************************************************************

配置模板如下：

1.  
   #user nobody;
2.  
   worker_processes 1;
3.  
    
4.  
   #error_log logs/error.log;
5.  
   #error_log logs/error.log notice;
6.  
   #error_log logs/error.log info;
7.  
    
8.  
   #pid logs/nginx.pid;
9.  
    
10.  
     
11.  
    events {
12.  
    worker_connections 1024;
13.  
    }
14.  
     
15.  
     
16.  
    http {
17.  
    include mime.types;
18.  
    default_type application/octet-stream;
19.  
     
20.  
    #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
21.  
    # '$status $body_bytes_sent "$http_referer" '
22.  
    # '"$http_user_agent" "$http_x_forwarded_for"';
23.  
     
24.  
    #access_log logs/access.log main;
25.  
     
26.  
    sendfile on;
27.  
    #tcp_nopush on;
28.  
     
29.  
    #keepalive_timeout 0;
30.  
    keepalive_timeout 65;
31.  
     
32.  
    #gzip on;
33.  
     
34.  
     
35.  
    #服务器的集群
36.  
    upstream tomcat_list { #服务器集群名字
37.  
    server 127.0.0.1:8080 weight=1; #服务器1 weight是权重的意思，权重越大，分配的概率越大。
38.  
    #server 172.17.0.4:8080 weight=2; #服务器2 weight是权重的意思，权重越大，分配的概率越大
39.  
    }
40.  
     
41.  
    server {
42.  
    listen 80; #监听80端口，可以改成其他端口
43.  
    #server_name localhost; #当前服务的域名
44.  
    server_name www.zking.com; #当前服务的域名(虚拟域名也可以)
45.  
    root html/crm; #将要访问的网站的根目录，nginx节点会自动继承父节点的配置
46.  
     
47.  
    #charset koi8-r;
48.  
     
49.  
    #access_log logs/host.access.log main;
50.  
     
51.  
    location / {
52.  
    #该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍
53.  
    try_files $uri $uri/ /index.html;
54.  
    }
55.  
    location ^~/api/ {
56.  
    #^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/*后面的路径直接拼接到后面，即移除api
57.  
    proxy_pass http://tomcat_list/;
58.  
    }
59.  
    #error_page 404 /404.html;
60.  
     
61.  
    # redirect server error pages to the static page /50x.html
62.  
    #
63.  
    error_page 500 502 503 504 /50x.html;
64.  
    location = /50x.html {
65.  
    root html;
66.  
    }
67.  
     
68.  
    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
69.  
    #
70.  
    #location ~ \.php$ {
71.  
    # proxy_pass http://127.0.0.1;
72.  
    #}
73.  
     
74.  
    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
75.  
    #
76.  
    #location ~ \.php$ {
77.  
    # root html;
78.  
    # fastcgi_pass 127.0.0.1:9000;
79.  
    # fastcgi_index index.php;
80.  
    # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
81.  
    # include fastcgi_params;
82.  
    #}
83.  
     
84.  
    # deny access to .htaccess files, if Apache's document root
85.  
    # concurs with nginx's one
86.  
    #
87.  
    #location ~ /\.ht {
88.  
    # deny all;
89.  
    #}
90.  
    }
91.  
     
92.  
     
93.  
    # another virtual host using mix of IP-, name-, and port-based configuration
94.  
    #
95.  
    #server {
96.  
    # listen 8000;
97.  
    # listen somename:8080;
98.  
    # server_name somename alias another.alias;
99.  
     
100.  
     # location / {
101.  
     # root html;
102.  
     # index index.html index.htm;
103.  
     # }
104.  
     #}
105.  
      
106.  
      
107.  
     # HTTPS server
108.  
     #
109.  
     #server {
110.  
     # listen 443 ssl;
111.  
     # server_name localhost;
112.  
      
113.  
     # ssl_certificate cert.pem;
114.  
     # ssl_certificate_key cert.key;
115.  
      
116.  
     # ssl_session_cache shared:SSL:1m;
117.  
     # ssl_session_timeout 5m;
118.  
      
119.  
     # ssl_ciphers HIGH:!aNULL:!MD5;
120.  
     # ssl_prefer_server_ciphers on;
121.  
      
122.  
     # location / {
123.  
     # root html;
124.  
     # index index.html index.htm;
125.  
     # }
126.  
     #}
127.  
      
128.  
     }

我们在这里需要更改Nginx服务器中的配置根据上面配置模板：

        5.1在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是权重的意思，权重越大，分配的概率越大
} 

         5.2在default.conf添加

location / {
      proxy_pass   http://tomcat_list;
      index index.html index.htm;
  }

 这两步就是实现了访问Nginx192.168.26.128:80跳转至配置好Tomcat_list的两个服务器中6）重启Nginx服务，让配置生效

systemctl restart nginx

7）访问Nginx192.168.26.128:80（80端口是唯一可以不用带的端口号） 

发现出错，我们打开日志文件查看错误

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

分析错误的解决方法：

setsebool -P httpd_can_network_connect 1 

一定要进入/etc/nginx/conf.d/目录下才有用！！！

执行完这个命令我们再刷新访问Nginx的页面：它就可以实现访问Nginx但是均衡分配访问两个Tomcat服务器上面去了，这样的话就算我们停止一个Tomcat服务器也能访问

三、部署前端项目

①动静分离的使用实例

1）确保前端项目能够运行，并将其打包

打包方法：在对应项目的目录下执行  npm run build

        1.1打包会遇到的问题1：hbuilderX打包vue项目白屏问题
将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件

1.  
   build: {
2.  
       // assetsPublicPath: '/',//修改前
3.  
       assetsPublicPath: './',//修改后
4.  
   }

         1.2打包会遇到的问题2：hbuilderX打包项目，element-ui的icon图标无法正常显示

找到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)
   } 

2）做ip/host主机映射 将虚拟机ip映射域名www.zking.com

方法：

C:\Windows\System32\drivers\etc\hosts中增加映射关系
192.168.26.128 www.zking.com

 做了主机映射那么我们前端项目就要改变action.js更改配置：
'SERVER': 'http://www.zking.com/api/T216_SSH', //服务器，然后重新打包

3）Nginx配置更改代理配置/etc/nginx/conf.d

更改第一个：静态的资源加载以及域名

     listen       80;            #监听80端口，可以改成其他端口
    #server_name  localhost;    #当前服务的域名
    server_name  www.zking.com; #当前服务的域名(虚拟域名也可以)
    root         /usr/local/mypro/dist;      #将要访问的网站的根目录，nginx节点会自动继承父节点的配置;这里放到/usr/local/*，放到其他路径下会有权限相关问题；必要的时候配置Nginx.conf的user为root

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

4）重启Nginx更新配置

systemctl restart nginx

5）将前端构建好的dist项目，上传到云服务器/usr/local/...（只能放这里）

小编在这里就专门建一个文件夹来放置这个前台打包好的文件

mkdir mypro创建文件命令

6）www.zking.com完成整个前后端分离项目的测试

这篇好文章是转载于：学新通技术网