内网访问开发服务器

发表于 | 更新于

前言

在平时的开发中，除了使用本机的浏览器测试页面，有时也要使用其他设备测试。
但是开发调试，运行的是本地的开发服务器，在局域网中是访问不到的，这是因为开发服务器地址是localhost，ipv4是127.0.0.1。
这个地址相当于仅本机的局域网，所以外部网络无法访问。

根据这个原因，网站在局域网中访问的方法有：

  • 部署到IIS
    （更改后需发布，对于日常开发还是略显繁琐）

本文主要介绍另外的方法:

  • 更改开发服务器的地址 为内网地址
  • 使用 nginx 代理请求 转到开发服务器

以上方法均利用了 设置服务器主机ip 为 内网ip 的方式实现内网访问

更改开发服务器的主机ip 为内网ip

这里仅介绍visual studio下的IIS Express配置:

  1. 打开项目目录找到.sln文件 , 同目录下找到 .vs 的隐藏文件夹
  2. 找到路径 .vs/config 下的文件 applicationhost.config 打开
    • 运行网站时也可以右键IIS Express –> “显示所有应用程序” –> 选择你运行的网站 –> 点击下边的配置打开文件
  3. 编辑applicationhost.config ，如下图：
    • 找到 sites/site/bindings/binding 的节点
    • 编辑bindingInfosrmation属性 –> 替换 localhost 为 本机局域网ip
      (或者新增binding节点 –> 编辑bindingInfosrmation属性 替换 localhost 为本机局域网ip)

edit

  1. 重新运行项目即可

使用 nginx 代理请求 转到开发服务器

nginx 是一款强大的web服务器和反向代理服务器。
nginx 的安装非常简单，使用也很简单：启动程序时根据配置文件实现相应的功能。
利用它可以代理我们开发服务器的端口，从而可以在映射的地址上访问我们的开发服务器。

更多概念及原理可以去官网上了解，这里只做windows下使用介绍

1. 安装 nginx

从 官方网站 下载windows发布版压缩包（推荐下载stable version的稳定版本）；
解压后的目录即是nginx程序的运行目录，运行nginx.exe即可。

但实际可能不止运行一个服务器，或单独一种配置。这时候就需配置环境变量，从命令行运行程序

  • 右键 “这台电脑” –> “高级系统设置” –> “环境变量” 找到 “系统变量”
  • 编辑 “Path” 变量 –> 把解压后nginx.exe所在目录路径 完整的复制到最后面，注意目录之间要使用”;” 隔开
    path-edit
  • 运行命令行, 输入 nginx -v，若跟下载的版本匹配则表示环境配置成功
    path-edit2

2. 配置 nginx

一个能供nginx运行的基本文件目录结构为：
nginxFolder

  • 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可运行程序，如图：
    step1

    运行的第二个nginx进程为守护进程，在第一个进程挂掉的时候负责重启

  • 输入 nginx -s stop 可停止程序

  • 输入 nginx -s reload 可重新载入配置文件

nginx -h 可以查看其他命令参数，比如其他经常使用的：

  • -v 查看版本号
  • -t 检查配置文件是否正确
  • -c 路径 指定使用配置文件的相对路径(一般和其他参数组合使用)