顾名思义,就是要在苹果电脑上搭建 Apache 服务器,并且支持 https 协议,能用指定域名访问(有些开发调试需要注册域名,比如调试微信JS-SDK),当然最好能在手机端进行调试。首先,Mac 系统自带 Apache 服务器,只需在终端输入 sudo apachectl start 回车即可开启 Apache,那么我们现在先给服务器绑定域名,然后再设置 ssl 协议,最后用 Charles 实现手机访问。
绑定域名
1、打开访达编辑 /private/etc/hosts 文件,在该文件中添加如下代码,如果要绑定多个域名就添加多行,前面的 IP 不变:
127.0.0.1 www.example.com
2、打开文件 /private/etc/apache2/httpd.conf ,找到 Include /private/etc/apache2/extra/httpd-vhosts.conf 将其前面的井号“#”删除,因为后面要用到 /private/etc/apache2/extra/httpd-vhosts.conf 这个文件。
找到 DocumentRoot "......" ,在其前面加上井号“#”,我希望能够绑定多个域名,并且不同的域名指向不同的项目,需要到 /private/etc/apache2/extra/httpd-vhosts.conf 去设置绑定,在 /private/etc/apache2/httpd.conf 里只能绑定一个域名和项目,所以将这句注销。
在刚刚修改的地方下一行有一条 <Directory "/xxxx/xxxx/xxxx"> ,将其中引号中内容改为项目所在的地址,从这一行开始到下面的 </Directory> 结束是指定要和域名绑定的项目的,如果要指定多个项目可以在这段内容下面再复制粘贴这段内容,指定几个项目就粘贴几段,只需要修改相应的项目地址即可,下一步我们将会把域名和这些项目地址进行绑定。
3、打开文件 /private/etc/apache2/extra/httpd-vhosts.conf ,在末尾添加如下代码:
<VirtualHost *:80> ServerAdmin webmaster@dummy-host.example.com DocumentRoot "[你的项目地址]" ServerName www.example.com ServerAlias www.example.com ErrorLog "/private/var/log/apache2/www.example.com-error_log" CustomLog "/private/var/log/apache2/www.example.com-access_log" common </VirtualHost>
在这里就把域名和项目绑定在一起了,如果有多个域名和项目就复制上面的代码,只需修改其中的域名和项目地址, sudo apachectl restart 重新启动 Apache 服务器后就可以通过指定的域名访问相应的项目了。
设置 SSL 协议
1、新建文件夹 /private/etc/apache2/ssl
2、安装 openssl:
npm install openssl
3、生成私钥:
openssl genrsa -out server.key 2048
这样是生成rsa私钥,openssl格式,2048位强度。server.key是密钥文件名,此时应该可以看到在 ssl 文件夹里生成了文件 server.key。
4、生成自签名证书
openssl req -new -sha256 -x509 -days 365 -key server.key -out server.crt
req是证书请求的子命令,-sha256表示算法,-x509表示输出证书,-days365 为有效期,此后根据提示输入证书拥有者信息,可以随便填,但 Common Name
应该与域名保持一致。完成后会在 ssl 文件夹里生成 server.crt 文件。
5、安装证书:双击 server.crt 即可安装证书,安装完后会打开钥匙串,里面包含很多证书和应用程序秘密,刚刚安装好的证书也在里面,双击打开该证书 -> 点击信任左边的三角按钮 -> 设置“使用此证书时”的选项为“始终信任”。
6、编辑/etc/apache2/httpd.conf
文件,搜索下面内容,并去掉注释符号#:
LoadModule ssl_module libexec/apache2/mod_ssl.so Include /private/etc/apache2/extra/httpd-vhosts.conf Include /private/etc/apache2/extra/httpd-ssl.conf LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so
7、打开/etc/apache2/extra/httpd-ssl.conf
文件,去掉以下两项注释并检查是否与之前安装私钥和证书的路径一致:
SSLCertificateFile "/private/etc/apache2/ssl/server.crt" SSLCertificateKeyFile "/private/etc/apache2/ssl/server.key"
8、编辑/etc/apache2/extra/httpd-vhosts.conf
文件,在 末尾添加一段如下内容:
<VirtualHost *:443> SSLEngine on SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL SSLCertificateFile /private/etc/apache2/ssl/server.crt SSLCertificateKeyFile /private/etc/apache2/ssl/server.key ServerName www.example.com DocumentRoot "[项目地址]" </VirtualHost>
重启服务器,访问 https://www.example.com,此时会弹出安全提示,不用管点击继续访问即可。
配置手机访问(手机和电脑须处于一个局域网里)
- 打开 Charles,选择 帮助 -> SSL 代理 -> 在移动设备或远程浏览器上安装Charles Root证书,此时会弹出一个窗口,记住上面的 ip 地址和端口;
- 在手机端选择 设置 -> 无线局域网 -> 当前wifi -> 配置代理 -> 手动,输入服务器 ip 地址和端口,填完别忘记存储;
- 下载 Charles 根证书: 在手机浏览器中打开 chls.pro/ssl,按照提示点允许;
- 在手机端打开 设置 -> 通用 -> 描述文件与设备管理 安装刚刚下载的 Charles 证书;
- 在手机上打开:设置 -> 通用 -> 关于本机 -> 证书信任设置,找到刚刚安装的 Charles 证书将其设为信任;
- 打开手机浏览器,访问 https://www.example.com。