Linux3使用Nginx部署前端项目

小灰灰 2024-04-01 09:17 87阅读 0赞

**目录**

一、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的负载均衡就是作用于此以便达到访问量均衡分配的功能。**避免服务器崩盘。**
> 
> ![3d06af581c03434bbe2f6218fab3db90.png][]
> 
> #### 2）动静分离 ####
> 
> 动静分离的意思就是区分用户的访问类型，第一种是动态访问是需要调用后台数据的访问；第二种是静态的访问只需静态资源的访问（如：css、html、jpg、js等等文件）。那么Nginx动静分离就是区分用户的访问类型，然后分配访问不同的服务器。**提高资源响应的速度。**
> 
> ![dec2817da4aa4529a47ddc96d00a1c32.png][]
> 
> ####    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**
> 
> ![d78f7c5c37f44d26b32eb62715de1c04.png][] 2) 使用 yum 安装 nginx  
>  **yum install nginx**
> 
> ![d60079d8b7174e4ca5c4bc54ad6682ce.png][]
> 
> 注1：yum方式安装nginx，它的安装根目录为/etc/nginx  
> 注2：查看nginx版本  
>  **rpm -qa | grep nginx**
> 
> ![9cc5fd56a2df41489398762558d1f7ee.png][]
> 
> 3) 启动及设置开机启动  
>  **systemctl start nginx.service  
> systemctl enable nginx.service**
> 
> ![de380cb2070349a5a292293dcb6b37c5.png][]
> 
> 4) 设置防火墙开放 80 端口  
>  **firewall-cmd --zone=public --add-port=80/tcp --permanent  
> firewall-cmd --reload && firewall-cmd --list-port**
> 
> ![f45546893dfd4a58b6be6d8188fe8a2f.png][] 5) 测试 nginx 是否可被访问，应该显示nginx的欢迎界面  
> http://服务器IP地址:80/
> 
> ![4a7de076edf748f8ae51143cb7626584.png][]
> 
> 到这里我们便安装Nginx成功了！！！

## 二、Nginx使用 ##

### ①负载均衡的使用实例 ###

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

> 1）准备2个tomcat（接上篇文章，小编我已经准备好一个了）  
> cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20\_8081/
> 
> ![8f53a3048ab34b0dbf3c882ee402880b.png][]
> 
> 2）修改第二个Tomcat的配置（**找到tomcat目录/conf/server.[xml][]**），修改的配置如下：  
> 1. HTTP端口，默认8080，如下改为8081
> 
> ![d0ece2b105eb48e998e6ff1f99c22f23.png][]  
> 2.远程停服务端口，默认8005，如下改为8006
> 
> ![0d1fd7adda32467593ac324737270299.png][]  
> 3.AJP端口，默认8009，如下改,8010
> 
> ![9c6d8b88a103415f85bd237fdd40fe7b.png][]
> 
> 用客户端MobaXterm可以直接双击编辑！
> 
> 3）设置防火墙开放 8081 端口  
>  **firewall-cmd --zone=public --add-port=8081/tcp --permanent  
> firewall-cmd --reload && firewall-cmd --list-port**
> 
> ![180fb453d4a54a2db9431bd0214d1078.png][] 4）测试两个服务器是否能够启动使用
> 
> 进入连个服务器的bin目录执行启动服务器命令：**./startup.sh**
> 
> 测试：
> 
> **http://192.168.26.128:8080/**
> 
> ![7c78809f661243fbb07efeddafe707b6.png][]  
> **http://192.168.26.128:8081/**
> 
> ![ada9172376484c8c808d24b6d351bbe6.png][]
> 
> **重要的来了！！！**
> 
> **5）Nginx配置**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
> 
> **配置模板如下：**
> 
>     #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;
>         #    }
>         #}
>     
>     }
> 
> 我们在这里需要更改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是权重的意思，权重越大，分配的概率越大  
> \}** 
> 
> ![47a8a5e1cbf04b3cb977023fed40966f.png][]
> 
> ![74de47e82b904343bae2004f28835377.png][]
> 
>  **5.2在default.conf添加**
> 
> **location / \{  
> proxy\_pass http://tomcat\_list;  
> index index.html index.htm;  
> \}**
> 
> ![908162530b4347b0aafc040c33ba6289.png][]![0d29671bd1c2410ba6625dfb3b0b530d.png][]
> 
>  **这两步就是实现了访问Nginx192.168.26.128:80跳转至配置好Tomcat\_list的两个服务器中****6）**重启Nginx服务，让配置生效
> 
> **systemctl restart nginx**
> 
> ![e98be03e2f47474a95648585f483908a.png][]
> 
> **7）**访问Nginx192.168.26.128:80**（80端口是唯一可以不用带的端口号）** 
> 
> **发现出错，我们打开日志文件查看错误**
> 
> ![f0adea2775564489b4cc7ca05bd9aab9.png][]
> 
>  **8）**查看nginx的访问日志和错误日志  
> **cat /var/log/nginx/access.log  
> cat /var/log/nginx/error.log** 
> 
> ![6603ed3e305744d9bcd37159e56bf7b8.png][]
> 
> 分析错误的解决方法：
> 
> **setsebool -P httpd\_can\_network\_connect 1** 
> 
> **一定要进入/etc/nginx/conf.d/目录下才有用！！！**
> 
> ![c656a09d190a4bfea1df269464ca8a32.png][]
> 
> 执行完这个命令我们再刷新访问Nginx的页面：**它就可以实现访问Nginx但是均衡分配访问两个Tomcat服务器上面去了，这样的话就算我们停止一个Tomcat服务器也能访问**
> 
> ![61e13fbb98a34b86a9cfa6154d6f0637.png][]

