使用nginx 和 switchhost实现自定义域名指向本地服务
標題使用nginx 和 switchhost實現自定義域名指向本地服務
最近在做微信公眾號開發,涉及到微信獲取簽名、打開掃一掃、獲取地址等需要微信這個載體的功能。所以傳統的在pc端進行開發、調試的模式在開發移動端需要借助部分工具才能實現在微信內打開連接訪問本地服務,且可以獲取到微信的服務這一功能。在以前的開發中也涉及到,接下來我詳細講解下。
通過微信網絡里面的代理和花瓶charles來實現手機訪問本地電腦的服務。微信里面的代理可以在***無線局域網 ==》具體網絡的配置代理 ==》手動設置 (服務器為本地ip,可通過命令ipconfig查看,端口號一般為8888)設置;charles(花瓶)可通過***proxy ? proxy settings =>enable http proxying 設置。至此,在微信內訪問自定義鏈接基本可以訪問自己的本地服務。接下來進行host切換和nginx配置使訪問微信的內鏈接可以訪問本地(自己電腦)的服務。如圖所示:
打開switchhost(最好通過管理員的身份),進行自定義域名綁定,例如可以把 www.wx.com指向本地,設置為:127.0.0.1 www.wx.com
如圖所示:
其中的www.wx.com 可以設置為微信后臺設置的js安全域名地址(這里的地址協議是http),這樣就可以模擬在線的請求。如圖所示:
接下來進行nginx的配置,下載好了之后可以通過localhost:80來確認是否安裝成功。修改conf文件夾下的nginx.conf配置文件,增加一個server服務,監聽80端口,server_name設置為自定義域名如 www.wx.com, proxy_pass 設置為本地服務,如127.0.0.1:8080,可以在瀏覽器中打開127.0.0.1:8080確認本地服務是否可以訪問 。代碼如下:
upstream wx {upstream wx {
server 127.0.0.1:8080;
}
server {
listen 80;
server_name weixin.com;
root html;
index index.html index.htm index.php;
location / {
proxy_pass http://wx;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_max_temp_file_size 0;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
}
至此,配置基本完畢,建議通過命令行重啟nginx 和 本地服務。(在做Vue的開發中可能涉及到 提示 invalid host,可以在webpack.dev.js 里面設置disableHostCheck: true)。
涉及到的charles和switchhost 以及 nginx可以自行下載。charles和switchhost最好下載破解版。
接下來分享個以前同事的安裝包。
nginx配置下載鏈接
提取碼***rq5q***,里面有nginx.bat(nginx相關命令的批處理),wx.conf(nginx相關配置) 和1.13.7版本的安裝包。
下載完成之后,
4.修改nginx.bat 引入nginx的地址。
set NGINX_DIR=D:\BaiduNetdiskDownload\nginx\nginx-1.13.7
(設置為本地nginx解壓地址即可)
至此nginx配置基本完畢。
寫完這篇文章,是我想起來16年在ody工作時的場景,曾經在在移動端開發的時候,有個前端的大boss ,算是我大哥吧,我看他在做移動端開發的時候會在本地建一個nginx或者express服務,然后代理本地的請求,其實不就是后來很多人使用的的webpack封裝的服務嗎。
總結
以上是生活随笔為你收集整理的使用nginx 和 switchhost实现自定义域名指向本地服务的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 深入浅出InfoPath——让管理员来部
- 下一篇: 详细分析莫烦DQN代码