本地通过nginx配置反向代理的全过程记录


Posted in Servers onMarch 31, 2021

前言

Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能。我们在日常开发中使用到Nginx的主要有以下几个场景:

  • Nginx作为http服务器
  • 跨域请求
  • 负载均衡
  • 网络资源的动静分离

作为前端,我们主要是关注前两个场景

一、下载安装

点此下载 ,下载完成后解压,解压后文件如下:

本地通过nginx配置反向代理的全过程记录

解压(双击nginx.exe,双击后一个黑色的弹窗一闪而过)

找到nginx解压目录下,鼠标右键,找到git bash打开,输入命令start ./nginx.exe回车即启动了nginx服务.

本地通过nginx配置反向代理的全过程记录

**检查是否启动成功:**直接在浏览器地址栏输入网址http://localhost,回车,出现以下页面说明启动成功

本地通过nginx配置反向代理的全过程记录

二、nginx配置

找到nginx下的conf/nginx.conf文件,设置代理相关信息,重点是server{}中的内容

#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;
 server_names_hash_bucket_size 128;
 server {
 listen 80;
 server_name localhost;
 location / {
  root html;
  index index.html index.htm;
 }
 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
  root html;
 }
 }

 server {
 listen 80;
 server_name test-local.juejin.com;
 # 这里是你要代理的测试环境域名加上-local
 # 比如你的项目测试环境为a.test.com,你本地此处可以设置为a-local.test.com,当然你可以随便设置

 location /{
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
  # 此处8091是我们本地运行项目的端口号,设置成跟你本地起的服务端口号一样就行
  proxy_pass http://127.0.0.1:8091/;
 }
 }
}

三、本机dns配置

**修改本地host文件配置,**找到目录C:\Windows\System32\drivers\etc,打开hosts文件,修改文件,加入127.0.0.1 a-local.test.com

本地通过nginx配置反向代理的全过程记录

四、运行

先输入./nginx.exe -t检查nginx配置是否正确,正确如下图:

本地通过nginx配置反向代理的全过程记录

继续输入nginx -s reload重启(nginx配置文件修改后都要重启nginx才会生效)

刷新dns: ipconfig /flushdns

本地通过nginx配置反向代理的全过程记录

在浏览器中输入http://a-local.test.com, 你将会看到你本地运行的代码界面

五、常用的nginx命令

  • 帮助命令:nginx -h
  • 启动Nginx服务器 :start nginx
  • 配置文件路径:/usr/local/nginx/conf/nginx.conf
  • 检查配置文件:nginx -t
  • 停止服务:nginx -s stop
  • 退出服务(处理完所有请求后再停止服务):nginx -s quit
  • 重新加载配置文件:nginx -s reload
  • 显示版本信息并退出  nginx -v 
  • 杀死所有nginx进程  killall nginx 

六、跨域请求

前后端分离的项目中由于前后端项目分别部署到不同的服务器上,我们首先遇到的问题就是跨域,在这个场景我们下nginx可以帮助我们很好地解决这个问题

#跨域请求server
server{
	listen 9000;
	server_name 127.0.0.1; # 或者设置为本机ip
	root /app/crossDomain/;
	index index.html;
	
	location /douban/ { #添加访问目录为/api的代理配置
		rewrite ^/api/(.*)$ /$1 break;
		proxy_pass http://a.test.com;
 }
}

总结

到此这篇关于本地通过nginx配置反向代理的文章就介绍到这了,更多相关本地通过nginx配置反向代理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Servers 相关文章推荐
nginx如何将http访问的网站改成https访问
Mar 31 Servers
Nginx配置SSL证书出错解决方案
Mar 31 Servers
Nginx下配置Https证书详细过程
Apr 01 Servers
Nginx配置之实现多台服务器负载均衡
Aug 02 Servers
Nginx缓存设置案例详解
Sep 15 Servers
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
Apr 07 Servers
Tomcat starup.bat 脚本实现开机自启动
Apr 20 Servers
使用Nginx的访问日志统计PV与UV
May 06 Servers
Linux中文件的基本属性介绍
Jun 01 Servers
Win2008系统搭建DHCP服务器
Jun 25 Servers
如何让你的Nginx支持分布式追踪详解
Jul 07 Servers
nginx优化的六点方法
Mar 31 #Servers
Nginx优化服务之网页压缩的实现方法
Nginx 负载均衡是什么以及该如何配置
Mar 31 #Servers
Nginx快速入门教程
nginx如何将http访问的网站改成https访问
Mar 31 #Servers
Nginx+Tomcat实现负载均衡、动静分离的原理解析
使用nginx动态转换图片大小生成缩略图
Mar 31 #Servers
You might like
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
浅谈js闭包理解
2019/04/01 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
jupyter安装小结
2016/03/13 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
django model object序列化实例
2020/03/13 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
市场开发与营销专业求职信
2013/12/31 职场文书
教师档案管理制度
2014/01/23 职场文书
面试自我评价范文
2014/09/17 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技