本地通过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下配置Https证书详细过程
Apr 01 Servers
学习nginx基础知识
Sep 04 Servers
Windows下用Nginx配置https服务器及反向代理的问题
Sep 25 Servers
nginx刷新页面出现404解决方案(亲测有效)
Mar 18 Servers
Z-Order加速Hudi大规模数据集方案分析
Mar 31 Servers
Linux中如何安装并部署Redis
Apr 18 Servers
使用Nginx的访问日志统计PV与UV
May 06 Servers
Nginx的gzip相关介绍
May 11 Servers
Nginx限流和黑名单配置
May 20 Servers
Linux下搭建SFTP服务器的命令详解
Jun 25 Servers
在虚拟机中安装windows server 2008的图文教程
Jun 28 Servers
nginx访问报403错误的几种情况详解
Jul 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
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
Javascript面向对象之四 继承
2011/02/08 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Django中Model的使用方法教程
2018/03/07 Python
python实时监控cpu小工具
2018/06/21 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
基于python图像处理API的使用示例
2020/04/03 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
纠风工作实施方案
2014/03/15 职场文书
保险公司年会主持词
2014/03/22 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
话题作文之呼唤
2019/12/18 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
python中的getter与setter你了解吗
2022/03/24 Python
Python如何将list中的string转换为int
2022/07/15 Ruby