1. Nginx的安装与启动
1.1 为什么需要Nginx？
-
前端项目部署
项目开发完成后,前端项目需要服务器部署.
-
解决访问端口问题
同一台服务器部署多个项目时,访问时需要带端口. - 反向代理(动态网站,多台服务器),虚拟主机(静态网站,一台服务器)
-
后端项目负载均衡
现在是用Eureka作为负载均衡器,传统项目集群是就要使用Nginx做负载均衡器.并且我们网关也是使用Nginx作为负载均衡器
1.2 Ngxin是什么？
Nginx 是一款高性能的 http 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。由俄罗斯的程序设计师伊戈尔·西索夫（Igor Sysoev）所开发，官方测试 nginx 能够支支撑 5 万并发链接，并且 cpu、内存等资源消耗却非常低，运行非常稳定。
Nginx 应用场景：
- http 服务器。Nginx 是一个 http 服务可以独立提供 http 服务。可以做网页静态服务器。
- 虚拟主机。可以实现在一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。
- 反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用 nginx 做反向代理。并且多台服务器可以平均分担负载，不会因为某台服务器负载高宕机而某台服务器闲置的情况。
1.3 Nginx在Linux下的安装
1.4 Nginx在Windows下的安装
1.4.1 安装
下载地址：http://nginx.org/en/download.html
绿色软件，解压即可安装
1.4.2 使用
- 启动： start nginx.exe
- 停止： nginx.exe -s stop
- 重新加载： nginx.exe -s reload （修改了配置文件的时候需要重新加载）
2. Nginx静态网站部署与调试
2.1 静态网站的部署-部署阶段
将我们之前生成的静态页拷贝到nginx的html目录下即可访问
-
npm管理的js vuecli
打包并部署！（打包命令：npm run build）
打包以后会在项目里产生一个dist目录，这个就是打包后的结果，丢到nginx的html目录下即可！
-
直接引入js传统静态
直接拷贝丢到nginx的html目录下即可！
2.2 静态网站动态调试
开发阶段：
- vuecli可以npm run dev启动调试
- 传统导入js开发的模式,没法直接服务器方式调试,需要安装 live-server服务器,这个服务器很简单就是node一个模块.
传统前端项目搭建前端服务器，以下命令：
- npm install -g live-server
- live-server --port=6002
3. Nginx配置虚拟主机
虚拟主机，也叫“网站空间”，就是把一台运行在互联网上的物理服务器划分成多个“虚拟”服务器。虚拟主机技术极大的促进了网络技术的应用和普及。同时虚拟主机的租用服务也成了网络时代的一种新型经济形式。
3.1 端口绑定
- 上传静态网站：
- 前端网站hrm_course_web，nginx/hrm_course_web下
- 前端网站hrm_plat_web打包后上传至nginx/hrm_plat_web 下
- 修改Nginx的配置文件nginx.conf
server {
listen 82;
server_name localhost;
location / {
root hrm_course_web;
index home.html;
}
}
server {
listen 83;
server_name localhost;
location / {
root hrm_plat_web;
index index.html;
}
}
- 访问测试： 重新加载Nginx
- 地址栏输入http://localhost:82 查看对应效果
- 地址栏输入http://localhost:83 查看对应效果
3.2 域名绑定
-
什么是域名？
域名（Domain Name），是由一串用“点”分隔的字符组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域）。域名是一个IP地址上有“面具” 。域名的目的是便于记忆和沟通的一组服务器的地址（网站，电子邮件，FTP等）。域名作为力所能及难忘的互联网参与者的名称。域名按域名系统（DNS）的规则流程组成。在DNS中注册的任何名称都是域名。域名用于各种网络环境和应用程序特定的命名和寻址目的。通常，域名表示互联网协议（IP）资源，例如用于访问因特网的个人计算机，托管网站的服务器计算机，或网站本身或通过因特网传送的任何其他服务。世界上第一个注册的域名是在1985年1月注册的。
要想访问网络资源就要使用http://ip:port/uri,但是记忆ip比较难,通过域名就更好,这个域名最终也要解释为ip.
-
域名解析步骤
- hosts:本地域名
- 远程域名:在网络上找DNS(域名解析服务器)来解析域名
-
域名级别
- 顶级域名（又名一级域名）。如cn、com等
- 二级域名（顶级域名之下的域名）。如wangningbo.cn、baidu.com
- 三级域名。如ningbo.wangningbo.cn
-
域名与ip绑定
- 一个域名对应一个 ip 地址，一个 ip 地址可以被多个域名绑定。
- 本地测试可以修改hosts文件（C:\Windows\System32\drivers\etc\hosts）
- 可以配置域名和 ip 的映射关系，如果 hosts 文件中配置了域名和 ip 的对应关系，不需要走dns 服务器。
域名解析流程：在浏览器输入https://www.baidu.com/，这时候先会去本地的hosts文件里去解析，如果解析不了就会去网络上找DNS来解析域名！
- 域名配置
hosts文件配置一下本地域名
127.0.0.1 hrm.com
127.0.0.1 admin.hrm.com
127.0.0.1 course.hrm.com
修改Nginx配置文件nginx.conf
server {
listen 80;
server_name admin.hrm.com;
location / {
root hrm_plat_web;
index index.html;
}
}
server {
listen 80;
server_name course.hrm.com;
location / {
root hrm_course_web;
index home.html;
}
}
重新启动nginx
./nginx -s reload
测试
地址栏输入http://admin.hrm.com/
地址栏输入http://course.hrm.com/
4. nginx作为反向代理
4.1 为什么需要反向代理？
静态项目可以通过虚拟主机实现,但动态tomcat网站就不行,nginx无法解释运行.
4.2 什么是代理和反向代理？
-
代理
通过客户机的配置，实现让一台服务器代理客户机，客户的所有请求都交给代理服务器处理。
如下图所示
[图片上传失败...(image-bd0e39-1569803991383)] -
反向代理
用一台服务器，代理真实服务器，用户访问时，不再是访问真实服务器，而是代理服务器。
如下图所示
[图片上传失败...(image-ace90d-1569803991383)]
nginx可以当做反向代理服务器来使用：我们需要提前在nginx中配置好反向代理的规则，不同的请求，交给不同的真实服务器处理。当请求到达nginx，nginx会根据已经定义的规则进行请求的转发，从而实现路由功能，利用反向代理，就可以解决我们前面所说的端口问题！如下图所示
[图片上传失败...(image-c8b74b-1569803991383)]
4.3 反向代理配置
4.3.1 配置语法
语法解释
server {
listen 80;# 监听的端口
server_name course.hrm.com;# 监听的域名
# location：请求映射规则，/：代表映射一切请求路径
location / {
proxy_pass http://127.0.0.1:6002; # 访问域名为course.hrm.com都交给6002处理 # 代理转发，所有以course.hrm.com并且80端口访问的请求都会被转发给http://127.0.0.1:6002处理
index index.html index.htm home.html;
}
}
nginx.conf配置
server {
listen 80;
server_name course.hrm.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://127.0.0.1:6002; #访问域名为course.hrm.com都交给6002处理
index index.html index.htm home.html;
}
}
server {
listen 80;
server_name admin.hrm.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://127.0.0.1:6001; #访问域名为admin.hrm.com都交给6001处理
index index.html index.htm;
}
}
4.3.2 原理示意图
[图片上传失败...(image-13dc72-1569803991383)]
