专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

Mac本地开发环境, apache/nginx绑定域名启用HTTPS

创建本地ssl证书(使用lvh.me域名)

mkdir ~/.ssl; cd ~/.ssl;
openssl req -new -keyout lvh.me.key -x509 -nodes -new -out lvh.me.crt -subj "/CN=*.lvh.me" -reqexts SAN -extensions SAN -config <(cat /System/Library/OpenSSL/openssl.cnf <(printf '[SAN]\nsubjectAltName=DNS:lvh.me,DNS:*.lvh.me,DNS:*.dev.lvh.me')) -sha256 -days 3650;
open lvh.me.crt; # Mac钥匙串 打开
# 搜索 *.lvh, 双击添加的证书, 设置始终信任 (Trust - When using this certificate: Always Trust).

lvh.me 是一个指向127.0.0.1的泛域名服务, 优点: 不需要改DNS/hosts, 各项目使用不同的域名方便隔离(比如cookies/密码管理器). 类似的还有xip.io, nip.io, localtest.me, fuf.me, vcap.me等.

使用Apache或Nginx配置域名和虚拟机

本地域名绑定 apache

# 1. 编辑 `/etc/apache2/httpd.conf`, 添加行:
ServerName localhost
# 取消这些行的注释:
Include /private/etc/apache2/extra/httpd-vhosts.conf
LoadModule proxy_module libexec/apache2/mod_proxy.so
LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so
LoadModule macro_module libexec/apache2/mod_macro.so
LoadModule ssl_module libexec/apache2/mod_ssl.so
Include /private/etc/apache2/extra/httpd-ssl.conf
LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so
LoadModule http2_module libexec/apache2/mod_http2.so

# 2. 编辑 `/private/etc/apache2/extra/httpd-vhosts.conf`, 增加:
<Macro SSLLvh>
    SSLEngine on
    SSLCertificateFile /Users/leon/.ssl/lvh.me.crt
    SSLCertificateKeyFile /Users/leon/.ssl/lvh.me.key
    Protocols h2 http/1.1
</Macro>
<Macro Site>
    ServerName leon.lvh.me
    ProxyRequests off
    <Location />
        ProxyPass http://localhost:3000/
        ProxyPassReverse http://localhost:3000/
    </Location>
</Macro>
<VirtualHost *:80>
    Use Site
</VirtualHost>
<VirtualHost *:443>
   Use SSLLvh
   Use Site
</VirtualHost>
# 3. 启动Apache
# sudo apachectl configtest # test
sudo apachectl -k restart # 启动
# sudo apachectl -e debug # print errors

本地域名绑定 nginx

sudo apachectl -k stop # 停止 apache 服务
brew install nginx # 用brew安装
# 编辑 `/usr/local/etc/nginx/nginx.conf`
# listen 80; 改为: listen 80;
# root   html; 改为:
# root /Users/leon/Downloads;
# autoindex on;
# include servers/*; 改为: include conf.d/*.conf;

chmod 755 /Users/leon/Downloads
mkdir /usr/local/etc/nginx/conf.d;
# 编辑 `/usr/local/etc/nginx/conf.d/test.conf`;
server {
    listen 80;
    server_name leon.lvh.me;
    # SSL # include lvh_ssl.conf;
    listen 443 ssl http2;
    ssl_certificate /Users/leon/.ssl/lvh.me.crt;
    ssl_certificate_key /Users/leon/.ssl/lvh.me.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
    ssl_prefer_server_ciphers on;
    location / {
      # root /Users/leon/Downloads;
      # autoindex on;
      proxy_pass http://localhost:3000;
      proxy_set_header Host $host;
    }
}
# fix Permission denied while uploading
sudo chmod o+x /usr/local/var
sudo chown -vhR nobody:admin /usr/local/var/run/nginx
# brew services list
sudo brew services restart nginx # 启动
# sudo brew services stop nginx
sudo nginx -s reload # 重启

接下来就可以使用 https://leon.lvh.me 访问本地项目了.

/ 分类: 工具,实践 / TrackBackhttps://xhl.me/archives/set-up-local-https/trackback标签: https

添加新评论 »