本地通过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 负载均衡是什么以及该如何配置
Mar 31 Servers
nginx处理http请求实现过程解析
Mar 31 Servers
nginx 反向代理之 proxy_pass的实现
Mar 31 Servers
nginx结合openssl实现https的方法
Jul 25 Servers
nginx负载功能+nfs服务器功能解析
Feb 28 Servers
配置Kubernetes外网访问集群
Mar 31 Servers
Windows Server 2019 域控制器安装图文教程
Apr 28 Servers
ubuntu下常用apt命令介绍
Jun 05 Servers
超越Nginx的Web服务器caddy优雅用法
Jun 21 Servers
Linux下搭建SFTP服务器的命令详解
Jun 25 Servers
win7配置本地ftp服务器的图文教程
Aug 05 Servers
Apache SkyWalking 监控 MySQL Server 实战解析
Sep 23 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
curl和libcurl的区别简介
2015/07/01 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python 文件和输入输出小结
2013/10/09 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Python多进程编程常用方法解析
2020/03/26 Python
python中怎么表示空值
2020/06/19 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
公司员工的自我评价范例
2013/11/01 职场文书
诚信考试倡议书
2014/04/15 职场文书
小学英语课后反思
2014/04/26 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
检讨书范文1000字
2015/01/28 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python