windows下整合ngrok、nginx、tomcat使外網訪問本機靜態文件及項目(開發微信小程序測試時可用此種方式訪問)

        最近在研究微信小程序,小程序內的靜態文件不能通過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的下載大家可以自行百度,我用的是這個版本的這裏下載 


大家會發現他默認映射到80端口,80端口我們通過nginx分配到8080端口,此處如果不想用nginx也可直接配置tomcat端口爲80實現。

啓動好內網穿透工具後,我們即可在外網環境訪問生成的域名,即可看到我們本地的項目和靜態文件。


此時我們就可在開發測試微信小程序時使用這種方式來解決沒有域名的問題,這樣豈不是美滋滋。


 
網上也有很多關於此種方式的文章,只不過都比較零散,我怕忘記所以整合了一下。由於是第一次寫博客,難免有不完美的地方,請各位大神斧正。排版也比較亂,如有不清楚的地方可以單獨聯繫我。



       

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章