本地开发域名代理

构建支持

前提:

  • 代理域名能够映射到本机ip地址的功能需要你自己在电脑上面配置。如果是实际的存在的域名,理论上面就不需要自己配置域名映射。

  • 该功能只在 Egg 应用构建本地开发使用。

在 Egg SSR 应用开发时,Egg 应用的访问地址, 静态资源构建的地址, HMR 地址都是 ip, 不方便进行环境模拟测试,比如 cookie和登陆场景。

// webpack.config.js
module.exports = {
  host: 'http://app.debug.com' // 只在 env: dev 方式生效, 这里 host 改成你自己的实际有效的域名地址。
}

nginx 和 dnsmasq 配合使用

在日常本地开发时,我们经常会遇到以下情况:

  • 在H5本地开发页面, 经常遇到白名单(APP里面, 外部平台)和cookie问题

  • 同样的包线上环境有问题,本地OK, 需要模拟线上环境

在这样的情况下,我们可以通过nginx和dnsmasq搭建本地搭建代理服务器, 把线上的域名请求映射到本机解决以上两个问题.

nginx域名代理转发

如果mac系统,默认时安装了nginx, 可以通过 http://127.0.0.1 检查 nginx是否正常, 如果正常会显示 Welcome to nginx 信息<br />

通过brew安装nginx

  • brew 搜索软件
brew search nginx
  • brew 安装软件
brew install nginx
  • brew 卸载软件
brew uninstall nginx
  • brew 升级
sudo brew update
  • 查看安装信息(经常用到, 比如查看安装目录等)
sudo brew info nginx
  • 查看已经安装的软件
brew list

nginx常用操作

  • 启动nginx服务
sudo brew services start nginx
  • 查看nginx版本
nginx -v
  • 关闭nginx服务
sudo brew services stop nginx
  • 重新加载nginx
nginx -s reload
  • 停止nginx
nginx -s stop