--------------------

## 三、部署前端项目 ##

### ①动静分离的使用实例 ###

> **1）确保前端项目能够运行，并将其打包**
> 
> 打包方法：在对应项目的目录下执行 **npm run build**
> 
> ![9d536909c00445b0a9e8ab22a28f0b42.png][]
> 
> **1.1打包会遇到的问题1：hbuilderX打包vue项目白屏问题**  
> 将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件
> 
>     build: {
>         // assetsPublicPath: '/',//修改前
>         assetsPublicPath: './',//修改后
>     }
> 
> ![ad6d5c040812490eac8afa1f935f539f.png][]
> 
> **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)  
> \}** 
> 
> ![5dc8c9986bef44b1a4c625ca44c2bd30.png][]
> 
> **2）做ip/host主机映射** 将虚拟机ip映射域名www.zking.com
> 
> 方法：
> 
> **C:\\Windows\\System32\\drivers\\etc\\hosts中增加映射关系**  
> 192.168.26.128 www.zking.com
> 
> ![3e40e04f05444ae8859c9a48119d1315.png][]
> 
> 做了主机映射那么我们前端项目就要改变action.js更改配置：  
> **'SERVER': 'http://www.zking.com/api/T216\_SSH', //服务器，然后重新打包**
> 
> **3）Nginx配置更改代理配置/etc/nginx/conf.d**
> 
> ![7bb677e4717b4d40a60902aca1b79577.png][]
> 
> **更改第一个：静态的资源加载以及域名**
> 
>  **listen 80; \#监听80端口，可以改成其他端口  
> \#server\_name localhost; \#当前服务的域名  
> server\_name www.zking.com; \#当前服务的域名(虚拟域名也可以)  
> root /usr/local/mypro/dist; \#将要访问的网站的根目录，nginx节点会自动继承父节点的配置;这里放到/usr/local/\*，放到其他路径下会有权限相关问题；必要的时候配置Nginx.conf的user为root**
> 
> ![adb2b174e28343029379d2cd9bdd58ec.png][]
> 
> **更改第二个动静分离的区分：**  
>  **location / \{  
> \#该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍  
> try\_files $uri $uri/ /index.html;  
> \}  
> location ^~/api/ \{  
> \#^~/api/表示匹配前缀是api的请求，proxy\_pass的结尾有/， 则会把/api/\*后面的路径直接拼接到后面，即移除api  
> proxy\_pass http://tomcat\_list/;  
> \}**
> 
> ![e32d2f4c3c1c4479a658653dd020110d.png][]
> 
> 4**）重启Nginx更新配置**
> 
> **systemctl restart nginx**
> 
> **5）将前端构建好的dist项目，上传到云服务器/usr/local/...（只能放这里）**
> 
> 小编在这里就专门建一个文件夹来放置这个前台打包好的文件
> 
> **mkdir mypro创建文件命令**
> 
> ![1c9542f74f3540a0a113a3079b17338c.png][]
> 
> **6）www.zking.com完成整个前后端分离项目的测试**
> 
> ![072b2279c7714abf8a12015138b375fb.png][]

