ngrok+nginx反向代理配置 与其他站点共用80端口及ng

Ngrok服务器搭建

服务器搭建推荐使用 https://github.com/sunnyos/ngrok centos 一键搭建

服务器搭建好后，生成客户端下载到本机。

Ngrok配置

由于80端口已经被nginx占用，我们只能监听800端口
ngrok 服务端运行 ：

 /usr/local/ngrok/bin/ngrokd -domain="xxxx.com" -httpAddr=":800"   #  监听 800端口。

ngrok 客户端运行 ：

ngrok -config=ngrok.cfg -subdomain aaa 80 #（windows系统客户端）

配置好后，我们要访问本地资源就需要 aaa.xxx.com:800 加上端口访问，由于微信开发默认只能是80端口， 我们预期需要让 aaa.xxx.com / bbb.xxx.com 可以直接访问本地资源就需要通过nginx 代理跳转完成

Nginx 配置反向代理

加上 proxy_set_header Host $host:800 让 *.xxx.com 所有的二级域名都能代理到其对应的二级域名下，这样用ngrok客户端随意增加主机头都不需要在增加nginx的配置。同样能满足将共用80端口转发到ngrok监听的800端口下

server
    {
        listen 80;
        server_name *.xxxx.com ;  #域名
        index index.html ;
        root  /home/wwwroot/xxx.com;
        location / {
            proxy_pass http://ngrok.xxxx.com:800; #此处二级域名可以随意填写
            proxy_set_header Host $host:800;  # 这个是重点，$host 指的是与server_name相同的域名
            proxy_redirect off;
            client_max_body_size 10m;
            client_body_buffer_size 128k;
            proxy_connect_timeout 90;
            proxy_read_timeout 90;
            proxy_buffer_size 4k;
            proxy_buffers 6 128k;
            proxy_busy_buffers_size 256k;
            proxy_temp_file_write_size 256k;

        }
 
#解决配置反向代理后js css文件无法加载问题
      location ~ .*\.(js|css)$ {            
            proxy_pass http://ngrok.xxxx.com:800; #此处二级域名可以随意填写
            proxy_set_header Host $host:800;  # 这个是重点，$host 指的是与server_name相同的域名
         }


}

Ngrok 配置服务器后台运行

在ngrok目录下创建 start.sh 文件

 cd ~/ngrok
 vim start.sh

start.sh 文件内容。 末尾加上 & 可在服务器后台运行

/usr/local/ngrok/bin/ngrokd -domain="xxx.com" -httpAddr=":800" &

在/etc/rc.d/init.d/下新建ngrok文件

#!/bin/sh  
 
ngrok_path=~/ngrok
case "$1" in
    start)
        echo "start ngrok service.."  
        sh ${ngrok_path}/start.sh
        ;;
    *)
    exit 1
    ;;
esac

chmod 755 ngrok  #修改ngrok文件权限
chkconfig --add  ngrok  #注册自启动
service ngrok start #运行ngrok，关闭远程服务器后ngrok还是在运行着