夜猫子的知识栈 夜猫子的知识栈
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夜猫子

前端练习生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 学习

  • 面试

  • 心情杂货

  • 实用技巧

    • 2分钟规则
    • Typora+Github+PicGo创建图床.md
    • Nginx反向代理
    • 博客技巧
  • 友情链接
  • 更多
  • 实用技巧
夜猫子
2022-06-26

Nginx反向代理

server {
    listen       80;#前端监听端口
    server_name  localhost;#代理服务地址
    
    root /home/app/vuecli/dist;   #设置根目录!即存放你build后前端代码的地址

    location / {
        autoindex on;       #开启nginx目录浏览功能
        autoindex_exact_size off;   #文件大小从KB开始显示
        charset utf-8;          #显示中文
        add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
        add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
    }

    #开始配置我们的反向代理
    location /api{    #"/api"中的api可以替换为自定义的任何内容
    rewrite ^/api/(.*)$ /$1 break;    #重点!把接口头部为/api的请求头重写替换为$ $1中的内容,如此处前端请求接口为/api/login,将重写代理成/login
    include uwsgi_params;
    proxy_pass http://localhost:8080;   #nginx默认监听80,需要反向代理到8080或者自定义端口
    charset utf-8;   #显示中文
        add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
        add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
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

以上为案例展示

使用shell命令更改conf文件的话,进入vi编辑器后输入i进入编辑 ,esc命令退出编辑,:wq!命令保存并退出vi编辑器

location [ = | ~ | ~* | ^~] uri {

}
(1)、= :用于不含正则表达式的 uri 前,要求请求字符串与 uri 严格匹配,
		如果匹配成功,就停止继续向下搜索并立即处理该请求。
(2)、~:用于表示 uri 包含正则表达式,并且区分大小写。
(3)、~*:用于表示 uri 包含正则表达式,并且不区分大小写。
(4)、^~:用于不含正则表达式的 uri 前,要求 Nginx 服务器找到标识 uri 和请求
		字符串匹配度最高的 location 后,立即使用此 location 处理请求,
		而不再使用 location块中的正则 uri 和请求字符串做匹配。

以上为location 指令说明

该指令用于匹配 URL

宝塔地址(图形界面操作)

http://101.43.247.47:8888/01d784f4

小建议:在vue中配置代理了,尽量用原有的api前缀来代替,否则如果不是前后端一起协同的话,上线部署时很容易跨域失败

我在宝塔中的配置

server
{
    listen 9000; # 打开了9000端口,同时确定服务器安全组该端口打开
    server_name 101.43.247.47; # 服务器ip地址
    index index.php index.html index.htm default.php default.htm default.html; # 不用改
    root /www/wwwroot/Mall; # 项目存放目录
    
    #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END
    
    #ERROR-PAGE-START  错误页配置,可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END
    
    #PHP-INFO-START  PHP引用配置,可以注释或修改
    include enable-php-56.conf;
    #PHP-INFO-END
    
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/101.43.247.47.conf; # 不用改
    #REWRITE-END
    location /api{ 
        proxy_pass http://39.98.123.211; # 反向代理地址1
    }
     location /ncov{ 
        proxy_pass http://api.tianapi.com; # 反向代理地址2
    }
     location /springTravel{ 
        proxy_pass http://apis.juhe.cn; # 反向代理地址3
    }
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md) # 不用改
    {
        return 404;
    }
    
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{ # 不用改
        allow all;
    }
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ # 不用改
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }
    
    location ~ .*\.(js|css)?$ # 不用改
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null; 
    }
    access_log  /www/wwwlogs/101.43.247.47.log; # 不用改
    error_log  /www/wwwlogs/101.43.247.47.error.log; # 不用改
}
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
编辑 (opens new window)
上次更新: 2024/11/11 11:17:22
Typora+Github+PicGo创建图床.md
博客技巧

← Typora+Github+PicGo创建图床.md 博客技巧→

最近更新
01
IoC 解决了什么痛点问题?
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式