windows下整合ngrok、nginx、tomcat使外网访问本机静态文件及项目（开发微信小程序测试时可用此种方式访问）

本文链接：https://blog.csdn.net/qq_31135607/article/details/79543462

最近在研究微信小程序，小程序内的静态文件不能通过IP+端口号的方式获取，只能使用域名的方式，并且要求是https协议，虽然在开发阶段可以使用http协议，但是针对没有域名的我们，可以使用如下方式进行开发：

前提条件需要调通tomcat下的项目，使项目正常运行即可， tomcat安装及运行项目就不在此赘述。

1、nginx的下载点击下载，下载后解压，CMD进入nginx解压目录，执行start nginx，窗口闪过即启动成功。eg：我的nginx解压在D:\tools\nginx-1.12.2\>start nginx看到welcome界面即代表nginx启动成功。

2、建立要存放静态文件的文件夹，如我存放在D:/tools/nginx-1.12.2/Nginx-Images/，可在文件夹下放01.jpg 02.jpg文件测试用。

3、启动tomcat，运行项目。

4、找到nginx解压目录下conf下nginx.conf文件，修改配置文件

 server {
	listen       80;
	server_name  localhost;

	#charset koi8-r;

	#access_log  logs/host.access.log  main;
	
	#指定类型的静态文件存放路径，如我要读取的静态文件位置为D:/tools/nginx-1.12.2\Nginx-Images/ 
	location ~ .*\.(gif|jpg|jpeg|png)$ {    
		expires 24h;
		root D:/tools/nginx-1.12.2\Nginx-Images/;
	}
	#此处是使与tomcat整合后项目下的静态文件能够加载，所以root要设置为tomcat的目录
	location ~ .*\.(js|css)$ {
		root D:/tools/apache-tomcat-8.0.48/webapps/;
	}
	#此处是其他请求分配至tomcat处理，注此处不要配置tomcat下的项目路径，否则会出现action 404的错误，具体原因个人猜测是因为一旦配置为项目路径，
	ngrok映射时会映射错误的url导致，但并未深入研究。
	location / {
		proxy_pass http://localhost:8080/;
	}
	
	#error_page  404              /404.html;

	# redirect server error pages to the static page /50x.html
	#
	error_page   500 502 503 504  /50x.html;
	location = /50x.html {
		root   html;
	}

 }

5、修改配置文件后需要执行命令nginx.exe -s reload重新加载，配置好nginx，访问http://localhost/01.jpg,能看到之前你自己存放的图片即表示静态文件配置成功，访问http://localhost/项目名，能访问到tomcat下的项目即可。

6、此时我们已经可以通过nginx访问本地静态文件和访问tomcat下的项目了，接下来就要配置ngrok，关于ngrok的下载大家可以自行百度，我用的是这个版本的这里下载