本地通过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 配置 proxy_pass 后 返回404问题
Mar 31 Servers
Nginx反向代理及负载均衡如何实现(基于linux)
Mar 31 Servers
详解nginx.conf 中 root 目录设置问题
Apr 01 Servers
Windows下用Nginx配置https服务器及反向代理的问题
Sep 25 Servers
了解Kubernetes中的Service和Endpoint
Apr 01 Servers
Kubernetes中Deployment的升级与回滚
Apr 01 Servers
使用Nginx的访问日志统计PV与UV
May 06 Servers
详解ZABBIX监控ESXI主机的问题
Jun 21 Servers
Linux中各个目录的作用与内容
Jun 28 Servers
Windows7下FTP搭建图文教程
Aug 05 Servers
Valheim服务器 Mod修改安装教程 【ValheimPlus】
Dec 24 Servers
nginx sticky实现基于cookie负载均衡示例详解
Dec 24 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
php跨域调用json的例子
2013/11/13 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
javaScript基础详解
2017/01/19 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
Python字符串详细介绍
2015/05/09 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python从子线程中获得返回值的方法
2019/01/30 Python
pandas 时间格式转换的实现
2019/07/06 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
简历中自我评价分享
2013/10/09 职场文书
教育实习生的自我评价分享
2013/11/21 职场文书
中国文明网签名寄语
2014/01/18 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
个人收入证明模板
2014/09/18 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
社会实践活动报告
2015/02/05 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书