使用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版本的安装包。
下载完成之后，

首先解压nginx安装包。
修改nginx-1.13.7\conf 里面的nginx.conf文件里面的引入conf文件的路径，在文件的最后，include (本地路径)/*.conf，其实就是引入外面的wx.conf文件;
修改wx.conf配置文件，使nginx 代理到本地服务。首先修改server_name 为自定义域名如 www.wx.com ,其次，修改本地服务的端口号upstream wx { server 127.0.0.1:8080; } 如果本地服务是8080的话。
4.修改nginx.bat 引入nginx的地址。
set NGINX_DIR=D:\BaiduNetdiskDownload\nginx\nginx-1.13.7
（设置为本地nginx解压地址即可）

至此nginx配置基本完毕。

写完这篇文章，是我想起来16年在ody工作时的场景，曾经在在移动端开发的时候，有个前端的大boss ，算是我大哥吧，我看他在做移动端开发的时候会在本地建一个nginx或者express服务，然后代理本地的请求，其实不就是后来很多人使用的的webpack封装的服务吗。

使用nginx 和 switchhost实现自定义域名指向本地服务相关推荐

nginx 配置多个域名指向不同服务_Nginx的几个常用配置和技巧
文章列举了几个Nginx常见的,实用的,有趣的配置,希望看过之后能说一句:学到了! 一个站点配置多个域名 server { listen 80; server_name ops-coffee.cn b ...
解决Mac无法关闭80端口，无法将hosts域名指向本地80端口
在mac os中,非root用户是无法使用小于1024的常用端口的.如果开发中需要用到80端口, 就要设置端口转发修改hosts文件 (1)打开Terminal,输入以下指令: sudo vim / ...
使用nginx实现一个主机部署多域名指向不同docker项目
使用nginx实现一个主机部署多域名指向不同docker项目原文:使用nginx实现一个主机部署多域名指向不同docker项目 1,安装 docker yum install docker 使用D ...
Nginx配置多个域名指向同一个服务器文件
这里写自定义目录标题目的准备工作修改内容注意: 目的因为公司开发方面有响应的需求,需要多个域名指向同一个服务器下的文件(即访问的域名不同但访问的服务器下的文件是同一个) 准备工作已经过解析 ...
React+Nginx 二级域名指向配置
使React线上项目二级域名指向端口欢迎使用Markdown编辑器开始前检查你的Nginx 检查是否正常编写nginx.conf 在同级目录的conf.d目录里清理一下缓存欢迎使用Markd ...
GitHub + jsDelivr + Nginx + PicGo 搭建自定义域名CDN加速免费图床
前言经常写Markdown或者博客的同学,一般都会用到图床.图床是什么呢?其实就是一个存储图片的网站,上传图片到图床后可以直接通过外链进行访问. 例如把本地一张test.jpg上传图床后,即可以用外 ...
nginx 如何自定义域名配置反向代理
nginx 如何自定义域名配置反向代理 1.修改配置文件 1.1 下载好的nginx目录中有一个conf目录,如下图最上面 1.2 进入之后找到nginx.conf这个文件,用记事本或者Notepad ...
Nginx反向代理设置二级域名（CentOS）
nginx 配置 whereis nginx /usr/sbin/nginx -> 执行文件 /etc/nginx/conf.d -> 自定义.conf文件的存放位置 ...
Nginx的安装和多域名配置的实现方法
这篇文章主要介绍了Nginx的安装和多域名配置的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Nginx安装 centos6.x yum默认没有nginx的软件 ...
GitHub Pages和每个项目绑定自定义域名（支持多个和顶级域名）
假设我购买的域名为www.easonjim.com,想把www.easonjim.com和easonjim.com的域名跳转到下面的网址easonjim.github.io. 而我在github上的账 ...

使用nginx 和 switchhost实现自定义域名指向本地服务

标题使用nginx 和 switchhost实现自定义域名指向本地服务

使用nginx 和 switchhost实现自定义域名指向本地服务相关推荐

最新文章

热门文章