nginx域名代理转发

  • 进入nginx安装目录 /usr/local/etc/nginx , 我们看到servers目录下面有个 default.conf 配置80端口映射, 访问http://127.0.0.1时,会自动打开root对应目录的index.html文件

  • nginx启动时,会自动读取 /usr/local/etc/nginx/server 目录所有的server配置文件,文件名可以自由定义(在 nginx.conf 里面include servers/*

server {
    listen 80 default_server;
    index index.html;
    root /usr/local/var/www;
    server_name 127.0.0.1;
}
  • 自定义配置, 比如我想把 local.sky.com转发到本机的 http://127.0.0.1:5000 地址, 只需要在server目录下面增加文件5000.conf(文件名可自定义),然后增加一下配置:

  • server {
      listen 80;
      server_name  local.sky.com local.sky.cn;
      location / {
        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_pass http://127.0.0.1:5000;
     }
     access_log /Users/caoli/dev/log/proxy.log;
    }
  • 打开 /private/etc/hosts 文件,添加如下内容:
127.0.0.1       localhost
::1             localhost
127.0.0.1       local.sky.com
127.0.0.1       local.sky.cn

最后通过 nginx -s reload 命令重启nginx, 然后在浏览器地址栏就可以通过 local.sky.com 访问 http://127.0.0.1:5000了. 通过以上配置就可以解决电脑端域名映射和cookie等问题. 如果不配置 nginx,可以通过 http://proxy.test.cn:5000 访问, 配置 nginx 后,可以直接 local.sky.com 访问。

nginx https 配置

  • cd /usr/local/etc/nginx/
  • openssl genrsa -des3 -out server.key 1024 (输入密码 123456)
  • openssl req -new -key server.key -out server.csr
  • 填写证书注册信息
    • Country Name(国家:中国填写CN)
    • State or Province Name(区域或是省份:GuangDong)
    • Locality Name(地区局部名字:GuangZhou)
    • Organization Name(机构名称:sky.com)
    • Organizational Unit Name(组织单位名称:部门名称)
    • Email Address(邮箱地址)
    • A challenge password(密码 123456 )
  • 生成server.crt文件
    • cp server.key server.key.org
    • openssl rsa -in server.key.org -out server.key
    • openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
  • 点击 /usr/local/etc/nginx/server.crt,注册系统证书目录
  • nginx 开启 ssl
server {
   listen 80;
   server_name  local.sky.com  local.sky.cn;
   location / {
      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_pass http://127.0.0.1:7001;
   }
   access_log /usr/local/etc/nginx/logs/local-7001.log;
}
 # HTTPS server

server {
   listen       443 ssl;
   server_name  local.sky.com  local.sky.cn;

   ssl_certificate      /usr/local/etc/nginx/server.crt;
   ssl_certificate_key  /usr/local/etc/nginx/server.key;

   ssl_session_cache    shared:SSL:1m;
   ssl_session_timeout  5m;

   ssl_ciphers  HIGH:!aNULL:!MD5;
   ssl_prefer_server_ciphers  on;

   location / {
      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_pass http://127.0.0.1:7001;
   }
}
  • nginx -s reload

dnsmasq 搭建 DNS 服务

  • 安装dnsmasq
brew install dnsmasq
  • 重启 dnsmasq
sudo brew services restart dnsmasq
  • dnsmasq的设置

拷贝并重命名/usr/local/opt/dnsmasq/dnsmasq.conf.example -> /usr/local/etc/dnsmasq.conf。

cp /usr/local/opt/dnsmasq/dnsmasq.conf.example /usr/local/etc/dnsmasq.conf
  • 新建resolv.dnsmasq.conf文件用来指定域名解析服务器地址的
cd /usr/local/etc
vim resolv.dnsmasq.conf
  • 把常用的DNS服务器的地址保存到resolv.dnsmasq.conf
nameserver 8.8.8.8
nameserver 8.8.4.4

修改 /usr/local/etc/dnsmasq.confresolv-file , address , listen-address , strict-order , no-hosts 配置项, 如果没有请添加, 如果是#注释,请取消注释

#no-hosts
no-hosts

#strict-order
strict-order

#resolv-file
resolv-file=/usr/local/etc/resolv.dnsmasq.conf

# web-server
address=/local.sky.com/192.168.1.1
address=/local.sky.cn/192.168.1.1

# listen-address 192.168.1.1 为本机ip
listen-address=127.0.0.1,192.168.1.1

DNS服务的启用

开机启动dns服务
sudo cp -fv /usr/local/opt/dnsmasq/*.plist /Library/LaunchDaemons
sudo lauchctl load /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist

sudo launchctl stop homebrew.mxcl.dnsmasq
sudo launchctl start homebrew.mxcl.dnsmasq
sudo killall -HUP mDNSResponder

启动

sudo brew services start dnsmasq
检查域名映射和DNS配置
启动本机服务127.0.0.1:5000服务后, 检查host映射
curl 127.0.0.1 -H "Host:proxy.test.com"
检查域名映射是否解析到本机ip
dig proxy.test.com @0.0.0.0

手机代理设置

Android 手机使用DNS服务, 请安装Fast DNS Change APK, 把自己的本机IP添加到DNS列表中,如果需要用本机DNS,请双击会显示已Connnected到本机DNS, 再次点击Disconnnected
https://apkpure.com/cn/fast-dns-changer-no-root/com.mustafademir.fastdnschanger

iOS 手机使用DNS服务, 把自己本机的ip填写到 DNS列表中, DNS的地址之间要用逗号间隔一下.
http://jingyan.baidu.com/article/dca1fa6f44c664f1a5405244.html

如果你愿意付费,可以安装个IOS APP: DNS Override,可以一键开启 dns 设置.

PC访问
http://jingyan.baidu.com/article/fc07f9891f626712ffe519cf.html

DNS配置以后, 就可以在手机上面通过域名(http://proxy.test.com:5000http://proxy.test1.com:5000) 访问, 然后映射到本机服务 http://127.0.0.1:5000.

接口代理

easywebpack 4 版本支持了本地接口代理转发的功能, 主要解决本地开发跨域问题. 具体见:/easywebpack/ed847g


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
常见问题 常见问题
Babel 快速升级问题为了更方便升级 Babel7, 同时尽量减少配置且无需安装 @babel 依赖,@easy-team 模式直接内置Babel 7 的相关依赖,只需要把 easywebpack 依赖模式改成 @easy-team/easywebpack 模式,如果代码中直接依赖了也请一并...
2020-05-31 sky
Next 
React 工程方案 React 工程方案
安装 easywebpack-cli 工具npm install easywebpack-cli -g添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置,以下仅仅是举例. 详细配置见:...
2020-05-31 sky