使用nginx 和 switchhost实现自定义域名指向本地服务
標(biāo)題使用nginx 和 switchhost實(shí)現(xiàn)自定義域名指向本地服務(wù)
最近在做微信公眾號(hào)開發(fā),涉及到微信獲取簽名、打開掃一掃、獲取地址等需要微信這個(gè)載體的功能。所以傳統(tǒng)的在pc端進(jìn)行開發(fā)、調(diào)試的模式在開發(fā)移動(dòng)端需要借助部分工具才能實(shí)現(xiàn)在微信內(nèi)打開連接訪問(wèn)本地服務(wù),且可以獲取到微信的服務(wù)這一功能。在以前的開發(fā)中也涉及到,接下來(lái)我詳細(xì)講解下。
通過(guò)微信網(wǎng)絡(luò)里面的代理和花瓶charles來(lái)實(shí)現(xiàn)手機(jī)訪問(wèn)本地電腦的服務(wù)。微信里面的代理可以在***無(wú)線局域網(wǎng) ==》具體網(wǎng)絡(luò)的配置代理 ==》手動(dòng)設(shè)置 (服務(wù)器為本地ip,可通過(guò)命令ipconfig查看,端口號(hào)一般為8888)設(shè)置;charles(花瓶)可通過(guò)***proxy ? proxy settings =>enable http proxying 設(shè)置。至此,在微信內(nèi)訪問(wèn)自定義鏈接基本可以訪問(wèn)自己的本地服務(wù)。接下來(lái)進(jìn)行host切換和nginx配置使訪問(wèn)微信的內(nèi)鏈接可以訪問(wèn)本地(自己電腦)的服務(wù)。如圖所示:
打開switchhost(最好通過(guò)管理員的身份),進(jìn)行自定義域名綁定,例如可以把 www.wx.com指向本地,設(shè)置為:127.0.0.1 www.wx.com
如圖所示:
其中的www.wx.com 可以設(shè)置為微信后臺(tái)設(shè)置的js安全域名地址(這里的地址協(xié)議是http),這樣就可以模擬在線的請(qǐng)求。如圖所示:
接下來(lái)進(jìn)行nginx的配置,下載好了之后可以通過(guò)localhost:80來(lái)確認(rèn)是否安裝成功。修改conf文件夾下的nginx.conf配置文件,增加一個(gè)server服務(wù),監(jiān)聽80端口,server_name設(shè)置為自定義域名如 www.wx.com, proxy_pass 設(shè)置為本地服務(wù),如127.0.0.1:8080,可以在瀏覽器中打開127.0.0.1:8080確認(rèn)本地服務(wù)是否可以訪問(wèn) 。代碼如下:
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;
}
}
至此,配置基本完畢,建議通過(guò)命令行重啟nginx 和 本地服務(wù)。(在做Vue的開發(fā)中可能涉及到 提示 invalid host,可以在webpack.dev.js 里面設(shè)置disableHostCheck: true)。
涉及到的charles和switchhost 以及 nginx可以自行下載。charles和switchhost最好下載破解版。
接下來(lái)分享個(gè)以前同事的安裝包。
nginx配置下載鏈接
提取碼***rq5q***,里面有nginx.bat(nginx相關(guān)命令的批處理),wx.conf(nginx相關(guān)配置) 和1.13.7版本的安裝包。
下載完成之后,
4.修改nginx.bat 引入nginx的地址。
set NGINX_DIR=D:\BaiduNetdiskDownload\nginx\nginx-1.13.7
(設(shè)置為本地nginx解壓地址即可)
至此nginx配置基本完畢。
寫完這篇文章,是我想起來(lái)16年在ody工作時(shí)的場(chǎng)景,曾經(jīng)在在移動(dòng)端開發(fā)的時(shí)候,有個(gè)前端的大boss ,算是我大哥吧,我看他在做移動(dòng)端開發(fā)的時(shí)候會(huì)在本地建一個(gè)nginx或者express服務(wù),然后代理本地的請(qǐng)求,其實(shí)不就是后來(lái)很多人使用的的webpack封裝的服務(wù)嗎。
總結(jié)
以上是生活随笔為你收集整理的使用nginx 和 switchhost实现自定义域名指向本地服务的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 深入浅出InfoPath——让管理员来部
- 下一篇: 详细分析莫烦DQN代码