nginx部署配置及本地实践
正向代理（forward proxy）
是一个位于客户端和目标服务器之间的服务器(代理服务器)，为了从目标服务器取得内容，客户端向代理服务器发送一个请求并指定目标，然后代理服务器向目标服务器转交请求并将获得的内容返回给客户端。
流程
客户端向正向代理发送请求；正向代理根据请求的内容和规则，决定是否可以将请求转发到外部网络上；如果可以转发，正向代理将请求转发到目标服务器上；目标服务器接收到请求后，处理请求并返回响应；正向代理接收到响应后，再将响应返回给客户端。
它的特点是可以隐藏客户端。
正向代理的用途
其实我们经常使用的翻墙就是用的正向代理，我们访问不了国外的网站，但是我们可以将请求发给代理服务器，让代理服务器去帮我们访问国外的网站，在得到响应后，再将结果返回给客户端，也就是我们这里。
反向代理（reverse proxy）
是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。
反向代理的用途：
1.隐藏服务器真实IP
2.负载均衡。反向代理服务器可以做负载均衡，根据所有真实服务器的负载情况，将客户端请求分发到不同的真实服务器上。
3.提供安全保障。反向代理服务器可以作为应用层防火墙，为网站提供对基于Web的攻击行为（例如DoS/DDoS）的防护，更容易排查恶意软件等。
正向代理和反向代理的区别
虽然正向代理服务器和反向代理服务器所处的位置都是客户端和真实服务器之间，所做的事情也都是把客户端的请求转发给服务器，再把服务器的响应转发给客户端，但是二者之间还是有一定的差异的。
1、正向代理其实是客户端的代理，帮助客户端访问其无法访问的服务器资源。反向代理则是服务器的代理，帮助服务器做负载均衡，安全防护等。
2、正向代理一般是客户端架设的，比如在自己的机器上安装一个代理软件。而反向代理一般是服务器架设的，比如在自己的机器集群中部署一个反向代理服务器。
3、正向代理中，服务器不知道真正的客户端到底是谁，以为访问自己的就是真实的客户端。而在反向代理中，客户端不知道真正的服务器是谁，以为自己访问的就是真实的服务器。
4、正向代理和反向代理的作用和目的不同。正向代理主要是用来解决访问限制问题。而反向代理则是提供负载均衡、安全防护等作用。二者均能提高访问速度。
今天在咖啡店学习，效率依旧好低。。。
nginx配置
对于nginx的定义，官方的解释是
“Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。”
nginx配置在哪?
Nginx 的默认配置位于 nginx.conf 文件中。根据安装方式和操作系统不同，它的位置可能略有不同，一般在以下目录中：
- Linux：/etc/nginx/nginx.conf
- Windows：C:\nginx\conf\nginx.conf
- MacOS：/usr/local/etc/nginx/nginx.conf
基本配置
以vue项目为例
server {
# 项目启动端口
listen 80;
# 域名（localhost）
server_name _;
# 禁止 iframe 嵌套
add_header X-Frame-Options SAMEORIGIN;
# 访问地址 根路径配置
location / {
# 项目目录
root html;
# 默认读取文件 当实际访问的是一个目录时，
# 会返回该目录中index指定的文件，
# 如果该目录中不存在index指定的文件，则会返回403。
index index.html;
# 配置 history 模式的刷新空白
try_files $uri $uri/ /index.html;
}
# 后缀匹配，解决静态资源找不到问题
location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ {
root html/static/;
}
# 图片防盗链
location ~/static/.*\.(jpg|jpeg|png|gif|webp)$ {
root html;
valid_referers *.deeruby.com;
if ($invalid_referer) {
return 403;
}
}
# 访问限制
location /static {
root html;
# allow 允许
allow 39.xxx.xxx.xxx;
# deny 拒绝
deny all;
}
}顺便写一下注意事项, /xxx和xxx是不一样的,如果前面还有其他的路由,带/的会把前面的全部忽略掉,直接到根路径去, 但是没有/的就会直接拼接到后面。
比如现在是/newCate,那我想在后面拼接上newPage,变成/newCate/newPage的形式,那在vue-router中应该怎么写?
newCate.vue
router.push('/newCate/newPage');
---------------------------------------------------
const routes = [
{
path: '/',
component: () => import('../views/test.vue'),
children: [
{
path: 'newCate',
name: 'newCate',
component: () => import('../components/newCate.vue'),
children: [
{
path: 'newPage', // (简写)
// 或者是 path: '/newCate/newPage',(全称)
component: () => import('../components/newPage.vue'),
},
],
},
],
},
];
压缩配置
gzip 压缩
# 是否启用 gzip 或 brotli 压缩
# 选项值: gzip | brotli | none
# 如果需要多个可以使用“,”分隔
VITE_BUILD_COMPRESS = 'gzip'
# 使用压缩时是否删除原始文件，默认为 false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false开启 gzip 后，在前端打包时会同时生成 .gz 文件。
Nginx 开启 gzip，并配合 nginx 的 gzip_static 功能可以大大加快页面访问速度。
http {
# 开启 gzip
gzip on;
# 开启 gzip_static
# gzip_static 开启后可能会报错，需要安装相应的模块, 具体安装方式可以自行查询
# 只有这个开启，前端打包的 .gz 文件才会有效果，否则不需要开启 gzip 进行打包
gzip_static on;
gzip_proxied any;
gzip_min_length 1k;
gzip_buffers 4 16k;
# 如果 nginx 中使用了多层代理，必须设置这个才可以开启 gzip
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
}现在尝试走一遍流程
首先我们准备一个vue项目,就随便写一个哈,这里我用了history模式,顺便测一下一会刷新404的问题,先将项目打包。
npm run build根节点
我还修改了vue.config.js里的打包路径
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map',
},
publicPath: './',
});如果打包成功了，那就开始nginx吧
下载nginx：https://nginx.org/en/download.html
Stable version 稳定版本 --->https://link.zhihu.com/?target=https%3A//nginx.org/download/nginx-1.24.0.zip
nginx文件夹一定要放在没有中文的目录中
现在打开我们的nginx配置，window的话,在 X(你的安装盘符):\nginx\conf\nginx.conf, 打开以后,开始配置
进来以后会发现有很多配置,但是我们其实只要配置一小部分就好
server {
// 这里是端口,可以自己设置一个,一会你访问资源的时候就要
通过这个端口去访问,注意不要产生冲突
listen 8085;
// 这里的服务器就是我们本地
server_name localhost;
#access_log logs/host.access.log main;
// 当我们的路径匹配到/时就会走这里的配置
location / {
// 这里是告诉服务区我的资源在哪个位置,也就是我的根路径,
下面应该包含这index.html文件
root C:\Users\xxxxx(你的文件位置)\Desktop\demo\demo\dist;
// 下面就是刷新404的配置方法,当尝试寻找文件找不到的时候,
就去到index.html
try_files $uri $uri/ /index.html last;
// 默认读取文件
index index.html index.htm;
}多说无益,还是得自己在本地跑起来才行
现在配置好了,准备启动nginx,那么nginx的基本指令讲一下
start nginx // 启动nginx
nginx -t // 测试nginx配置对不对
nginx -s reload // 保存配置后重新加载基本就这几条
现在我们启动, 在nginx的文件夹中输入cmd
start nginx现在根据我们的服务器和端口去访问,根据我的配置,我应该去访问这个地址
localhost:8085
可以看到加载出来了,刷新,也不会报404了。因为他会去找index.html，但是index.html中又加载了各种资源,所以不会报错了。
这个就是比较简单的配置，以后有复杂的情况再写吧，反正还是在本地弄一下最好。
在过程中发现了nginx启动没有执行的情况,开的端口也没有关闭,这里弄一下。
start nginx - 启动nginx
nginx -s reload - 保存并重启
nginx -s stop - 暂停
taskkill /f /t /im nginx.exe - 强制关闭
netstat -ano -查看所有的端口占用情况
taskkill /T /F /PID PID的具体值
# 如果有多个进程，全部杀死
taskkill /f /im nginx.exe 可以直接用这个,然后重新启动
我的话就直接全部杀死,然后重新启动。
接下来是非根节点的情况。
前缀为/api
那么就有几个地方需要修改的: 首先修改vue.config.js的打包配置
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map',
},
publicPath: '/api',
});
这个是改变我们的资源的路径
接下来就是我们的路由:
import {
createRouter,
createWebHashHistory,
createWebHistory,
} from 'vue-router';
import HomeView from '../views/HomeView.vue';
const routes = [
{
path: '/api',
component: () => import('../views/test.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;如果首页不想用/api而是/的话,可以配置base,那么他会自动拼接上/api
现在，
base配置被作为createWebHistory(其他 history 也一样)的第一个参数传递： vue-router官网
createRouter({
history: createWebHistory('/api/'),
routes: [],
})改完这两个地方基本就可以了,再看看效果