[3d06af581c03434bbe2f6218fab3db90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/160a1b52e3514483be03bcc63c478ca0.png
[dec2817da4aa4529a47ddc96d00a1c32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/951d87f0f9a44aafb454fa0e9b06b050.png
[d78f7c5c37f44d26b32eb62715de1c04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ce0aeac776a340a995301254fad58ff3.png
[d60079d8b7174e4ca5c4bc54ad6682ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2df057318d704c5681787d5ebbbc2286.png
[9cc5fd56a2df41489398762558d1f7ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8a240a711f6646f095888cf0f96accb7.png
[de380cb2070349a5a292293dcb6b37c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/60a78e165b5d46648e78a9c067b839ee.png
[f45546893dfd4a58b6be6d8188fe8a2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ed07f19fddeb4bde8af6300ebfc2736d.png
[4a7de076edf748f8ae51143cb7626584.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/35c299a08ee349f9b7d836ecc9cd2926.png
[8f53a3048ab34b0dbf3c882ee402880b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/925ad65e30bb4b6d921cb25cc414c666.png
[xml]: https://so.csdn.net/so/search?q=xml&spm=1001.2101.3001.7020
[d0ece2b105eb48e998e6ff1f99c22f23.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8b8581038e234d6589a1b22ff3f0890d.png
[0d1fd7adda32467593ac324737270299.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f882ad960af94c5eaffdd2d598aec3bb.png
[9c6d8b88a103415f85bd237fdd40fe7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/94cef4ac18504990bcf251f4421048a1.png
[180fb453d4a54a2db9431bd0214d1078.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ff6760fcd3a84c6cb6b48d462c8a3249.png
[7c78809f661243fbb07efeddafe707b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6337ad4c4f2044cbbb86f1272ccc9bf4.png
[ada9172376484c8c808d24b6d351bbe6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5c9048dc9cb74e088c7b381694e5987e.png
[47a8a5e1cbf04b3cb977023fed40966f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/996efd29a400448cb894828f3cb68502.png
[74de47e82b904343bae2004f28835377.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/024ff4734bc5426aaaa060b5120b47c3.png
[908162530b4347b0aafc040c33ba6289.png]: https://img-blog.csdnimg.cn/908162530b4347b0aafc040c33ba6289.png
[0d29671bd1c2410ba6625dfb3b0b530d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/51bb8cc041a84b52932bbaa12dfb3e76.png
[e98be03e2f47474a95648585f483908a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8e6da4f58ab8499b9b493a3b0dc4c93d.png
[f0adea2775564489b4cc7ca05bd9aab9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/616ef153644e42b6907b8de7e10c1b6d.png
[6603ed3e305744d9bcd37159e56bf7b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/25ae8524e96d4daabf596c1df872ed5c.png
[c656a09d190a4bfea1df269464ca8a32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/61604f205ebc4af5ae767d38dad2f993.png
[61e13fbb98a34b86a9cfa6154d6f0637.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e16cf46819264380b522fb7501bef2e3.png
[9d536909c00445b0a9e8ab22a28f0b42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/30c15915d35b40959a69ff72b18c39ea.png
[ad6d5c040812490eac8afa1f935f539f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/11c9b2e09b0d4ebfa684b2de049eebf7.png
[5dc8c9986bef44b1a4c625ca44c2bd30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9a4646a7a7664e22a4962890454f70f7.png
[3e40e04f05444ae8859c9a48119d1315.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a70435839a034bee8ac354de13373742.png
[7bb677e4717b4d40a60902aca1b79577.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cc4fe055857348a4ac34398c53d21f77.png
[adb2b174e28343029379d2cd9bdd58ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8345b9872a8343cc8223f42f52fe3634.png
[e32d2f4c3c1c4479a658653dd020110d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a532ac889dd54114a73027a73807e79a.png
[1c9542f74f3540a0a113a3079b17338c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6c0fab8e52294f4fa90baccadc68eaac.png
[072b2279c7714abf8a12015138b375fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e13fd167923a4917be4174044e26d7a7.png