微信公众号的网页开发授权微信信息,是需要重定向到微信的一个地址,然后重定向返回的,并且重定向返回的地址需要在公众号后台去配置域名,我们想要在本地调试此功能,就需要在本地做一个域名映射来实现;
第一步:修改host文件 计算机路径 C:\Windows\System32\drivers\etc ,修改如下:
注意 test.saas.com 就是你想要映射的域名
# 127.0.0.1 localhost
# ::1 localhost
127.0.0.1 test.saas.com
第二步:验证是否配置成功
使用IDE,运行项目,使本地能够访问,然后把 localhost 改成刚才想映射的域名访问,
例如: http://test.saas.com:8080/zhenyu-club/ 能访问了就证明成功了
接下来可以本地调试了,需要注意的是,本地调试完毕以后,上传到真的测试环境想再测试,需要打开计算机路径 C:\Windows\System32\drivers\etc 把 127.0.0.1 test.saas.com 给注释掉,注释就是在当前行最前面加一个#号。
第三步:关闭 host 检查
因为新版的 webpack-dev-server 出于安全考虑,默认检查 hostname,如果hostname不是配置内的就不能访问。
解决办法:设置跳过host检查
打开你的项目全局搜索 devServer ,在 devServer 里面添加 "disableHostCheck": true,
如下:
disableHostCheck 设置为 true 的意思就是设置跳过host检查。
结束;
另外来个福利内容,本地配置 nginx反向代理;
nginx反向代理服务:浏览器输入网址并回车后,会发起一个http请求给nginx(反向代理服务器),这个请求如果是访问静态文件,那么nginx作为web服务器直接返回请求的内容,如果是访问的后台服务逻辑,那么nginx把请求转发给后端的服务处理。
1.下载nginx
http://nginx.org/en/download.html
下载后解压,解压后如下
2.启动nginx
有很多种方法启动nginx
(1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过
(2)打开cmd命令窗口,切换到nginx解压目录下,输入命令 nginx.exe 或者 start nginx ,回车即可
3.检查nginx是否启动成功
直接在浏览器地址栏输入网址 http://localhost,回车,出现以下页面说明启动成功
也可以在cmd命令窗口输入命令 tasklist /fi "imagename eq nginx.exe" ,出现如下结果说明启动成功
nginx的配置文件是conf目录下的nginx.conf,默认配置的nginx监听的端口为80,如果80端口被占用可以修改为未被占用的端口即可
proxy_pass 后面的域名,就是本地反向代理的域名
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://xxx.saas.com.cn/;
# root html;
# index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
检查80端口是否被占用的命令是: netstat -ano | findstr 0.0.0.0:80 或 netstat -ano | findstr "80"
当我们修改了nginx的配置文件nginx.conf 时,不需要关闭nginx后重新启动nginx,只需要执行命令 nginx -s reload 即可让改动生效
4.关闭nginx
如果使用cmd命令窗口启动nginx,关闭cmd窗口是不能结束nginx进程的,可使用两种方法关闭nginx
(1)输入nginx命令 nginx -s stop(快速停止nginx) 或 nginx -s quit(完整有序的停止nginx)
(2)使用taskkill taskkill /f /t /im nginx.exe
5.使用nginx代理服务器做负载均衡
我们可以修改nginx的配置文件nginx.conf 达到访问nginx代理服务器时跳转到指定服务器的目的,即通过proxy_pass 配置请求转发地址,即当我们依然输入http://localhost:80 时,请求会跳转到我们配置的服务器
同理,我们可以配置多个目标服务器,当一台服务器出现故障时,nginx能将请求自动转向另一台服务器,例如配置如下:
当服务器 localhost:8080 挂掉时,nginxnginx能将请求自动转向服务器 192.168.101.9:8080 。上面还加了一个weight属性,此属性表示各服务器被访问到的权重,weight
越高被访问到的几率越高。
6.nginx配置静态资源
将静态资源(如jpg|png|css|js等)放在如下配置的f:/nginx-1.12.2/static目录下,然后在nginx配置文件中做如下配置(注意:静态资源配置只能放在 location / 中),浏览器中访问 http://localhost:80/1.png 即可访问到 f:/nginx-1.12.2/static目录下的 1.png图片