前言
在平时的开发中,除了使用本机的浏览器测试页面,有时也要使用其他设备测试。
但是开发调试,运行的是本地的开发服务器,在局域网中是访问不到的,这是因为开发服务器地址是localhost,ipv4是127.0.0.1。
这个地址相当于仅本机的局域网,所以外部网络无法访问。
根据这个原因,网站在局域网中访问的方法有:
- 部署到IIS
(更改后需发布,对于日常开发还是略显繁琐)
本文主要介绍另外的方法:
- 更改开发服务器的地址 为内网地址
- 使用 nginx 代理请求 转到开发服务器
以上方法均利用了 设置服务器主机ip 为 内网ip 的方式实现内网访问
更改开发服务器的主机ip 为内网ip
这里仅介绍visual studio下的IIS Express配置:
- 打开项目目录找到.sln文件 , 同目录下找到 .vs 的隐藏文件夹
- 找到路径 .vs/config 下的文件 applicationhost.config 打开
- 运行网站时也可以右键IIS Express –> “显示所有应用程序” –> 选择你运行的网站 –> 点击下边的配置打开文件
- 编辑applicationhost.config ,如下图:
- 找到 sites/site/bindings/binding 的节点
- 编辑bindingInfosrmation属性 –> 替换 localhost 为 本机局域网ip
(或者新增binding节点 –> 编辑bindingInfosrmation属性 替换 localhost 为本机局域网ip)
- 重新运行项目即可
使用 nginx 代理请求 转到开发服务器
nginx 是一款强大的web服务器和反向代理服务器。
nginx 的安装非常简单,使用也很简单:启动程序时根据配置文件实现相应的功能。
利用它可以代理我们开发服务器的端口,从而可以在映射的地址上访问我们的开发服务器。
更多概念及原理可以去官网上了解,这里只做windows下使用介绍
1. 安装 nginx
从 官方网站 下载windows发布版压缩包(推荐下载stable version的稳定版本);
解压后的目录即是nginx程序的运行目录,运行nginx.exe即可。
但实际可能不止运行一个服务器,或单独一种配置。这时候就需配置环境变量,从命令行运行程序
- 右键 “这台电脑” –> “高级系统设置” –> “环境变量” 找到 “系统变量”
- 编辑 “Path” 变量 –> 把解压后nginx.exe所在目录路径 完整的复制到最后面,注意目录之间要使用”;” 隔开
- 运行命令行, 输入
nginx -v
,若跟下载的版本匹配则表示环境配置成功
2. 配置 nginx
一个能供nginx运行的基本文件目录结构为:
conf
配置文件的目录,运行时未指定配置文件会默认使用 conf/nginx.conf 路径的文件.logs
项目启动时记录文件的目录,程序运行的pid,errorLog就记录在这里,可为空目录.temp
其他临时文件的目录,可为空目录.
编辑好配置文件,运行nginx即可。
配置文件可参考如下: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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120#运行用户
#user somebody;
#启动进程,通常设置成和cpu的数量相等
worker_processes 1;
#全局错误日志
# error_log C:/Users/Administrator/Desktop/nginxSetting/logs/error.log;
# error_log D:/Tools/nginx-1.10.1/logs/notice.log notice;
# error_log D:/Tools/nginx-1.10.1/logs/info.log info;
#PID文件,记录当前启动的nginx的进程ID
# pid C:/Users/Administrator/Downloads/======Installer/soft/nginx-1.13.10/logs/nginx.pid;
#工作模式及连接数上限
events {
worker_connections 1024; #单个后台worker process进程的最大并发链接数
}
#设定http服务器,利用它的反向代理功能提供负载均衡支持
http {
#设定mime类型(邮件支持类型),类型由mime.types文件定义
# include C:/Users/Administrator/Downloads/======Installer/soft/nginx-1.13.10/conf/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 C:/Users/Administrator/Downloads/======Installer/soft/nginx-1.13.10/logs/access.log main;
rewrite_log on;
#sendfile 指令指定 nginx 是否调用 sendfile 函数(zero copy 方式)来输出文件,对于普通应用,
#必须设为 on,如果用来进行下载等应用磁盘IO重负载应用,可设置为 off,以平衡磁盘与网络I/O处理速度,降低系统的uptime.
sendfile on;
#tcp_nopush on;
#连接超时时间
keepalive_timeout 35;
tcp_nodelay on;
#gzip压缩开关
#gzip on;
# #设定实际的服务器列表
# upstream zp_server1{
# # server localhost:4079;
# }
# #HTTP服务器
# server {
# listen 192.168.3.104:8001;
# #定义使用www.xx.com访问
# # server_name 192.168.3.104;
# #首页
# # index index.html
# #指向webapp的目录
# # root D:\01_Workspace\Project\github\zp\SpringNotes\spring-security\spring-shiro\src\main\webapp;
# #编码格式
# charset utf-8;
# #代理配置参数
# proxy_connect_timeout 180;
# proxy_send_timeout 180;
# proxy_read_timeout 180;
# proxy_set_header Host $host;
# proxy_set_header X-Forwarder-For $remote_addr;
# #反向代理的路径(和upstream绑定),location 后面设置映射的路径
# location / {
# proxy_pass http://localhost:4079;
# }
# #静态文件,nginx自己处理
# # location ~ ^/(images|javascript|js|css|flash|media|static)/ {
# # root D:\01_Workspace\Project\github\zp\SpringNotes\spring-security\spring-shiro\src\main\webapp\views;
# # #过期30天,静态文件不怎么更新,过期可以设大一点,如果频繁更新,则可以设置得小一点。
# # expires 30d;
# # }
# #设定查看Nginx状态的地址
# location /NginxStatus {
# stub_status on;
# access_log on;
# auth_basic "NginxStatus";
# auth_basic_user_file conf/htpasswd;
# }
# #禁止访问 .htxxx 文件
# location ~ /\.ht {
# deny all;
# }
# #错误处理页面(可选择性配置)
# #error_page 404 /404.html;
# #error_page 500 502 503 504 /50x.html;
# #location = /50x.html {
# # root html;
# #}
# }
server {
listen 192.168.3.104:10086;
location / {
# proxy_pass http://localhost:49234;
# proxy_pass http://localhost:55773;
# proxy_pass http://localhost:4079;
proxy_pass http://localhost:4200;
}
}
}
修改下列参数直接使用:
该配置文件无法代理除http以外的协议!! 如https,websocket等
详细的http代理配置可参考 官方文档 - ngx_http_proxy_module 这块
3. 运行 nginx
直接在nginx的配置目录下运行命令行:
输入
start nginx
可运行程序,如图:运行的第二个nginx进程为守护进程,在第一个进程挂掉的时候负责重启
输入
nginx -s stop
可停止程序- 输入
nginx -s reload
可重新载入配置文件
nginx -h
可以查看其他命令参数,比如其他经常使用的:
-v
查看版本号-t
检查配置文件是否正确-c 路径
指定使用配置文件的相对路径(一般和其他参数组合使用)